or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-operations.mdindex.mdreact-integration.mdscheme-management.mdurl-operations.md
tile.json

url-operations.mddocs/

URL Creation and Parsing

Create properly formatted deep links and parse URL components with support for Expo-specific URL patterns and cross-platform compatibility.

Capabilities

Create URL

Constructs a deep link URL with path and query parameters, handling scheme resolution automatically.

/**
 * Helper method for constructing a deep link into your app, given an optional path and set of query parameters.
 * Creates a URI scheme with two slashes by default.
 * The scheme must be defined in app config under expo.scheme or expo.{android,ios}.scheme.
 * @param path - Additional path components to append to the base URL
 * @param options - Configuration options for URL creation
 * @returns A URL string which points to your app with the given deep link information
 */
function createURL(path: string, options?: CreateURLOptions): string;

interface CreateURLOptions {
  /** URI protocol <scheme>:// that must be built into your native app */
  scheme?: string;
  /** An object of parameters that will be converted into a query string */
  queryParams?: QueryParams;
  /** Should the URI be triple slashed scheme:///path or double slashed scheme://path */
  isTripleSlashed?: boolean;
}

type QueryParams = Record<string, undefined | string | string[]>;

Usage Examples:

import { createURL } from "expo-linking";

// Basic URL creation
const url = createURL("profile/123");
// Result: "myapp://profile/123"

// With query parameters
const urlWithParams = createURL("search", {
  queryParams: { 
    query: "react native", 
    category: "tutorials",
    tags: ["mobile", "javascript"] 
  }
});
// Result: "myapp://search?query=react%20native&category=tutorials&tags=mobile&tags=javascript"

// With custom scheme
const customUrl = createURL("settings", {
  scheme: "myapp-dev",
  queryParams: { theme: "dark" }
});
// Result: "myapp-dev://settings?theme=dark"

// Triple-slashed URL
const tripleSlashUrl = createURL("admin/users", {
  isTripleSlashed: true
});
// Result: "myapp:///admin/users"

Environment-Specific Behavior:

  • Development builds: <scheme>://path - uses scheme from app config
  • Web (dev): https://localhost:19006/path
  • Web (prod): https://myapp.com/path
  • Expo Go (dev): exp://128.0.0.1:8081/--/path

Parse URL

Parses a URL into its components, handling Expo-specific URL patterns.

/**
 * Helper method for parsing out deep link information from a URL.
 * @param url - A URL that points to the currently running experience (e.g., output of createURL())
 * @returns A ParsedURL object with extracted components
 */
function parse(url: string): ParsedURL;

interface ParsedURL {
  /** The URL scheme without the colon (e.g., 'myapp' from 'myapp://') */
  scheme: string | null;
  /** The hostname from the URL */
  hostname: string | null;
  /** The path into the app specified by the URL */
  path: string | null;
  /** The set of query parameters specified by the query string */
  queryParams: QueryParams | null;
}

Usage Examples:

import { parse } from "expo-linking";

// Parse a basic deep link
const parsed = parse("myapp://profile/123?tab=settings&theme=dark");
console.log(parsed);
// {
//   scheme: "myapp",
//   hostname: null,
//   path: "profile/123",
//   queryParams: { tab: "settings", theme: "dark" }
// }

// Parse a web URL
const webParsed = parse("https://myapp.com/profile/123?tab=settings");
console.log(webParsed);
// {
//   scheme: "https",
//   hostname: "myapp.com",
//   path: "profile/123",
//   queryParams: { tab: "settings" }
// }

// Parse Expo Go development URL
const expoParsed = parse("exp://192.168.1.100:19000/--/profile/123");
console.log(expoParsed);
// {
//   scheme: "exp",
//   hostname: "192.168.1.100",
//   path: "profile/123",
//   queryParams: null
// }

Parse Initial URL

Parses the initial URL that launched the app, combining getInitialURL() with parse().

/**
 * Helper method which wraps React Native's Linking.getInitialURL() in Linking.parse().
 * Parses the deep link information out of the URL used to open the experience initially.
 * If no link opened the app, all the fields will be null.
 * On the web it parses the current window URL.
 * @returns A promise that resolves with ParsedURL object
 */
function parseInitialURLAsync(): Promise<ParsedURL>;

Usage Example:

import { parseInitialURLAsync } from "expo-linking";

const initialUrl = await parseInitialURLAsync();

if (initialUrl.path) {
  console.log("App launched with path:", initialUrl.path);
  console.log("Query params:", initialUrl.queryParams);
  
  // Navigate to the appropriate screen
  if (initialUrl.path.startsWith("profile/")) {
    const userId = initialUrl.path.split("/")[1];
    navigateToProfile(userId);
  }
} else {
  console.log("App launched normally");
}

Note: All URL operations (openURL, canOpenURL, parse) include automatic validation to ensure URLs are properly formatted. Invalid URLs will throw an error.