expo-router 1.7.2 → 1.7.3

package/build/ExpoRoot.d.ts

@@ -1,8 +1,4 @@
 /// <reference types="react" />
-import { RequireContext } from "./types";
-export type ExpoRootProps = {
-    context: RequireContext;
-    location?: URL;
-};
+import { ExpoRootProps } from "./useCreateExpoRouterContext";
 export declare function ExpoRoot({ context, location }: ExpoRootProps): JSX.Element;
 //# sourceMappingURL=ExpoRoot.d.ts.map

package/build/ExpoRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpoRoot.d.ts","sourceRoot":"","sources":["../src/ExpoRoot.tsx"],"names":[],"mappings":";AAqBA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAwBzC,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,cAAc,CAAC;IACxB,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,aAAa,eAa5D"}
+{"version":3,"file":"ExpoRoot.d.ts","sourceRoot":"","sources":["../src/ExpoRoot.tsx"],"names":[],"mappings":";AAaA,OAAO,EACL,aAAa,EAEd,MAAM,8BAA8B,CAAC;AA8BtC,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,aAAa,eAa5D"}

package/build/fork/findFocusedRoute.d.ts

@@ -16,7 +16,7 @@ export declare function findFocusedRoute(state: InitialState): (Omit<import("@re
         })[];
         type: string;
         stale: false;
-    }>, "stale" | "routes">> & {
+    }>, "routes" | "stale">> & {
         routes: (Omit<import("@react-navigation/routers").Route<string, object | undefined>, "key"> & any)[];
     }> | undefined;
 }) | undefined;

package/build/fork/useLinking.native.d.ts

@@ -19,7 +19,7 @@ export default function useLinking(ref: React.RefObject<NavigationContainerRef<P
         })[];
         type: string;
         stale: false;
-    }>, "stale" | "routes">> & Readonly<{
+    }>, "routes" | "stale">> & Readonly<{
         stale?: true | undefined;
         routes: import("@react-navigation/core").PartialRoute<import("@react-navigation/core").Route<string, object | undefined>>[];
     }> & {
@@ -39,7 +39,7 @@ export default function useLinking(ref: React.RefObject<NavigationContainerRef<P
             })[];
             type: string;
             stale: false;
-        }>, "stale" | "routes">> & Readonly<{
+        }>, "routes" | "stale">> & Readonly<{
             stale?: true | undefined;
             routes: import("@react-navigation/core").PartialRoute<import("@react-navigation/core").Route<string, object | undefined>>[];
         }> & any) | undefined;

package/build/layouts/Drawer.d.ts

@@ -27,7 +27,7 @@ export declare const Drawer: import("react").ForwardRefExoticComponent<Omit<Omit
     backBehavior?: import("@react-navigation/routers/lib/typescript/src/TabRouter").BackBehavior | undefined;
 } & {
     defaultStatus?: import("@react-navigation/routers").DrawerStatus | undefined;
-} & import("@react-navigation/drawer/lib/typescript/src/types").DrawerNavigationConfig, "initialRouteName" | "children" | "id" | "screenListeners" | "screenOptions"> & import("@react-navigation/routers").DefaultRouterOptions<string> & {
+} & import("@react-navigation/drawer/lib/typescript/src/types").DrawerNavigationConfig, "children" | "id" | "initialRouteName" | "screenListeners" | "screenOptions"> & import("@react-navigation/routers").DefaultRouterOptions<string> & {
     id?: string | undefined;
     children: import("react").ReactNode;
     screenListeners?: Partial<{
@@ -77,7 +77,7 @@ export declare const Drawer: import("react").ForwardRefExoticComponent<Omit<Omit
     backBehavior?: import("@react-navigation/routers/lib/typescript/src/TabRouter").BackBehavior | undefined;
 } & {
     defaultStatus?: import("@react-navigation/routers").DrawerStatus | undefined;
-} & import("@react-navigation/drawer/lib/typescript/src/types").DrawerNavigationConfig, "initialRouteName" | "children" | "id" | "screenListeners" | "screenOptions"> & import("@react-navigation/routers").DefaultRouterOptions<string> & {
+} & import("@react-navigation/drawer/lib/typescript/src/types").DrawerNavigationConfig, "children" | "id" | "initialRouteName" | "screenListeners" | "screenOptions"> & import("@react-navigation/routers").DefaultRouterOptions<string> & {
     id?: string | undefined;
     children: import("react").ReactNode;
     screenListeners?: Partial<{

package/build/layouts/Stack.d.ts

@@ -25,7 +25,7 @@ export declare const Stack: import("react").ForwardRefExoticComponent<Omit<Omit<
         route: import("@react-navigation/core").RouteProp<import("@react-navigation/routers").ParamListBase, string>;
         navigation: any;
     }) => NativeStackNavigationOptions) | undefined;
