expo-router 2.0.5 → 2.0.7

package/build/global-state/routing.d.ts

@@ -1,6 +1,4 @@
-import { getActionFromState } from "@react-navigation/core";
 import { Href } from "../link/href";
-import { NavigateAction } from "../link/stateOperations";
 import type { RouterStore } from "./router-store";
 export declare function push(this: RouterStore, url: Href): void;
 export declare function replace(this: RouterStore, url: Href): void;
@@ -8,6 +6,4 @@ export declare function goBack(this: RouterStore): void;
 export declare function canGoBack(this: RouterStore): boolean;
 export declare function setParams(this: RouterStore, params?: Record<string, string | number>): any;
 export declare function linkTo(this: RouterStore, href: string, event?: string): void;
-/** @returns `true` if the action is moving to the first screen of all the navigators in the action. */
-export declare function isAbsoluteInitialRoute(action: ReturnType<typeof getActionFromState>): action is NavigateAction;
 //# sourceMappingURL=routing.d.ts.map

package/build/global-state/routing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"routing.d.ts","sourceRoot":"","sources":["../../src/global-state/routing.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,kBAAkB,EAEnB,MAAM,wBAAwB,CAAC;AAIhC,OAAO,EAAE,IAAI,EAAe,MAAM,cAAc,CAAC;AAEjD,OAAO,EACL,cAAc,EAKf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAUlD,wBAAgB,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,IAAI,QAEhD;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,IAAI,QAEnD;AAED,wBAAgB,MAAM,CAAC,IAAI,EAAE,WAAW,QAGvC;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,CAKpD;AAED,wBAAgB,SAAS,CACvB,IAAI,EAAE,WAAW,EACjB,MAAM,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAM,OAI7C;AAED,wBAAgB,MAAM,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,QA6HrE;AAED,uGAAuG;AACvG,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,GAC5C,MAAM,IAAI,cAAc,CAqB1B"}
+{"version":3,"file":"routing.d.ts","sourceRoot":"","sources":["../../src/global-state/routing.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,IAAI,EAAe,MAAM,cAAc,CAAC;AAGjD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAUlD,wBAAgB,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,IAAI,QAEhD;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,IAAI,QAEnD;AAED,wBAAgB,MAAM,CAAC,IAAI,EAAE,WAAW,QAGvC;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,CAUpD;AAED,wBAAgB,SAAS,CACvB,IAAI,EAAE,WAAW,EACjB,MAAM,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAM,OAI7C;AAED,wBAAgB,MAAM,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,QAsDrE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-router",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "main": "src/index.tsx",
   "types": "build/index.d.ts",
   "files": [
@@ -22,6 +22,7 @@
     "tabs.ts",
     "types",
     "plugin",
+    "testing-library.ts",
     "app.plugin.js",
     "!**/__tests__",
     "_ctx.*",
@@ -104,12 +105,12 @@
   },
   "dependencies": {
     "@bacons/react-views": "^1.1.3",
-    "@expo/metro-runtime": "2.2.7",
+    "@expo/metro-runtime": "2.2.9",
     "@radix-ui/react-slot": "1.0.1",
     "@react-navigation/bottom-tabs": "~6.5.7",
     "@react-navigation/native": "~6.1.6",
     "@react-navigation/native-stack": "~6.9.12",
-    "expo-head": "0.0.11",
+    "expo-head": "0.0.13",
     "expo-splash-screen": "~0.20.2",
     "query-string": "7.1.3",
     "react-helmet-async": "^1.3.0",

package/src/global-state/routing.ts

@@ -1,20 +1,12 @@
 import {
-  CommonActions,
-  getActionFromState,
-  StackActions,
-} from "@react-navigation/core";
-import { TabActions } from "@react-navigation/native";
+  type NavigationAction,
+  type NavigationState,
+} from "@react-navigation/native";
 import * as Linking from "expo-linking";
 
+import { ResultState } from "../fork/getStateFromPath";
 import { Href, resolveHref } from "../link/href";
 import { resolve } from "../link/path";
-import {
-  NavigateAction,
-  findTopRouteForTarget,
-  getEarliestMismatchedRoute,
-  getQualifiedStateForTopOfTargetState,
-  isMovingToSiblingRoute,
-} from "../link/stateOperations";
 import { hasUrlProtocolPrefix } from "../utils/url";
 import type { RouterStore } from "./router-store";
 
@@ -40,6 +32,11 @@ export function goBack(this: RouterStore) {
 }
 
 export function canGoBack(this: RouterStore): boolean {
+  // Return a default value here if the navigation hasn't mounted yet.
+  // This can happen if the user calls `canGoBack` from the Root Layout route
+  // before mounting a navigator. This behavior exists due to React Navigation being dynamically
+  // constructed at runtime. We can get rid of this in the future if we use
+  // the static configuration internally.
   if (!this.navigationRef.isReady()) {
     return false;
   }
@@ -93,128 +90,94 @@ export function linkTo(this: RouterStore, href: string, event?: string) {
 
   const state = this.linking.getStateFromPath!(href, this.linking.config);
 
-  if (!state) {
+  if (!state || state.routes.length === 0) {
     console.error(
       "Could not generate a valid navigation state for the given path: " + href
     );
     return;
   }
 
-  const rootState = navigationRef.getRootState();
-
-  // Ensure simple operations are used when moving between siblings
-  // in the same navigator. This ensures that the state is not reset.
-  // TODO: We may need to apply this at a larger scale in the future.
-  if (isMovingToSiblingRoute(rootState, state)) {
-    // Can perform naive movements
-    const knownOwnerState = getQualifiedStateForTopOfTargetState(
-      rootState,
-      state
-    )!;
-    const nextRoute = findTopRouteForTarget(state);
-    // NOTE(EvanBacon): There's an issue where moving from "a -> b" is considered siblings:
-    // a. index (initialRouteName="index")
-    // b. stack/index
-    // However, the preservation approach doesn't work because it would be moving to a route with the same name.
-    // The next check will see if the current focused route has the same name as the next route, if so, then fallback on
-    // the default React Navigation logic.
-    if (
-      findTopRouteForTarget(
-        // @ts-expect-error: stale types don't matter here
-        rootState
-      )?.name !== nextRoute.name
-    ) {
-      if (event === "REPLACE") {
-        if (knownOwnerState.type === "tab") {
-          navigationRef.dispatch(
-            TabActions.jumpTo(nextRoute.name, nextRoute.params)
-          );
-        } else {
-          navigationRef.dispatch(
-            StackActions.replace(nextRoute.name, nextRoute.params)
-          );
-        }
-      } else {
-        // NOTE: Not sure if we should pop or push here...
-        navigationRef.dispatch(
-          CommonActions.navigate(nextRoute.name, nextRoute.params)
-        );
-      }
-      return;
-    }
+  switch (event) {
+    case "REPLACE":
+      return navigationRef.dispatch(
+        getNavigateReplaceAction(state, navigationRef.getRootState())
+      );
+    default:
+      return navigationRef.dispatch(getNavigatePushAction(state));
   }
+}
 
-  // TODO: Advanced movements across multiple navigators
-
-  const action = getActionFromState(state, this.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" && isAbsoluteInitialRoute(action)) {
-      const earliest = getEarliestMismatchedRoute(rootState, action.payload);
-      if (earliest) {
-        if (earliest.type === "stack") {
-          navigationRef.dispatch(
-            StackActions.replace(earliest.name, earliest.params)
-          );
-        } else {
-          navigationRef.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.
-      }
-    }
+type NavigationParams = Partial<{
+  screen: string;
+  params: NavigationParams;
+}>;
 
-    // Ignore the replace event here since replace across
-    // navigators is not supported.
-    navigationRef.dispatch(action);
-  } else {
-    navigationRef.reset(state);
+function rewriteNavigationStateToParams(
+  state?: { routes: ResultState["routes"] },
+  params: NavigationParams = {}
+) {
+  if (!state) return params;
+  // We Should always have at least one route in the state
+  const lastRoute = state.routes.at(-1)!;
+  params.screen = lastRoute.name;
+  // Weirdly, this always needs to be an object. If it's undefined, it won't work.
+  params.params = lastRoute.params ?? {};
+
+  if (lastRoute.state) {
+    rewriteNavigationStateToParams(lastRoute.state, params.params);
   }
+
+  return params;
 }
 
-/** @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>
-): action is NavigateAction {
-  if (action?.type !== "NAVIGATE") {
-    return false;
-  }
+function getNavigatePushAction(state: ResultState) {
+  const { screen, params } = rewriteNavigationStateToParams(state);
+  return {
+    type: "NAVIGATE",
+    payload: {
+      name: screen,
+      params,
+    },
+  };
+}
 
-  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;
-    }
+function getNavigateReplaceAction(
+  previousState: ResultState,
+  parentState: NavigationState,
+  lastNavigatorSupportingReplace: NavigationState = parentState
+): NavigationAction {
+  // We should always have at least one route in the state
+  const state = previousState.routes.at(-1)!;
+
+  // Only these navigators support replace
+  if (parentState.type === "stack" || parentState.type === "tab") {
+    lastNavigatorSupportingReplace = parentState;
   }
 
-  return true;
-}
-
-type NavStateParams = {
-  params?: NavStateParams;
-  path: string;
-  initial: boolean;
-  screen: string;
-  state: unknown;
-};
+  const currentRoute = parentState.routes.find(
+    (route) => route.name === state.name
+  );
+  const routesAreEqual = parentState.routes[parentState.index] === currentRoute;
+
+  // If there is nested state and the routes are equal, we should keep going down the tree
+  if (state.state && routesAreEqual && currentRoute.state) {
+    return getNavigateReplaceAction(
+      state.state,
+      currentRoute.state as any,
+      lastNavigatorSupportingReplace
+    );
+  }
 
-function isNavigationState(obj: any): obj is NavStateParams {
-  return "initial" in obj;
+  // Either we reached the bottom of the state or the point where the routes diverged
+  const { screen, params } = rewriteNavigationStateToParams(previousState);
+  return {
+    type:
+      lastNavigatorSupportingReplace.type === "stack" ? "REPLACE" : "JUMP_TO",
+    payload: {
+      name: screen,
+      params,
+      // Ensure that the last navigator supporting replace is the one that handles the action
+      source: lastNavigatorSupportingReplace?.key,
+    },
+  };
 }

package/testing-library.ts

@@ -0,0 +1 @@
+export * from "./src/testing-library";

package/build/link/stateOperations.d.ts

@@ -1,81 +0,0 @@
-import { InitialState, NavigationState, ParamListBase, PartialState, getActionFromState } from "@react-navigation/native";
-import { ResultState } from "../fork/getStateFromPath";
-export type NavigateAction = Extract<ReturnType<typeof getActionFromState>, {
-    type: "NAVIGATE";
-}> & {
-    payload: NavigateActionParams;
-};
-export type NavigateActionParams = {
-    params?: NavigateActionParams;
-    path: string;
-    initial: boolean;
-    screen: string;
-    name?: string;
-};
-/** Return the absolute last route to move to. */
-export declare function findTopRouteForTarget(state: ResultState): Omit<import("@react-navigation/native").Route<string, object | undefined>, "key"> & {
-    state?: Readonly<Partial<Omit<Readonly<{
-        key: string;
-        index: number;
-        routeNames: string[];
-        history?: unknown[] | undefined;
-        routes: (Readonly<{
-            key: string;
-            name: string;
-            path?: string | undefined;
-        }> & Readonly<{
-            params?: Readonly<object | undefined>;
-        }> & {
-            state?: Readonly<any> | PartialState<Readonly<any>> | undefined;
-        })[];
-        type: string;
-        stale: false;
-    }>, "stale" | "routes">> & {
-        routes: (Omit<import("@react-navigation/native").Route<string, object | undefined>, "key"> & any)[];
-    }> | undefined;
-};
-/** @returns true if moving to a sibling inside the same navigator. */
-export declare function isMovingToSiblingRoute(currentState: NavigationState | PartialState<NavigationState> | undefined, targetState: ResultState | undefined): boolean;
-export declare function getQualifiedStateForTopOfTargetState(rootState: InitialState, targetState: ResultState): Readonly<Partial<Omit<Readonly<{
-    key: string;
-    index: number;
-    routeNames: string[];
-    history?: unknown[] | undefined;
-    routes: (Readonly<{
-        key: string;
-        name: string;
-        path?: string | undefined;
-    }> & Readonly<{
-        params?: Readonly<object | undefined>;
-    }> & {
-        state?: Readonly<any> | PartialState<Readonly<any>> | undefined;
-    })[];
-    type: string;
-    stale: false;
-}>, "stale" | "routes">> & {
-    routes: (Omit<import("@react-navigation/native").Route<string, object | undefined>, "key"> & {
-        state?: Readonly<Partial<Omit<Readonly<{
-            key: string;
-            index: number;
-            routeNames: string[];
-            history?: unknown[] | undefined;
-            routes: (Readonly<{
-                key: string;
-                name: string;
-                path?: string | undefined;
-            }> & Readonly<{
-                params?: Readonly<object | undefined>;
-            }> & {
-                state?: Readonly<any> | PartialState<Readonly<any>> | undefined;
-            })[];
-            type: string;
-            stale: false;
-        }>, "stale" | "routes">> & any> | undefined;
-    })[];
-}>;
-export declare function getEarliestMismatchedRoute<T extends ParamListBase>(rootState: NavigationState<T> | undefined, actionParams: NavigateActionParams): {
-    name: string;
-    params?: any;
-    type?: string;
-} | null;
-//# sourceMappingURL=stateOperations.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"stateOperations.d.ts","sourceRoot":"","sources":["../../src/link/stateOperations.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,eAAe,EACf,aAAa,EACb,YAAY,EACZ,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG,OAAO,CAClC,UAAU,CAAC,OAAO,kBAAkB,CAAC,EACrC;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,CACrB,GAAG;IACF,OAAO,EAAE,oBAAoB,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAwBF,iDAAiD;AACjD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,WAAW;;;;;;;;;;;;;;;;;;;;EAIvD;AAED,sEAAsE;AACtE,wBAAgB,sBAAsB,CACpC,YAAY,EAAE,eAAe,GAAG,YAAY,CAAC,eAAe,CAAC,GAAG,SAAS,EACzE,WAAW,EAAE,WAAW,GAAG,SAAS,GACnC,OAAO,CAgCT;AAKD,wBAAgB,oCAAoC,CAClD,SAAS,EAAE,YAAY,EACvB,WAAW,EAAE,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyBzB;AAKD,wBAAgB,0BAA0B,CAAC,CAAC,SAAS,aAAa,EAChE,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,EACzC,YAAY,EAAE,oBAAoB,GACjC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,GAAG,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAgCtD"}

package/src/link/stateOperations.ts

@@ -1,163 +0,0 @@
-import {
-  InitialState,
-  NavigationState,
-  ParamListBase,
-  PartialState,
-  getActionFromState,
-} from "@react-navigation/native";
-
-import { ResultState } from "../fork/getStateFromPath";
-
-export type NavigateAction = Extract<
-  ReturnType<typeof getActionFromState>,
-  { type: "NAVIGATE" }
-> & {
-  payload: NavigateActionParams;
-};
-
-export type NavigateActionParams = {
-  params?: NavigateActionParams;
-  path: string;
-  initial: boolean;
-  screen: string;
-  name?: string;
-};
-
-// Get the last state for a given target state (generated from a path).
-function findTopStateForTarget(state: ResultState) {
-  let current: Partial<InitialState> | undefined = state;
-  let previous: Partial<InitialState> | undefined = state;
-
-  while (current?.routes?.[current?.routes?.length - 1].state != null) {
-    previous = current;
-    current = current?.routes[current?.routes.length - 1].state;
-  }
-
-  // If the last route in the target state is an index route, return the previous state (parent).
-  // NOTE: This may need to be updated to support initial route name being a non-standard value.
-  if (
-    previous &&
-    current?.routes?.[current.routes.length - 1]!.name === "index"
-  ) {
-    return previous;
-  }
-
-  return current;
-}
-
-/** Return the absolute last route to move to. */
-export function findTopRouteForTarget(state: ResultState) {
-  const nextState = findTopStateForTarget(state)!;
-  // Ensure we get the last route to prevent returning the initial route.
-  return nextState.routes?.[nextState.routes.length - 1]!;
-}
-
-/** @returns true if moving to a sibling inside the same navigator. */
-export function isMovingToSiblingRoute(
-  currentState: NavigationState | PartialState<NavigationState> | undefined,
-  targetState: ResultState | undefined
-): boolean {
-  if (!currentState || !targetState) {
-    return false;
-  }
-
-  // Need to type this, as the current types are not compaitble with the `find`
-  const targetRoute = targetState.routes[0];
-
-  // Make sure we're in the same navigator
-  if (!currentState.routeNames?.includes(targetRoute.name)) {
-    return false;
-  }
-
-  // If there's no state, we're at the end of the path
-  if (!targetRoute.state) {
-    return true;
-  }
-
-  // Coerce the types into a more common form
-  const currentRoutes:
-    | {
-        name: string;
-        state?: NavigationState | PartialState<NavigationState>;
-      }[]
-    | undefined = currentState?.routes;
-  const locatedState = currentRoutes?.find((r) => r.name === targetRoute.name);
-
-  if (!locatedState) {
-    return false;
-  }
-
-  return isMovingToSiblingRoute(locatedState.state, targetRoute.state);
-}
-
-// 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 getQualifiedStateForTopOfTargetState(
-  rootState: InitialState,
-  targetState: ResultState
-) {
-  let current: InitialState | undefined = targetState;
-  let currentRoot: InitialState | undefined = rootState;
-
-  while (current?.routes?.[current?.routes?.length - 1].state != null) {
-    const nextRoute: any = current?.routes?.[current?.routes?.length - 1];
-
-    const nextCurrentRoot: InitialState | undefined = currentRoot?.routes?.find(
-      (route) => route.name === nextRoute.name
-    )?.state;
-
-    if (nextCurrentRoot == null) {
-      return currentRoot;
-      // Not sure what to do -- we're tracking against the assumption that
-      // all routes in the target state are in the root state
-      // currentRoot = undefined;
-    } else {
-      currentRoot = nextCurrentRoot;
-    }
-
-    current = nextRoute.state;
-  }
-
-  return currentRoot;
-}
-
-// 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<T extends ParamListBase>(
-  rootState: NavigationState<T> | undefined,
-  actionParams: NavigateActionParams
-): { 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(
-      // @react-navigation/native types this as NavigationState | Partial<NavigationState> | undefined
-      // In our usage, it's always a NavigationState | undefined
-      nextCurrentRoot.state as NavigationState<T> | undefined,
-      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,
-  };
-}