expo-router 1.0.0-rc8 → 1.2.0

package/node/render.js

@@ -1,2 +1,3 @@
 // Assumes Metro handles this import.
-module.exports = require("../src/static/renderStaticContent");
+// NOTE(EvanBacon): No relative imports!
+module.exports = require("expo-router/src/static/renderStaticContent");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-router",
-  "version": "1.0.0-rc8",
+  "version": "1.2.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "files": [
@@ -42,7 +42,7 @@
   },
   "peerDependencies": {
     "@react-navigation/drawer": "^6.5.8",
-    "expo": "~46.0.2 || ~47.0.0-beta || ~47.0.0 || ~48.0.0-beta || ~48.0.0",
+    "expo": "^48.0.0",
     "expo-constants": "*",
     "expo-linking": "*",
     "expo-status-bar": "*",
@@ -53,9 +53,6 @@
     "react-native-screens": "*"
   },
   "peerDependenciesMeta": {
-    "react-native-gesture-handler": {
-      "optional": true
-    },
     "react-native-reanimated": {
       "optional": true
     },
@@ -64,26 +61,23 @@
     }
   },
   "devDependencies": {
-    "@react-navigation/drawer": "^6.4.4",
-    "@types/jest": "^26",
-    "jest": "^26.6.3",
-    "expo-module-scripts": "^2.0.0",
-    "expo-splash-screen": "^0.16.2",
-    "expo-status-bar": "^1.4.0",
-    "react-native-gesture-handler": "~2.5.0",
-    "react-native-reanimated": "~2.9.1",
-    "react-native-safe-area-context": "4.5.0",
-    "react-native-screens": "~3.19.0"
+    "@react-navigation/drawer": "^6.6.2",
+    "expo-splash-screen": "~0.18.1",
+    "expo-status-bar": "~1.4.4",
+    "react-native-gesture-handler": "~2.9.0",
+    "react-native-reanimated": "~2.14.4",
+    "react-native-safe-area-context": "~4.5.0",
+    "react-native-screens": "~3.20.0"
   },
   "dependencies": {
     "@bacons/react-views": "^1.1.3",
-    "@expo/metro-runtime": "~0.0.1",
+    "@expo/metro-runtime": "1.0.0",
     "@radix-ui/react-slot": "^1.0.0",
-    "react-helmet-async": "^1.3.0",
-    "@react-navigation/bottom-tabs": "~6.5.4",
-    "@react-navigation/native": "~6.1.3",
-    "@react-navigation/native-stack": "~6.9.9",
+    "@react-navigation/bottom-tabs": "~6.5.7",
+    "@react-navigation/native": "~6.1.6",
+    "@react-navigation/native-stack": "~6.9.12",
     "expo-splash-screen": "*",
+    "react-helmet-async": "^1.3.0",
     "url": "^0.11.0"
   }
 }

package/src/LocationProvider.tsx

@@ -3,6 +3,7 @@ import React from "react";
 
 import { getNavigationContainerRef } from "./NavigationContainer";
 import getPathFromState, {
+  deepEqual,
   getPathDataFromState,
   State,
 } from "./fork/getPathFromState";
@@ -10,7 +11,7 @@ import { useLinkingContext } from "./link/useLinkingContext";
 import { useServerState } from "./static/useServerState";
 import { useInitialRootStateContext } from "./useInitialRootStateContext";
 
-type SearchParams = Record<string, string>;
+type SearchParams = Record<string, string | string[]>;
 
 type UrlObject = {
   pathname: string;
@@ -42,15 +43,11 @@ function compareRouteInfo(a: UrlObject, b: UrlObject) {
   );
 }
 