-} & import("@react-navigation/routers").StackRouterOptions, "initialRouteName" | "children" | "id" | "screenListeners" | "screenOptions"> & import("@react-navigation/routers").DefaultRouterOptions<string> & {
+} & import("@react-navigation/routers").StackRouterOptions, "children" | "id" | "initialRouteName" | "screenListeners" | "screenOptions"> & import("@react-navigation/routers").DefaultRouterOptions<string> & {
     id?: string | undefined;
     children: import("react").ReactNode;
     screenListeners?: Partial<{
@@ -75,7 +75,7 @@ export declare const Stack: import("react").ForwardRefExoticComponent<Omit<Omit<
         route: import("@react-navigation/core").RouteProp<import("@react-navigation/routers").ParamListBase, string>;
         navigation: any;
     }) => NativeStackNavigationOptions) | undefined;
-} & import("@react-navigation/routers").StackRouterOptions, "initialRouteName" | "children" | "id" | "screenListeners" | "screenOptions"> & import("@react-navigation/routers").DefaultRouterOptions<string> & {
+} & import("@react-navigation/routers").StackRouterOptions, "children" | "id" | "initialRouteName" | "screenListeners" | "screenOptions"> & import("@react-navigation/routers").DefaultRouterOptions<string> & {
     id?: string | undefined;
     children: import("react").ReactNode;
     screenListeners?: Partial<{

package/build/layouts/Tabs.d.ts

@@ -28,7 +28,7 @@ export declare const Tabs: React.ForwardRefExoticComponent<Omit<Omit<import("@re
     }) => BottomTabNavigationOptions) | undefined;
 } & import("@react-navigation/routers").DefaultRouterOptions & {
     backBehavior?: import("@react-navigation/routers/lib/typescript/src/TabRouter").BackBehavior | undefined;
-} & import("@react-navigation/bottom-tabs/lib/typescript/src/types").BottomTabNavigationConfig, "initialRouteName" | "children" | "id" | "screenListeners" | "screenOptions"> & import("@react-navigation/routers").DefaultRouterOptions<string> & {
+} & import("@react-navigation/bottom-tabs/lib/typescript/src/types").BottomTabNavigationConfig, "children" | "id" | "initialRouteName" | "screenListeners" | "screenOptions"> & import("@react-navigation/routers").DefaultRouterOptions<string> & {
     id?: string | undefined;
     children: React.ReactNode;
     screenListeners?: Partial<{
@@ -80,7 +80,7 @@ export declare const Tabs: React.ForwardRefExoticComponent<Omit<Omit<import("@re
     }) => BottomTabNavigationOptions) | undefined;
 } & import("@react-navigation/routers").DefaultRouterOptions & {
     backBehavior?: import("@react-navigation/routers/lib/typescript/src/TabRouter").BackBehavior | undefined;
-} & import("@react-navigation/bottom-tabs/lib/typescript/src/types").BottomTabNavigationConfig, "initialRouteName" | "children" | "id" | "screenListeners" | "screenOptions"> & import("@react-navigation/routers").DefaultRouterOptions<string> & {
+} & import("@react-navigation/bottom-tabs/lib/typescript/src/types").BottomTabNavigationConfig, "children" | "id" | "initialRouteName" | "screenListeners" | "screenOptions"> & import("@react-navigation/routers").DefaultRouterOptions<string> & {
     id?: string | undefined;
     children: React.ReactNode;
     screenListeners?: Partial<{

package/build/link/stateOperations.d.ts

@@ -30,7 +30,7 @@ export declare function findTopRouteForTarget(state: ResultState): Omit<import("
         })[];
         type: string;
         stale: false;
-    }>, "stale" | "routes">> & {
+    }>, "routes" | "stale">> & {
         routes: (Omit<import("@react-navigation/native").Route<string, object | undefined>, "key"> & any)[];
     }> | undefined;
 };
@@ -52,7 +52,7 @@ export declare function getQualifiedStateForTopOfTargetState(rootState: InitialS
     })[];
     type: string;
     stale: false;
