Create and open deep links universally across React Native, Expo, and web platforms
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
Create properly formatted deep links and parse URL components with support for Expo-specific URL patterns and cross-platform compatibility.
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:
<scheme>://path - uses scheme from app confighttps://localhost:19006/pathhttps://myapp.com/pathexp://128.0.0.1:8081/--/pathParses 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
// }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.