-function compareUrlSearchParams(a: SearchParams, b: SearchParams): boolean {
-  const aKeys = Object.keys(a);
-  const bKeys = Object.keys(b);
-
-  if (aKeys.length !== bKeys.length) {
-    return false;
-  }
-
-  return aKeys.every((key) => a[key] === b[key]);
+export function compareUrlSearchParams(
+  a: SearchParams,
+  b: SearchParams
+): boolean {
+  return deepEqual(a, b);
 }
 
 function useSafeInitialRootState() {
@@ -129,7 +126,6 @@ function useGetPathFromState() {
   return React.useCallback(
     (state: Parameters<typeof getPathFromState>[0], asPath: boolean) => {
       return getPathDataFromState(state, {
-        // return linking.getPathFromState(state, {
         ...linking.config,
         preserveDynamicRoutes: asPath,
         preserveGroups: asPath,
@@ -196,13 +192,17 @@ export function usePathname(): string {
 }
 
 /** @returns Current URL Search Parameters. */
-export function useSearchParams(): SearchParams {
-  return useLocation().params;
+export function useSearchParams<
+  TParams extends SearchParams = SearchParams
+>(): Partial<TParams> {
+  return useLocation().params as Partial<TParams>;
 }
 
 /** @returns Current URL Search Parameters that only update when the path matches the current route. */
-export function useLocalSearchParams(): SearchParams {
-  return useRoute()?.params ?? ({} as any);
+export function useLocalSearchParams<
+  TParams extends SearchParams = SearchParams
+>(): Partial<TParams> {
+  return (useRoute()?.params ?? ({} as any)) as Partial<TParams>;
 }
 
 /** @returns Array of selected segments. */

package/src/NavigationContainer.tsx

@@ -1,18 +1,12 @@
-import {
-  createNavigationContainerRef,
-  NavigationContainer as UpstreamNavigationContainer,
-} from "@react-navigation/native";
+import { createNavigationContainerRef } from "@react-navigation/native";
 import React from "react";
 
+import UpstreamNavigationContainer from "./fork/NavigationContainer";
 import { getLinkingConfig } from "./getLinkingConfig";
 import { RootNavigationRef } from "./useRootNavigation";
 import { useRootRouteNodeContext } from "./useRootRouteNodeContext";
 import { SplashScreen } from "./views/Splash";
 
-type NavigationContainerProps = React.ComponentProps<
-  typeof UpstreamNavigationContainer
->;
-
 const navigationRef = createNavigationContainerRef();
 
 /** Get the root navigation container ref. */
@@ -21,17 +15,13 @@ export function getNavigationContainerRef() {
 }
 
 /** react-navigation `NavigationContainer` with automatic `linking` prop generated from the routes context. */
-export function NavigationContainer(props: NavigationContainerProps) {
+export function NavigationContainer(props: { children: React.ReactNode }) {
   const [isReady, setReady] = React.useState(false);
   const [isSplashReady, setSplashReady] = React.useState(false);
   const ref = React.useMemo(() => (isReady ? navigationRef : null), [isReady]);
   const root = useRootRouteNodeContext();
   const linking = React.useMemo(() => getLinkingConfig(root), [root]);
 
-  React.useEffect(() => {
-    props.onReady?.();
-  }, [!!props?.onReady]);
-
   return (
     <RootNavigationRef.Provider value={{ ref }}>
       {!isSplashReady && <SplashScreen />}

package/src/__tests__/LocationProvider.test.node.ts

@@ -1,4 +1,7 @@
-import { getNormalizedStatePath } from "../LocationProvider";
+import {
+  getNormalizedStatePath,
+  compareUrlSearchParams,
+} from "../LocationProvider";
 
 describe(getNormalizedStatePath, () => {
   // Ensure all values are correctly decoded
@@ -25,3 +28,28 @@ describe(getNormalizedStatePath, () => {
     });
   });
 });
+
+describe(compareUrlSearchParams, () => {
+  it("compares search params", () => {
+    expect(
+      compareUrlSearchParams(
+        { one: "two", three: ["four"] },
+        { one: "two", three: ["four"] }
+      )
+    ).toBe(true);
+
+    expect(
+      compareUrlSearchParams(
+        { one: "two", three: ["four"], five: "six", seven: "eight" },
+        { one: "two", three: ["four"], five: "six", seven: "eight" }
+      )
+    ).toBe(true);
+
+    expect(
+      compareUrlSearchParams(
+        { six: "seven", eight: ["nine"] },
+        { one: "two", three: ["four"] }
+      )
+    ).toBe(false);
+  });
+});

package/src/__tests__/getRoutes.test.node.ts

@@ -76,7 +76,7 @@ describe(assertDuplicateRoutes, () => {
     expect(() =>
       assertDuplicateRoutes(["a.js", "a.tsx", "b.js"])
     ).toThrowErrorMatchingInlineSnapshot(
-      `"Multiple files match the route name \\"a\\"."`
+      `"Multiple files match the route name "a"."`
     );
   });
 

package/src/fork/NavigationContainer.native.tsx

@@ -0,0 +1,159 @@
+// Forked from React Navigation in order to use a custom `useLinking` -> `extractPathFromURL` function.
+// https://github.com/react-navigation/react-navigation/blob/main/packages/native/src/NavigationContainer.tsx
+import {
+  BaseNavigationContainer,
+  getActionFromState,
+  getPathFromState,
+  getStateFromPath,
+  NavigationContainerProps,
+  NavigationContainerRef,
+  ParamListBase,
+  validatePathConfig,
+} from "@react-navigation/core";
+import {
+  DefaultTheme,
+  DocumentTitleOptions,
+  LinkingContext,
+  LinkingOptions,
+  Theme,
+  ThemeProvider,
+} from "@react-navigation/native";
+import useBackButton from "@react-navigation/native/src/useBackButton";
+import useDocumentTitle from "@react-navigation/native/src/useDocumentTitle";
+import useThenable from "@react-navigation/native/src/useThenable";
+import * as React from "react";
+
+import useLinking from "./useLinking";
+
+declare global {
+  // eslint-disable-next-line no-var
+  var REACT_NAVIGATION_DEVTOOLS: WeakMap<
+    NavigationContainerRef<any>,
+    { readonly linking: LinkingOptions<any> }
+  >;
+}
+
+global.REACT_NAVIGATION_DEVTOOLS = new WeakMap();
+
+type Props<ParamList extends object> = NavigationContainerProps & {
+  theme?: Theme;
+  linking?: LinkingOptions<ParamList>;
+  fallback?: React.ReactNode;
+  documentTitle?: DocumentTitleOptions;
+  onReady?: () => void;
+};
+
+/**
+ * Container component which holds the navigation state designed for React Native apps.
+ * This should be rendered at the root wrapping the whole app.
+ *
+ * @param props.initialState Initial state object for the navigation tree. When deep link handling is enabled, this will override deep links when specified. Make sure that you don't specify an `initialState` when there's a deep link (`Linking.getInitialURL()`).
+ * @param props.onReady Callback which is called after the navigation tree mounts.
+ * @param props.onStateChange Callback which is called with the latest navigation state when it changes.
+ * @param props.theme Theme object for the navigators.
+ * @param props.linking Options for deep linking. Deep link handling is enabled when this prop is provided, unless `linking.enabled` is `false`.
+ * @param props.fallback Fallback component to render until we have finished getting initial state when linking is enabled. Defaults to `null`.
+ * @param props.documentTitle Options to configure the document title on Web. Updating document title is handled by default unless `documentTitle.enabled` is `false`.
+ * @param props.children Child elements to render the content.
+ * @param props.ref Ref object which refers to the navigation object containing helper methods.
+ */
+function NavigationContainerInner(
+  {
+    theme = DefaultTheme,
+    linking,
+    fallback = null,
+    documentTitle,
+    onReady,
+    ...rest
+  }: Props<ParamListBase>,
+  ref?: React.Ref<NavigationContainerRef<ParamListBase> | null>
+) {
+  const isLinkingEnabled = linking ? linking.enabled !== false : false;
+
+  if (linking?.config) {
+    validatePathConfig(linking.config);
+  }
+
+  const refContainer =
+    React.useRef<NavigationContainerRef<ParamListBase>>(null);
+
+  useBackButton(refContainer);
+  useDocumentTitle(refContainer, documentTitle);
+
+  const { getInitialState } = useLinking(refContainer, {
+    // independent: rest.independent,
+    enabled: isLinkingEnabled,
+    prefixes: [],
+    ...linking,
+  });
+
+  // Add additional linking related info to the ref
+  // This will be used by the devtools
+  React.useEffect(() => {
+    if (refContainer.current) {
+      REACT_NAVIGATION_DEVTOOLS.set(refContainer.current, {
+        get linking() {
+          return {
+            ...linking,
+            enabled: isLinkingEnabled,
+            prefixes: linking?.prefixes ?? [],
+            getStateFromPath: linking?.getStateFromPath ?? getStateFromPath,
+            getPathFromState: linking?.getPathFromState ?? getPathFromState,
+            getActionFromState:
+              linking?.getActionFromState ?? getActionFromState,
+          };
+        },
+      });
+    }
+  });
+
+  const [isResolved, initialState] = useThenable(getInitialState);
+
+  React.useImperativeHandle(ref, () => refContainer.current);
+
+  const linkingContext = React.useMemo(() => ({ options: linking }), [linking]);
+
+  const isReady = rest.initialState != null || !isLinkingEnabled || isResolved;
+
+  const onReadyRef = React.useRef(onReady);
+
+  React.useEffect(() => {
+    onReadyRef.current = onReady;
+  });
+
+  React.useEffect(() => {
+    if (isReady) {
+      onReadyRef.current?.();
+    }
+  }, [isReady]);
+
+  if (!isReady) {
+    // This is temporary until we have Suspense for data-fetching
+    // Then the fallback will be handled by a parent `Suspense` component
+    return fallback as React.ReactElement;
+  }
+
+  return (
+    <LinkingContext.Provider value={linkingContext}>
+      <ThemeProvider value={theme}>
+        <BaseNavigationContainer
+          {...rest}
+          initialState={
+            rest.initialState == null ? initialState : rest.initialState
+          }
+          ref={refContainer}
+        />
+      </ThemeProvider>
+    </LinkingContext.Provider>
+  );
+}
+
+const NavigationContainer = React.forwardRef(NavigationContainerInner) as <
+  RootParamList extends object = ReactNavigation.RootParamList
+>(
+  props: Props<RootParamList> & {
+    ref?: React.Ref<NavigationContainerRef<RootParamList>>;
+  }
+) => React.ReactElement;
+
+export default NavigationContainer;

package/src/fork/NavigationContainer.tsx

@@ -0,0 +1,4 @@
+// We only need to fork on native to support any prefixes.
+import { NavigationContainer } from "@react-navigation/native";
+
+export default NavigationContainer;

package/src/fork/__tests__/__snapshots__/extractPathFromURL.test.ios.ts.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`extractExpoPathFromURL parses "custom://" 1`] = `""`;
+
+exports[`extractExpoPathFromURL parses "custom:///" 1`] = `""`;
+
+exports[`extractExpoPathFromURL parses "custom:///?shouldBeEscaped=x%252By%2540xxx.com" 1`] = `"?shouldBeEscaped=x+y@xxx.com"`;
+
+exports[`extractExpoPathFromURL parses "custom:///test/path?foo=bar" 1`] = `"test/path?foo=bar"`;
+
+exports[`extractExpoPathFromURL parses "custom://?hello=bar" 1`] = `"?hello=bar"`;
+
+exports[`extractExpoPathFromURL parses "exp://127.0.0.1:19000/" 1`] = `""`;
+
+exports[`extractExpoPathFromURL parses "exp://127.0.0.1:19000/--/test/path?query=param" 1`] = `"test/path?query=param"`;
+
+exports[`extractExpoPathFromURL parses "exp://127.0.0.1:19000?query=param" 1`] = `"?query=param"`;
+
+exports[`extractExpoPathFromURL parses "exp://exp.host/@test/test/--/test/path" 1`] = `"test/path"`;
+
+exports[`extractExpoPathFromURL parses "exp://exp.host/@test/test/--/test/path/--/foobar" 1`] = `"test/path/--/foobar"`;
+
+exports[`extractExpoPathFromURL parses "exp://exp.host/@test/test/--/test/path?query=param" 1`] = `"test/path?query=param"`;
+
+exports[`extractExpoPathFromURL parses "https://example.com/test/path" 1`] = `"test/path"`;
+
+exports[`extractExpoPathFromURL parses "https://example.com/test/path?missingQueryValue=" 1`] = `"test/path?missingQueryValue="`;
+
+exports[`extractExpoPathFromURL parses "https://example.com/test/path?query=do+not+escape" 1`] = `"test/path?query=do not escape"`;
+
+exports[`extractExpoPathFromURL parses "https://example.com/test/path?query=param" 1`] = `"test/path?query=param"`;
+
+exports[`extractExpoPathFromURL parses "https://example.com:8000/test/path" 1`] = `"test/path"`;
+
+exports[`extractExpoPathFromURL parses "https://example.com:8000/test/path+with+plus" 1`] = `"with+plus"`;
+
+exports[`extractExpoPathFromURL parses "invalid" 1`] = `"invalid"`;

package/src/fork/__tests__/extractPathFromURL.test.ios.ts

@@ -0,0 +1,46 @@
+import Constants, { ExecutionEnvironment } from "expo-constants";
+
+import { extractExpoPathFromURL } from "../extractPathFromURL";
+
+describe(extractExpoPathFromURL, () => {
+  const originalExecutionEnv = Constants.executionEnvironment;
+
+  afterEach(() => {
+    Constants.executionEnvironment = originalExecutionEnv;
+  });
+
+  test.each<string>([
+    "exp://127.0.0.1:19000/",
+    "exp://127.0.0.1:19000/--/test/path?query=param",
+    "exp://127.0.0.1:19000?query=param",
+    "exp://exp.host/@test/test/--/test/path?query=param",
+    "exp://exp.host/@test/test/--/test/path",
+    "exp://exp.host/@test/test/--/test/path/--/foobar",
+    "https://example.com/test/path?query=param",
+    "https://example.com/test/path",
+    "https://example.com:8000/test/path",
+    "https://example.com:8000/test/path+with+plus",
+    "https://example.com/test/path?query=do+not+escape",
+    "https://example.com/test/path?missingQueryValue=",
+    "custom:///?shouldBeEscaped=x%252By%2540xxx.com",
+    "custom:///test/path?foo=bar",
+    "custom:///",
+    "custom://",
+    "custom://?hello=bar",
+    "invalid",
+  ])(`parses %p`, (url) => {
+    Constants.executionEnvironment = ExecutionEnvironment.StoreClient;
+
+    const res = extractExpoPathFromURL(url);
+    expect(res).toMatchSnapshot();
+    // Ensure the Expo Go handling never breaks
+    expect(res).not.toMatch(/^--\//);
+  });
+
+  it(`only handles Expo Go URLs in Expo Go`, () => {
+    Constants.executionEnvironment = ExecutionEnvironment.Bare;
+
+    const res = extractExpoPathFromURL("exp://127.0.0.1:19000/--/test");
+    expect(res).toEqual("--/test");
+  });
+});

package/src/fork/extractPathFromURL.ts

@@ -0,0 +1,22 @@
+import Constants, { ExecutionEnvironment } from "expo-constants";
+import * as Linking from "expo-linking";
+
+// This is only run on native.
+export function extractExpoPathFromURL(url: string) {
+  // Handle special URLs used in Expo Go: `/--/pathname` -> `pathname`
+  if (Constants.executionEnvironment === ExecutionEnvironment.StoreClient) {
+    const pathname = url.match(/exps?:\/\/.*?\/--\/(.*)/)?.[1];
+    if (pathname) {
+      return pathname;
+    }
+    // Fallback on default behavior
+  }
+
+  const res = Linking.parse(url);
+  const qs = !res.queryParams
+    ? ""
+    : Object.entries(res.queryParams)
+        .map(([k, v]) => `${k}=${v}`)
+        .join("&");
+  return (res.path || "") + (qs ? "?" + qs : "");
+}

package/src/fork/getPathFromState.ts

@@ -183,7 +183,7 @@ function processParamsWithUserSettings(
   );
 }
 
-function deepEqual(a: any, b: any) {
+export function deepEqual(a: any, b: any) {
   if (a === b) {
     return true;
   }

package/src/fork/useLinking.native.ts

@@ -0,0 +1,223 @@
+// Forked from react-navigation with a custom `extractPathFromURL` that automatically
+// allows any prefix and parses Expo Go URLs.
+// For simplicity the following are disabled: enabled, prefixes, independent
+// https://github.com/react-navigation/react-navigation/blob/main/packages/native/src/useLinking.native.tsx
+import {
+  getActionFromState as getActionFromStateDefault,
+  getStateFromPath as getStateFromPathDefault,
+  NavigationContainerRef,
+  ParamListBase,
+} from "@react-navigation/core";
+import type { LinkingOptions } from "@react-navigation/native";
+import * as React from "react";
+import { Linking, Platform } from "react-native";
+
+import { extractExpoPathFromURL } from "./extractPathFromURL";
+
+type ResultState = ReturnType<typeof getStateFromPathDefault>;
+
+type Options = LinkingOptions<ParamListBase>;
+
+const linkingHandlers: symbol[] = [];
+
+export default function useLinking(
+  ref: React.RefObject<NavigationContainerRef<ParamListBase>>,
+  {
+    // enabled = true,
+    // prefixes,
+    filter,
+    config,
+    getInitialURL = () =>
+      Promise.race([
+        Linking.getInitialURL(),
+        new Promise<undefined>((resolve) =>
+          // Timeout in 150ms if `getInitialState` doesn't resolve
+          // Workaround for https://github.com/facebook/react-native/issues/25675
+          setTimeout(resolve, 150)
+        ),
+      ]),
+    subscribe = (listener) => {
+      const callback = ({ url }: { url: string }) => listener(url);
+
+      const subscription = Linking.addEventListener("url", callback) as
+        | { remove(): void }
+        | undefined;
+
+      return () => {
+        subscription?.remove();
+      };
+    },
+    getStateFromPath = getStateFromPathDefault,
+    getActionFromState = getActionFromStateDefault,
+  }: Options
+) {
+  //   const independent = useNavigationIndependentTree();
+
+  React.useEffect(
+    () => {
+      if (process.env.NODE_ENV === "production") {
+        return undefined;
+      }
+
+      // if (independent) {
+      //   return undefined;
+      // }
+
+      if (
+        // enabled !== false &&
+        linkingHandlers.length
+      ) {
+        console.error(
+          [
+            "Looks like you have configured linking in multiple places. This is likely an error since deep links should only be handled in one place to avoid conflicts. Make sure that:",
+            "- You don't have multiple NavigationContainers in the app each with 'linking' enabled",
+            "- Only a single instance of the root component is rendered",
+            Platform.OS === "android"
+              ? "- You have set 'android:launchMode=singleTask' in the '<activity />' section of the 'AndroidManifest.xml' file to avoid launching multiple instances"
+              : "",
+          ]
+            .join("\n")
+            .trim()
+        );
+      }
+
+      const handler = Symbol();
+
+      // if (enabled !== false) {
+      linkingHandlers.push(handler);
+      // }
+
+      return () => {
+        const index = linkingHandlers.indexOf(handler);
+
+        if (index > -1) {
+          linkingHandlers.splice(index, 1);
+        }
+      };
+    },
+    [
+      // enabled,
+      // independent
+    ]
+  );
+
+  // We store these options in ref to avoid re-creating getInitialState and re-subscribing listeners
+  // This lets user avoid wrapping the items in `React.useCallback` or `React.useMemo`
+  // Not re-creating `getInitialState` is important coz it makes it easier for the user to use in an effect
+  //   const enabledRef = React.useRef(enabled);
+  //   const prefixesRef = React.useRef(prefixes);
+  const filterRef = React.useRef(filter);
+  const configRef = React.useRef(config);
+  const getInitialURLRef = React.useRef(getInitialURL);
+  const getStateFromPathRef = React.useRef(getStateFromPath);
+  const getActionFromStateRef = React.useRef(getActionFromState);
+
+  React.useEffect(() => {
+    // enabledRef.current = enabled;
+    // prefixesRef.current = prefixes;
+    filterRef.current = filter;
+    configRef.current = config;
+    getInitialURLRef.current = getInitialURL;
+    getStateFromPathRef.current = getStateFromPath;
+    getActionFromStateRef.current = getActionFromState;
+  });
+
+  const getStateFromURL = React.useCallback(
+    (url: string | null | undefined) => {
+      if (!url || (filterRef.current && !filterRef.current(url))) {
+        return undefined;
+      }
+
+      // NOTE(EvanBacon): This is the important part.
+      const path = extractExpoPathFromURL(url);
+
+      return path !== undefined
+        ? getStateFromPathRef.current(path, configRef.current)
+        : undefined;
+    },
+    []
+  );
+
+  const getInitialState = React.useCallback(() => {
+    // let state: ResultState | undefined;
+    // if (enabledRef.current) {
+    const url = getInitialURLRef.current();
+
+    if (url != null && typeof url !== "string") {
+      return url.then((url) => {
+        const state = getStateFromURL(url);
+
+        return state;
+      });
+    }
+
+    const state = getStateFromURL(url);
+    // }
+
+    const thenable = {
+      then(onfulfilled?: (state: ResultState | undefined) => void) {
+        return Promise.resolve(onfulfilled ? onfulfilled(state) : state);
+      },
+      catch() {
+        return thenable;
+      },
+    };
+
+    return thenable as PromiseLike<ResultState | undefined>;
+  }, [getStateFromURL]);
+
+  React.useEffect(() => {
+    const listener = (url: string) => {
+      //   if (!enabled) {
+      //     return;
+      //   }
+
+      const navigation = ref.current;
+      const state = navigation ? getStateFromURL(url) : undefined;
+
+      if (navigation && state) {
+        // Make sure that the routes in the state exist in the root navigator
+        // Otherwise there's an error in the linking configuration
+        const rootState = navigation.getRootState();
+
+        if (state.routes.some((r) => !rootState?.routeNames.includes(r.name))) {
+          console.warn(
+            "The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration."
+          );
+          return;
+        }
+
+        const action = getActionFromStateRef.current(state, configRef.current);
+
+        if (action !== undefined) {
+          try {
+            navigation.dispatch(action);
+          } catch (e) {
+            // Ignore any errors from deep linking.
+            // This could happen in case of malformed links, navigation object not being initialized etc.
+            console.warn(
+              `An error occurred when trying to handle the link '${url}': ${
+                typeof e === "object" && e != null && "message" in e
+                  ? e.message
+                  : e
+              }`
+            );
+          }
+        } else {
+          navigation.resetRoot(state);
+        }
+      }
+    };
+
+    return subscribe(listener);
+  }, [
+    // enabled,
+    getStateFromURL,
+    ref,
+    subscribe,
+  ]);
+
+  return {
+    getInitialState,
+  };
+}

package/src/fork/useLinking.ts

@@ -0,0 +1,3 @@
+import useLinking from "@react-navigation/native/lib/module/useLinking";
+
+export default useLinking as typeof import("./useLinking.native").default;

package/src/getLinkingConfig.ts

@@ -1,12 +1,10 @@
 import { LinkingOptions, getActionFromState } from "@react-navigation/native";
 
 import { RouteNode } from "./Route";
-import { getAllWebRedirects } from "./aasa";
 import {
   addEventListener,
   getInitialURL,
   getPathFromState,
-  getRootURL,
   getStateFromPath,
 } from "./link/linking";
 import { matchDeepDynamicRouteName, matchDynamicName } from "./matchers";
@@ -93,14 +91,7 @@ export function getNavigationConfig(routes: RouteNode): {
 
 export function getLinkingConfig(routes: RouteNode): LinkingOptions<object> {
   return {
-    prefixes: [
-      /* your linking prefixes */
-      getRootURL(),
-
-      // This ensures that we can redirect correctly when the user comes from an associated domain
-      // i.e. iOS Safari banner.
-      ...getAllWebRedirects(),
-    ],
+    prefixes: [],
     // @ts-expect-error
     config: getNavigationConfig(routes),
     // A custom getInitialURL is used on native to ensure the app always starts at

package/src/link/__tests__/stateOperations.test.node.ts

@@ -2,8 +2,113 @@ import {
   isMovingToSiblingRoute,
   findTopRouteForTarget,
   getQualifiedStateForTopOfTargetState,
+  getEarliestMismatchedRoute,
 } from "../stateOperations";
 
+describe(getEarliestMismatchedRoute, () => {
+  it(`finds earliest mismatched route`, () => {
+    expect(
+      getEarliestMismatchedRoute(
+        {
+          type: "tab",
+          index: 0,
+          routes: [
+            {
+              name: "root",
+              state: {
+                type: "stack",
+                index: 0,
+                routes: [
+                  {
+                    name: "(auth)/sign-in",
+                  },
+                ],
+              },
+            },
+            {
+              name: "_sitemap",
+            },
+            {
+              name: "[...404]",
+            },
+          ],
+        },
+        {
+          name: "root",
+          path: "",
+          initial: true,
+          screen: "root",
+          params: {
+            initial: true,
+            screen: "(app)",
+            path: "",
+            params: {
+              initial: true,
+              screen: "index",
+              path: "/root",
+            },
+          },
+        }
+      )
+    ).toEqual({
+      name: "(app)",
+      type: "stack",
+      params: {
+        initial: true,
+        path: "/root",
+        screen: "index",
+      },
+    });
+  });
+
+  it(`returns top-level match`, () => {
+    expect(
+      getEarliestMismatchedRoute(
+        {
+          type: "tab",
+          index: 1,
+          routes: [
+            {
+              name: "root",
+            },
+            {
+              name: "_sitemap",
+            },
+            {
+              name: "[...404]",
+            },
+          ],
+        },
+        {
+          name: "root",
+          path: "",
+          initial: true,
+          screen: "root",
+          params: {
+            initial: true,
+            screen: "(app)",
+            path: "",
+            params: {
+              initial: true,
+              screen: "index",
+              path: "/root",
+            },
+          },
+        }
+      )
+    ).toEqual({
+      name: "root",
+      params: {
+        initial: true,
+        params: { initial: true, path: "/root", screen: "index" },
+        path: "",
+        screen: "(app)",
+      },
+      type: "tab",
+    });
+  });
+});
+
 describe(findTopRouteForTarget, () => {
   it(`finds the top route`, () => {
     expect(

package/src/link/__tests__/useLinkToPath.test.node.ts

@@ -0,0 +1,53 @@
+import { isAbsoluteInitialRoute } from "../useLinkToPath";
+
+describe(isAbsoluteInitialRoute, () => {
+  it(`returns true when a nested action is absolutely initial`, () => {
+    expect(
+      isAbsoluteInitialRoute({
+        type: "NAVIGATE",
+        payload: {
+          name: "root",
+          params: {
+            initial: true,
+            screen: "(app)",
+            params: {
+              initial: true,
+              screen: "index",
+              path: "/root",
+            },
+          },
+        },
+      })
+    ).toBe(true);
+  });
+  it(`returns true when a nested action is absolutely initial (shallow)`, () => {
+    expect(
+      isAbsoluteInitialRoute({
+        type: "NAVIGATE",
+        payload: {
+          name: "root",
+          params: undefined,
+        },
+      })
+    ).toBe(true);
+  });
+  it(`returns false when a nested action is not absolutely initial`, () => {
+    expect(
+      isAbsoluteInitialRoute({
+        type: "NAVIGATE",
+        payload: {
+          name: "root",
+          params: {
+            initial: true,
+            screen: "(app)",
+            params: {
+              initial: false,
+              screen: "index",
+              path: "/root",
+            },
+          },
+        },
+      })
+    ).toBe(false);
+  });
+});

package/src/link/linking.ts

@@ -76,20 +76,11 @@ export function addEventListener(listener: (url: string) => void) {
   } else {
     callback = ({ url }: { url: string }) => listener(url);
   }
-  const subscription = Linking.addEventListener("url", callback) as
-    | { remove(): void }
-    | undefined;
-
-  // Storing this in a local variable stops Jest from complaining about import after teardown
-  const removeEventListener = Linking.removeEventListener?.bind(Linking);
+  const subscription = Linking.addEventListener("url", callback);
 
   return () => {
     // https://github.com/facebook/react-native/commit/6d1aca806cee86ad76de771ed3a1cc62982ebcd7
-    if (subscription?.remove) {
-      subscription.remove();
-    } else {
-      removeEventListener?.("url", callback);
-    }
+    subscription.remove?.();
   };
 }
 

package/src/link/stateOperations.ts

@@ -2,6 +2,13 @@ import { InitialState } from "@react-navigation/native";
 
 import { ResultState } from "../fork/getStateFromPath";
 
+export type ActionParams = {
+  params?: ActionParams;
+  path: string;
+  initial: boolean;
+  screen: string;
+};
+
 // Get the last state for a given target state (generated from a path).
 function findTopStateForTarget(state: ResultState) {
   let current: Partial<InitialState> | undefined = state;
@@ -87,3 +94,47 @@ export function getQualifiedStateForTopOfTargetState(
 
   return currentRoot;
 }
+
+type SubState = {
+  type: string;
+  routes?: { name: string; state?: SubState }[];
+  index?: number;
+};
+
+// Given the root state and a target state from `getStateFromPath`,
+// return the root state containing the highest target route matching the root state.
+// This can be used to determine what type of navigator action should be used.
+export function getEarliestMismatchedRoute(
+  rootState: SubState | undefined,
+  actionParams: ActionParams & { name?: string }
+): { name: string; params?: any; type?: string } | null {
+  const actionName = actionParams.name ?? actionParams.screen;
+  if (!rootState?.routes || rootState.index == null) {
+    // This should never happen where there's more action than state.
+    return {
+      name: actionName,
+      type: "stack",
+    };
+  }
+
+  const nextCurrentRoot = rootState.routes[rootState.index];
+  if (actionName === nextCurrentRoot.name) {
+    if (!actionParams.params) {
+      // All routes match all the way up, no change required.
+      return null;
+    }
+
+    return getEarliestMismatchedRoute(
+      nextCurrentRoot.state,
+      actionParams.params
+    );
+  }
+
+  // There's a selected state but it doesn't match the action state
+  // this is now the lowest point of change.
+  return {
+    name: actionName,
+    params: actionParams.params,
+    type: rootState.type,
+  };
+}

package/src/link/useLinkToPath.ts

@@ -11,11 +11,20 @@ import * as React from "react";
 import { resolve } from "./path";
 import {
   findTopRouteForTarget,
+  getEarliestMismatchedRoute,
   getQualifiedStateForTopOfTargetState,
   isMovingToSiblingRoute,
 } from "./stateOperations";
 import { useLinkingContext } from "./useLinkingContext";
 
+type NavStateParams = {
+  params?: NavStateParams;
+  path: string;
+  initial: boolean;
+  screen: string;
+  state: unknown;
+};
+
 function isRemoteHref(href: string): boolean {
   return /:\/\//.test(href);
 }
@@ -102,6 +111,39 @@ export function useLinkToPath() {
 
       const action = getActionFromState(state, linking!.config);
       if (action) {
+        // Here we have a navigation action to a nested screen, where we should ideally replace.
+        // This request can only be fulfilled if the target is an initial route.
+        // First, check if the action is fully initial routes.
+        // Then find the nearest mismatched route in the existing state.
+        // Finally, use the correct navigator-based action to replace the nested screens.
+        // NOTE(EvanBacon): A future version of this will involve splitting the navigation request so we replace as much as possible, then push the remaining screens to fulfill the request.
+        if (
+          event === "REPLACE" &&
+          action.type === "NAVIGATE" &&
+          isAbsoluteInitialRoute(action)
+        ) {
+          const earliest = getEarliestMismatchedRoute(
+            // @ts-expect-error
+            rootState,
+            action.payload
+          );
+          if (earliest) {
+            if (earliest.type === "stack") {
+              navigation.dispatch(
+                StackActions.replace(earliest.name, earliest.params)
+              );
+            } else {
+              navigation.dispatch(
+                TabActions.jumpTo(earliest.name, earliest.params)
+              );
+            }
+            return;
+          } else {
+            // This should never happen because moving to the same route would be handled earlier
+            // in the sibling operations.
+          }
+        }
+
         // Ignore the replace event here since replace across
         // navigators is not supported.
         navigation.dispatch(action);
@@ -114,3 +156,33 @@ export function useLinkToPath() {
 
   return linkTo;
 }
+
+/** @returns `true` if the action is moving to the first screen of all the navigators in the action. */
+export function isAbsoluteInitialRoute(
+  action: ReturnType<typeof getActionFromState>
+) {
+  if (action?.type !== "NAVIGATE") {
+    return false;
+  }
+
+  let next = action.payload.params;
+  // iterate all child screens and bail out if any are not initial.
+  while (next) {
+    if (!isNavigationState(next)) {
+      // Not sure when this would happen
+      return false;
+    }
+    if (next.initial === true) {
+      next = next.params;
+      // return true;
+    } else if (next.initial === false) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function isNavigationState(obj: any): obj is NavStateParams {
+  return "initial" in obj;
+}

package/src/aasa.ts

@@ -1,41 +0,0 @@
-import Constants from "expo-constants";
-
-function getWebUrlsFromManifest() {
-  // TODO: Replace this with the source of truth native manifest
-  // Then do a check to warn the user if the config doesn't match the native manifest.
-  // TODO: Warn if the applinks have `https://` in them.
-  const domains = Constants.expoConfig?.ios?.associatedDomains || [];
-  // [applinks:explore-api.netlify.app/] -> [explore-api.netlify.app]
-  const applinks = domains
-    .filter((domain) => domain.startsWith("applinks:"))
-    .map((domain) => {
-      let clean = domain.replace(/^applinks:/, "");
-      clean = clean.endsWith("/") ? clean.slice(0, -1) : clean;
-      return clean.replace(
-        /\?mode=(developer|managed|developer\+managed|managed\+developer)$/,
-        ""
-      );
-    });
-
-  return [...new Set(applinks)];
-}
-
-export function getAllWebRedirects(
-  protocols = ["https", "http"],
-  subdomains = ["*"]
-) {
-  const urls = getWebUrlsFromManifest();
-  const _subdomains = [""].concat(subdomains);
-  return urls
-    .map((url) =>
-      protocols
-        .map((protocol) =>
-          _subdomains.map(
-            (subdomain) =>
-              `${protocol}://${[subdomain, url].filter(Boolean).join(".")}/`
-          )
-        )
-        .flat()
-    )
-    .flat();
-}