-}>, "stale" | "routes">> & {
+}>, "routes" | "stale">> & {
     routes: (Omit<import("@react-navigation/native").Route<string, object | undefined>, "key"> & {
         state?: Readonly<Partial<Omit<Readonly<{
             key: string;
@@ -70,7 +70,7 @@ export declare function getQualifiedStateForTopOfTargetState(rootState: InitialS
             })[];
             type: string;
             stale: false;
-        }>, "stale" | "routes">> & any> | undefined;
+        }>, "routes" | "stale">> & any> | undefined;
     })[];
 }>;
 export declare function getEarliestMismatchedRoute<T extends ParamListBase>(rootState: NavigationState<T> | undefined, actionParams: NavigateActionParams): {

package/build/testing-library/context-stubs.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import requireContext from "./require-context-ponyfill";
+export type ReactComponent = () => React.ReactElement<any, any> | null;
+export type FileStub = {
+    default: ReactComponent;
+} | ReactComponent;
+export { requireContext };
+export declare function inMemoryContext(context: Record<string, FileStub>): ((id: string) => ReactComponent | {
+    default: FileStub;
+}) & {
+    keys: () => string[];
+    resolve: (key: string) => string;
+    id: string;
+};
+export declare function requireContextWithOverrides(dir: string, overrides: Record<string, FileStub>): ((id: string) => any) & {
+    keys: () => string[];
+    resolve: (key: string) => string;
+    id: string;
+};
+//# sourceMappingURL=context-stubs.d.ts.map

package/build/testing-library/context-stubs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-stubs.d.ts","sourceRoot":"","sources":["../../src/testing-library/context-stubs.ts"],"names":[],"mappings":";AAEA,OAAO,cAAc,MAAM,4BAA4B,CAAC;AAExD,MAAM,MAAM,cAAc,GAAG,MAAM,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;AACvE,MAAM,MAAM,QAAQ,GAAG;IAAE,OAAO,EAAE,cAAc,CAAA;CAAE,GAAG,cAAc,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,SAE/C,MAAM;;;;mBAQH,MAAM;;EAI1B;AAED,wBAAgB,2BAA2B,CACzC,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,SAKnB,MAAM;;mBAUH,MAAM;;EAI1B"}

package/build/testing-library/index.d.ts

@@ -1,22 +1,18 @@
 import "./expect";
 import { render } from "@testing-library/react-native";
-import React from "react";
+import { FileStub } from "./context-stubs";
 export * from "@testing-library/react-native";
 type RenderRouterOptions = Parameters<typeof render>[1] & {
     initialUrl?: string;
 };
-type RouteOverrideFunction = () => React.ReactElement<any, any> | null;
-type RouteOverride = {
-    default: RouteOverrideFunction;
-} | RouteOverrideFunction;
 type Result = ReturnType<typeof render> & {
     getPathname(): string;
     getSearchParams(): URLSearchParams;
 };
 export declare function renderRouter(context?: string, options?: RenderRouterOptions): Result;
-export declare function renderRouter(context: Record<string, RouteOverride>, options?: RenderRouterOptions): Result;
+export declare function renderRouter(context: Record<string, FileStub>, options?: RenderRouterOptions): Result;
 export declare function renderRouter(context: {
     appDir: string;
-    overrides: Record<string, RouteOverride>;
+    overrides: Record<string, FileStub>;
 }, options?: RenderRouterOptions): Result;
 //# sourceMappingURL=index.d.ts.map

package/build/testing-library/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/testing-library/index.tsx"],"names":[],"mappings":"AACA,OAAO,UAAU,CAAC;AAGlB,OAAO,EAAE,MAAM,EAAgB,MAAM,+BAA+B,CAAC;AAGrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,cAAc,+BAA+B,CAAC;AAE9C,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG;IACxD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,qBAAqB,GAAG,MAAM,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;AAEvE,KAAK,aAAa,GAAG;IAAE,OAAO,EAAE,qBAAqB,CAAA;CAAE,GAAG,qBAAqB,CAAC;AAEhF,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,GAAG;IACxC,WAAW,IAAI,MAAM,CAAC;IACtB,eAAe,IAAI,eAAe,CAAC;CACpC,CAAC;AAQF,wBAAgB,YAAY,CAC1B,OAAO,CAAC,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,MAAM,CAAC;AACV,wBAAgB,YAAY,CAC1B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,EACtC,OAAO,CAAC,EAAE,mBAAmB,GAC5B,MAAM,CAAC;AACV,wBAAgB,YAAY,CAC1B,OAAO,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;CAAE,EACrE,OAAO,CAAC,EAAE,mBAAmB,GAC5B,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/testing-library/index.tsx"],"names":[],"mappings":"AACA,OAAO,UAAU,CAAC;AAGlB,OAAO,EAAE,MAAM,EAAgB,MAAM,+BAA+B,CAAC;AAQrE,OAAO,EACL,QAAQ,EAIT,MAAM,iBAAiB,CAAC;AAIzB,cAAc,+BAA+B,CAAC;AAE9C,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG;IACxD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,GAAG;IACxC,WAAW,IAAI,MAAM,CAAC;IACtB,eAAe,IAAI,eAAe,CAAC;CACpC,CAAC;AAQF,wBAAgB,YAAY,CAC1B,OAAO,CAAC,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,MAAM,CAAC;AACV,wBAAgB,YAAY,CAC1B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,EACjC,OAAO,CAAC,EAAE,mBAAmB,GAC5B,MAAM,CAAC;AACV,wBAAgB,YAAY,CAC1B,OAAO,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;CAAE,EAChE,OAAO,CAAC,EAAE,mBAAmB,GAC5B,MAAM,CAAC"}

package/build/useCreateExpoRouterContext.d.ts

@@ -0,0 +1,23 @@
+import { ResultState } from "./fork/getStateFromPath";
+import { ExpoRouterContextType, OnboardingExpoRouterContextType } from "./hooks";
+import { RequireContext } from "./types";
+export type ExpoRootProps = {
+    context: RequireContext;
+    location?: URL;
+};
+/** @private */
+export declare function createExpoRouterContext({ context, location, }: ExpoRootProps): {
+    routeNode: null;
+    linking: {
+        prefixes: never[];
+    };
+    initialState: undefined;
+    getRouteInfo(): never;
+} | {
+    routeNode: import("./Route").RouteNode;
+    linking: import("./getLinkingConfig").ExpoLinkingOptions;
+    initialState: ResultState | undefined;
+    getRouteInfo: (state: ResultState) => import("./LocationProvider").UrlObject;
+};
+export declare function useCreateExpoRouterContext(props: ExpoRootProps): Omit<ExpoRouterContextType, "navigationRef"> | Omit<OnboardingExpoRouterContextType, "navigationRef">;
+//# sourceMappingURL=useCreateExpoRouterContext.d.ts.map

package/build/useCreateExpoRouterContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCreateExpoRouterContext.d.ts","sourceRoot":"","sources":["../src/useCreateExpoRouterContext.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtD,OAAO,EACL,qBAAqB,EACrB,+BAA+B,EAChC,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzC,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,cAAc,CAAC;IACxB,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB,CAAC;AAOF,eAAe;AACf,wBAAgB,uBAAuB,CAAC,EACtC,OAAO,EACP,QAAqB,GACtB,EAAE,aAAa;;;;;;;;;;;0BAyBe,WAAW;EAsBzC;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,aAAa,yGAO9D"}

package/build/views/ErrorBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/views/ErrorBoundary.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAE3C,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,kBAAkB,eAkEjE"}
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/views/ErrorBoundary.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAmC3C,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,kBAAkB,eA2DjE"}

package/entry.js

@@ -1,6 +1,8 @@
+// `@expo/metro-runtime` MUST be the first import to ensure Fast Refresh works
+// on web.
+import "@expo/metro-runtime";
 import { ExpoRoot } from "expo-router";
 import Head from "expo-router/head";
-import "@expo/metro-runtime";
 import { renderRootComponent } from "expo-router/src/renderRootComponent";
 
 const ctx = require.context(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-router",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "main": "src/index.tsx",
   "types": "build/index.d.ts",
   "files": [
@@ -102,12 +102,12 @@
   },
   "dependencies": {
     "@bacons/react-views": "^1.1.3",
-    "@expo/metro-runtime": "2.1.1",
+    "@expo/metro-runtime": "2.1.2",
     "@radix-ui/react-slot": "^1.0.0",
     "@react-navigation/bottom-tabs": "~6.5.7",
     "@react-navigation/native": "~6.1.6",
     "@react-navigation/native-stack": "~6.9.12",
-    "expo-head": "0.0.3",
+    "expo-head": "0.0.4",
     "expo-splash-screen": "*",
     "query-string": "7.1.3",
     "react-helmet-async": "^1.3.0",

package/src/ExpoRoot.tsx

@@ -4,22 +4,17 @@ import React from "react";
 import { Platform } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 
-import { getRouteInfoFromState } from "./LocationProvider";
 import UpstreamNavigationContainer from "./fork/NavigationContainer";
-import getPathFromState, {
-  getPathDataFromState,
-} from "./fork/getPathFromState";
 import { ResultState } from "./fork/getStateFromPath";
-import { getLinkingConfig } from "./getLinkingConfig";
-import { getRoutes } from "./getRoutes";
 import {
-  ExpoRouterContextType,
   ExpoRouterContext,
   RootStateContext,
   RootStateContextType,
-  OnboardingExpoRouterContextType,
 } from "./hooks";
-import { RequireContext } from "./types";
+import {
+  ExpoRootProps,
+  useCreateExpoRouterContext,
+} from "./useCreateExpoRouterContext";
 import { getQualifiedRouteComponent } from "./useScreens";
 import { SplashScreen } from "./views/Splash";
 
@@ -28,9 +23,15 @@ function getGestureHandlerRootView() {
     const { GestureHandlerRootView } =
       require("react-native-gesture-handler") as typeof import("react-native-gesture-handler");
 
-    return function GestureHandler(props: any) {
+    // eslint-disable-next-line no-inner-declarations
+    function GestureHandler(props: any) {
       return <GestureHandlerRootView style={{ flex: 1 }} {...props} />;
-    };
+    }
+    if (process.env.NODE_ENV === "development") {
+      // @ts-expect-error
+      GestureHandler.displayName = "GestureHandlerRootView";
+    }
+    return GestureHandler;
   } catch {
     return React.Fragment;
   }
@@ -43,11 +44,6 @@ const INITIAL_METRICS = {
   insets: { top: 0, left: 0, right: 0, bottom: 0 },
 };
 
-export type ExpoRootProps = {
-  context: RequireContext;
-  location?: URL;
-};
-
 export function ExpoRoot({ context, location }: ExpoRootProps) {
   return (
     <GestureHandlerRootView>
@@ -63,57 +59,13 @@ export function ExpoRoot({ context, location }: ExpoRootProps) {
   );
 }
 
-const initialUrl =
-  Platform.OS === "web" && typeof window !== "undefined"
-    ? new URL(window.location.href)
-    : undefined;
-
-function ContextNavigator({
-  context,
-  location: initialLocation = initialUrl,
-}: ExpoRootProps) {
+function ContextNavigator(props: ExpoRootProps) {
   const navigationRef = useNavigationContainerRef();
   const [shouldShowSplash, setShowSplash] = React.useState(
     Platform.OS !== "web"
   );
 
-  const expoContext = React.useMemo<
-    ExpoRouterContextType | OnboardingExpoRouterContextType
-  >(() => {
-    const routeNode = getRoutes(context);
-    const linking = getLinkingConfig(routeNode!);
-    let initialState: ResultState | undefined;
-
-    if (initialLocation) {
-      initialState = linking.getStateFromPath?.(
-        initialLocation.pathname + initialLocation.search,
-        linking.config
-      );
-    }
-
-    function getRouteInfo(state: ResultState) {
-      return getRouteInfoFromState(
-        (state: Parameters<typeof getPathFromState>[0], asPath: boolean) => {
-          return getPathDataFromState(state, {
-            screens: [],
-            ...linking.config,
-            preserveDynamicRoutes: asPath,
-            preserveGroups: asPath,
-          });
-        },
-        state
-      );
-    }
-
-    // This looks redundant but it makes TypeScript correctly infer the union return type.
-    return {
-      routeNode,
-      linking,
-      navigationRef,
-      initialState,
-      getRouteInfo,
-    };
-  }, [context, navigationRef, initialLocation]);
+  const expoContext = useCreateExpoRouterContext(props);
 
   const { routeNode, initialState, linking, getRouteInfo } = expoContext;
 
@@ -147,6 +99,15 @@ function ContextNavigator({
     return () => subscription?.();
   }, [navigationRef, getRouteInfo]);
 
+  const Component = routeNode ? getQualifiedRouteComponent(routeNode) : null;
+
+  const comp = React.useMemo(() => {
+    if (!Component) {
+      return null;
+    }
+    return <Component />;
+  }, [Component, shouldShowSplash]);
+
   if (!routeNode) {
     if (process.env.NODE_ENV === "development") {
       const Tutorial = require("./onboard/Tutorial").Tutorial;
@@ -157,12 +118,10 @@ function ContextNavigator({
     }
   }
 
-  const Component = getQualifiedRouteComponent(routeNode);
-
   return (
     <>
       {shouldShowSplash && <SplashScreen />}
-      <ExpoRouterContext.Provider value={expoContext}>
+      <ExpoRouterContext.Provider value={{ ...expoContext, navigationRef }}>
         <UpstreamNavigationContainer
           ref={navigationRef}
           initialState={initialState}
@@ -170,7 +129,7 @@ function ContextNavigator({
           onReady={() => requestAnimationFrame(() => setShowSplash(false))}
         >
           <RootStateContext.Provider value={rootState}>
-            {!shouldShowSplash && <Component />}
+            {!shouldShowSplash && comp}
           </RootStateContext.Provider>
         </UpstreamNavigationContainer>
       </ExpoRouterContext.Provider>

package/src/link/href.ts

@@ -55,6 +55,6 @@ function encodeParam(param: any): string {
 
 function createQueryParams(params: Record<string, any>): string {
   return Object.entries(params)
-    .map((props) => props.join("="))
+    .map(([key, value]) => `${key}=${encodeURIComponent(value.toString())}`)
     .join("&");
 }

package/src/testing-library/context-stubs.ts

@@ -0,0 +1,47 @@
+import path from "path";
+
+import requireContext from "./require-context-ponyfill";
+
+export type ReactComponent = () => React.ReactElement<any, any> | null;
+export type FileStub = { default: ReactComponent } | ReactComponent;
+
+export { requireContext };
+
+export function inMemoryContext(context: Record<string, FileStub>) {
+  return Object.assign(
+    function (id: string) {
+      id = id.replace(/^\.\//, "").replace(/\.js$/, "");
+      return typeof context[id] === "function"
+        ? { default: context[id] }
+        : context[id];
+    },
+    {
+      keys: () => Object.keys(context).map((key) => "./" + key + ".js"),
+      resolve: (key: string) => key,
+      id: "0",
+    }
+  );
+}
+
+export function requireContextWithOverrides(
+  dir: string,
+  overrides: Record<string, FileStub>
+) {
+  const existingContext = requireContext(path.resolve(process.cwd(), dir));
+
+  return Object.assign(
+    function (id: string) {
+      if (id in overrides) {
+        const route = overrides[id];
+        return typeof route === "function" ? { default: route } : route;
+      } else {
+        return existingContext(id);
+      }
+    },
+    {
+      keys: () => [...Object.keys(overrides), ...existingContext.keys()],
+      resolve: (key: string) => key,
+      id: "0",
+    }
+  );
+}

package/src/testing-library/index.tsx

@@ -10,8 +10,13 @@ import React from "react";
 import { ExpoRoot } from "../ExpoRoot";
 import { stateCache } from "../getLinkingConfig";
 import { RequireContext } from "../types";
+import {
+  FileStub,
+  inMemoryContext,
+  requireContext,
+  requireContextWithOverrides,
+} from "./context-stubs";
 import { initialUrlRef } from "./mocks";
-import requireContext from "./require-context-ponyfill";
 
 // re-export everything
 export * from "@testing-library/react-native";
@@ -20,10 +25,6 @@ type RenderRouterOptions = Parameters<typeof render>[1] & {
   initialUrl?: string;
 };
 
-type RouteOverrideFunction = () => React.ReactElement<any, any> | null;
-
-type RouteOverride = { default: RouteOverrideFunction } | RouteOverrideFunction;
-
 type Result = ReturnType<typeof render> & {
   getPathname(): string;
   getSearchParams(): URLSearchParams;
@@ -31,7 +32,7 @@ type Result = ReturnType<typeof render> & {
 
 function isOverrideContext(
   context: object
-): context is { appDir: string; overrides: Record<string, RouteOverride> } {
+): context is { appDir: string; overrides: Record<string, FileStub> } {
   return Boolean(typeof context === "object" && "appDir" in context);
 }
 
@@ -40,18 +41,18 @@ export function renderRouter(
   options?: RenderRouterOptions
 ): Result;
 export function renderRouter(
-  context: Record<string, RouteOverride>,
+  context: Record<string, FileStub>,
   options?: RenderRouterOptions
 ): Result;
 export function renderRouter(
-  context: { appDir: string; overrides: Record<string, RouteOverride> },
+  context: { appDir: string; overrides: Record<string, FileStub> },
   options?: RenderRouterOptions
 ): Result;
 export function renderRouter(
   context:
     | string
-    | { appDir: string; overrides: Record<string, RouteOverride> }
-    | Record<string, RouteOverride> = "./app",
+    | { appDir: string; overrides: Record<string, FileStub> }
+    | Record<string, FileStub> = "./app",
   { initialUrl = "/", ...options }: RenderRouterOptions = {}
 ): Result {
   jest.useFakeTimers();
@@ -67,42 +68,9 @@ export function renderRouter(
   if (typeof context === "string") {
     ctx = requireContext(path.resolve(process.cwd(), context));
   } else if (isOverrideContext(context)) {
-    const existingContext = requireContext(
-      path.resolve(process.cwd(), context.appDir)
-    );
-
-    ctx = Object.assign(
-      function (id: string) {
-        if (id in context.overrides) {
-          const route = context.overrides[id];
-          return typeof route === "function" ? { default: route } : route;
-        } else {
-          return existingContext(id);
-        }
-      },
-      {
-        keys: () => [
-          ...Object.keys(context.overrides),
-          ...existingContext.keys(),
-        ],
-        resolve: (key: string) => key,
-        id: "0",
-      }
-    );
+    ctx = requireContextWithOverrides(context.appDir, context.overrides);
   } else {
-    ctx = Object.assign(
-      function (id: string) {
-        id = id.replace(/^\.\//, "").replace(/\.js$/, "");
-        return typeof context[id] === "function"
-          ? { default: context[id] }
-          : context[id];
-      },
-      {
-        keys: () => Object.keys(context).map((key) => "./" + key + ".js"),
-        resolve: (key: string) => key,
-        id: "0",
-      }
-    );
+    ctx = inMemoryContext(context);
   }
 
   stateCache.clear();

package/src/useCreateExpoRouterContext.ts

@@ -0,0 +1,88 @@
+import React from "react";
+import { Platform } from "react-native";
+
+import { getRouteInfoFromState } from "./LocationProvider";
+import getPathFromState, {
+  getPathDataFromState,
+} from "./fork/getPathFromState";
+import { ResultState } from "./fork/getStateFromPath";
+import { getLinkingConfig } from "./getLinkingConfig";
+import { getRoutes } from "./getRoutes";
+import {
+  ExpoRouterContextType,
+  OnboardingExpoRouterContextType,
+} from "./hooks";
+import { RequireContext } from "./types";
+// import URL from "url-parse";
+
+export type ExpoRootProps = {
+  context: RequireContext;
+  location?: URL;
+};
+
+const initialUrl =
+  Platform.OS === "web" && typeof window !== "undefined"
+    ? new URL(window.location.href)
+    : undefined;
+
+/** @private */
+export function createExpoRouterContext({
+  context,
+  location = initialUrl,
+}: ExpoRootProps) {
+  const routeNode = getRoutes(context);
+
+  // No app dir exists
+  if (!routeNode) {
+    return {
+      routeNode,
+      linking: { prefixes: [] },
+      initialState: undefined,
+      getRouteInfo() {
+        throw new Error("invalid");
+      },
+    };
+  }
+
+  const linking = getLinkingConfig(routeNode);
+  let initialState: ResultState | undefined;
+
+  if (location) {
+    initialState = linking.getStateFromPath?.(
+      location.pathname + location.search,
+      linking.config
+    );
+  }
+
+  function getRouteInfo(state: ResultState) {
+    return getRouteInfoFromState(
+      (state: Parameters<typeof getPathFromState>[0], asPath: boolean) => {
+        return getPathDataFromState(state, {
+          screens: [],
+          ...linking.config,
+          preserveDynamicRoutes: asPath,
+          preserveGroups: asPath,
+        });
+      },
+      state
+    );
+  }
+
+  // This looks redundant but it makes TypeScript correctly infer the union return type.
+  return {
+    routeNode,
+    linking,
+
+    initialState,
+    getRouteInfo,
+  };
+}
+
+export function useCreateExpoRouterContext(props: ExpoRootProps) {
+  return React.useMemo<
+    | Omit<ExpoRouterContextType, "navigationRef">
+    | Omit<OnboardingExpoRouterContextType, "navigationRef">
+  >(() => {
+    return createExpoRouterContext(props);
+  }, [props.context, props.location]);
+}

package/src/views/ErrorBoundary.tsx

@@ -1,16 +1,57 @@
 import { Pressable, StyleSheet, Text, View } from "@bacons/react-views";
+import { LogContext } from "@expo/metro-runtime/build/error-overlay/Data/LogContext";
+import { LogBoxInspectorStackFrames } from "@expo/metro-runtime/build/error-overlay/overlay/LogBoxInspectorStackFrames";
+import { LogBoxLog, parseErrorStack } from "@expo/metro-runtime/symbolicate";
+import { BottomTabBarHeightContext } from "@react-navigation/bottom-tabs";
 import React from "react";
-import { Platform, ScrollView, TouchableOpacity } from "react-native";
+import { Platform, ScrollView } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 import { Link } from "../link/Link";
 import { ErrorBoundaryProps } from "./Try";
 
+function useMetroSymbolication(error: Error) {
+  const [logBoxLog, setLogBoxLog] = React.useState<LogBoxLog | null>(null);
+
+  React.useEffect(() => {
+    let isMounted = true;
+    const stack = parseErrorStack(error.stack);
+
+    const log = new LogBoxLog({
+      level: "error",
+      message: {
+        content: error.message,
+        substitutions: [],
+      },
+      isComponentError: false,
+      stack,
+      category: error.message,
+      componentStack: [],
+    });
+
+    log.symbolicate("stack", (symbolicatedLog) => {
+      if (isMounted) {
+        setLogBoxLog(log);
+      }
+    });
+
+    return () => {
+      isMounted = false;
+    };
+  }, [error]);
+
+  return logBoxLog;
+}
+
 export function ErrorBoundary({ error, retry }: ErrorBoundaryProps) {
+  const logBoxLog = useMetroSymbolication(error);
+  const inTabBar = React.useContext(BottomTabBarHeightContext);
+  const Wrapper = inTabBar ? View : SafeAreaView;
+
   return (
-    <View style={[styles.container]}>
-      <SafeAreaView
-        style={{ flex: 1, maxWidth: 720, marginHorizontal: "auto" }}
+    <View style={styles.container}>
+      <Wrapper
+        style={{ flex: 1, gap: 8, maxWidth: 720, marginHorizontal: "auto" }}
       >
         <View
           style={{
@@ -28,63 +69,56 @@ export function ErrorBoundary({ error, retry }: ErrorBoundaryProps) {
           >
             Something went wrong
           </Text>
-          <View style={{ flexDirection: "row", alignItems: "center" }}>
-            <Pressable>
-              {({ hovered }) => (
-                <TouchableOpacity onPress={retry}>
-                  <View
-                    style={[
-                      {
-                        transitionDuration: "100ms",
-                        paddingVertical: 12,
-                        paddingHorizontal: 24,
-                        borderColor: "white",
-                        borderWidth: 2,
-                        marginLeft: 8,
-                      },
-                      hovered && { backgroundColor: "white" },
-                    ]}
-                  >
-                    <Text
-                      style={[
-                        styles.buttonText,
-                        {
-                          transitionDuration: "100ms",
-                          color: hovered ? "black" : "white",
-                        },
-                      ]}
-                    >
-                      Retry
-                    </Text>
-                  </View>
-                </TouchableOpacity>
-              )}
-            </Pressable>
-          </View>
         </View>
 
-        <StackTrace error={error} />
+        <StackTrace logData={logBoxLog} />
         {process.env.NODE_ENV === "development" && (
           <Link href="/_sitemap" style={styles.link}>
             Sitemap
           </Link>
         )}
-      </SafeAreaView>
+        <Pressable onPress={retry}>
+          {({ hovered, pressed }) => (
+            <View
+              style={[
+                styles.buttonInner,
+                (hovered || pressed) && { backgroundColor: "white" },
+              ]}
+            >
+              <Text
+                style={[
+                  styles.buttonText,
+                  {
+                    transitionDuration: "100ms",
+                    color: hovered || pressed ? "black" : "white",
+                  },
+                ]}
+              >
+                Retry
+              </Text>
+            </View>
+          )}
+        </Pressable>
+      </Wrapper>
     </View>
   );
 }
 
-function StackTrace({ error }: { error: Error }) {
+function StackTrace({ logData }: { logData: LogBoxLog | null }) {
+  if (!logData?.symbolicated?.stack?.stack) {
+    return null;
+  }
   return (
-    <ScrollView
-      style={{
-        marginVertical: 8,
-        borderColor: "rgba(255,255,255,0.5)",
-        borderWidth: 1,
-        padding: 12,
-      }}
-    >
-      <Text style={[styles.code, { color: "white" }]}>{error.stack}</Text>
+    <ScrollView style={{ flex: 1 }}>
+      <LogContext.Provider
+        value={{
+          isDisabled: false,
+          logs: [logData],
+          selectedLogIndex: 0,
+        }}
+      >
+        <LogBoxInspectorStackFrames onRetry={function () {}} type="stack" />
+      </LogContext.Provider>
     </ScrollView>
   );
 }
@@ -99,9 +133,7 @@ const styles = StyleSheet.create({
   },
   title: {
     color: "white",
-    fontSize: 36,
-
-    // textAlign: "center",
+    fontSize: Platform.select({ web: 32, default: 24 }),
     fontWeight: "bold",
   },
   buttonText: {
@@ -109,6 +141,16 @@ const styles = StyleSheet.create({
     fontWeight: "bold",
     color: "black",
   },
+  buttonInner: {
+    transitionDuration: "100ms",
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderColor: "white",
+    borderWidth: 2,
+    marginLeft: 8,
+    justifyContent: "center",
+    alignItems: "center",
+  },
   code: {
     fontFamily: Platform.select({
       default: "Courier",

package/build/link/useHref.d.ts

@@ -1,10 +0,0 @@
-import { HrefObject } from "./href";
-/** @deprecated */
-type RouteInfo = Omit<Required<HrefObject>, "query"> & {
-    /** Normalized path representing the selected route `/[id]?id=normal` -> `/normal` */
-    href: string;
-};
-/** @deprecated */
-export declare function useHref(): RouteInfo;
-export {};
-//# sourceMappingURL=useHref.d.ts.map

package/build/link/useHref.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useHref.d.ts","sourceRoot":"","sources":["../../src/link/useHref.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,kBAAkB;AAClB,KAAK,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,GAAG;IACrD,qFAAqF;IACrF,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,kBAAkB;AAClB,wBAAgB,OAAO,IAAI,SAAS,CAUnC"}

package/src/link/useHref.ts

@@ -1,21 +0,0 @@
-import { usePathname, useSearchParams, useSegments } from "../hooks";
-import { HrefObject } from "./href";
-
-/** @deprecated */
-type RouteInfo = Omit<Required<HrefObject>, "query"> & {
-  /** Normalized path representing the selected route `/[id]?id=normal` -> `/normal` */
-  href: string;
-};
-
-/** @deprecated */
-export function useHref(): RouteInfo {
-  console.warn(
-    "useHref is deprecated in favor of usePathname, useSearchParams, and useSegments"
-  );
-
-  return {
-    href: usePathname(),
-    pathname: useSegments().join("/"),
-    params: useSearchParams(),
-  };
-}