@react-navigation/native 8.0.0-alpha.5 → 8.0.0-alpha.51

package/src/useLinking.tsx

@@ -1,4 +1,5 @@
 import {
+  CommonActions,
   findFocusedRoute,
   getActionFromState as getActionFromStateDefault,
   getPathFromState as getPathFromStateDefault,
@@ -6,27 +7,84 @@ import {
   type NavigationContainerRef,
   type NavigationState,
   type ParamListBase,
+  type PartialState,
   useNavigationIndependentTree,
 } from '@react-navigation/core';
 import isEqual from 'fast-deep-equal';
 import * as React from 'react';
 
 import { createMemoryHistory } from './createMemoryHistory';
-import { ServerContext } from './ServerContext';
+import { ServerContext } from './server/ServerContext';
 import type { LinkingOptions } from './types';
 import type { Thenable } from './useThenable';
 
-type ResultState = ReturnType<typeof getStateFromPathDefault>;
+/**
+ * History delta already applied by the browser when handling `popstate`
+ * The value 'replace' means the delta is unknown, so we can only replace
+ */
+type PopStateDelta = number | 'replace';
+
+const getRoutesUntilIndex = (state: NavigationState) =>
+  state.routes.slice(0, state.index + 1);
+
+/**
+ * Get the state object to construct the path from.
+ *
+ * We use the root state as the base, and fallback to existing `route.state`.
+ * If a navigator mounts later, this ensures we don't remove it from URL.
+ * It could happen during suspense, hydration, conditional rendering etc.
+ */
+const getStateForPath = (
+  state: NavigationState | PartialState<NavigationState>,
+  fallbackState: NavigationState | PartialState<NavigationState> | undefined
+): Omit<PartialState<NavigationState>, 'stale'> => {
+  const index = state.index ?? state.routes.length - 1;
+  const route = state.routes[index];
+
+  if (route == null) {
+    return state;
+  }
+
+  const fallbackRoute = fallbackState?.routes[index];
+
+  if (
+    (fallbackRoute != null &&
+      'key' in fallbackRoute &&
+      typeof fallbackRoute?.key === 'string' &&
+      typeof route?.key === 'string' &&
+      fallbackRoute.key !== route.key) ||
+    route.name !== fallbackRoute?.name
+  ) {
+    return state;
+  }
+
+  const childState = route.state
+    ? getStateForPath(route.state, fallbackRoute.state)
+    : fallbackRoute.state;
+
+  if (route.state === childState) {
+    return state;
+  }
+
+  return {
+    ...state,
+    routes: state.routes.map((item) =>
+      item === route ? { ...item, state: childState } : item
+    ),
+  };
+};
 
 /**
  * Calculate total history length including both navigator history and route history
  */
 const getTotalHistoryLength = (state: NavigationState): number => {
+  const routes = getRoutesUntilIndex(state);
+
   const baseHistoryLength = state.history
     ? state.history.length
-    : state.routes.length;
+    : routes.length;
 
-  const routeHistoryLength = state.routes.reduce((acc, r) => {
+  const routeHistoryLength = routes.reduce((acc, r) => {
     return acc + (r.history ? r.history.length : 0);
   }, 0);
 
@@ -51,6 +109,10 @@ const findMatchingState = <T extends NavigationState>(
   const aRoute = a.routes[a.index];
   const bRoute = b.routes[b.index];
 
+  if (aRoute == null || bRoute == null) {
+    return [a, b];
+  }
+
   const aChildState = aRoute.state as T | undefined;
   const bChildState = bRoute.state as T | undefined;
 
@@ -74,31 +136,107 @@ const findMatchingState = <T extends NavigationState>(
   return findMatchingState(aChildState, bChildState);
 };
 
+/**
+ * Calculate the history delta between 2 navigation states.
+ * If no common navigation state is found, only replace the history entry.
+ */
+const getHistoryDelta = (
+  previous: NavigationState | undefined,
+  next: NavigationState | undefined
+): PopStateDelta => {
+  const [previousFocused, nextFocused] = findMatchingState(previous, next);
+
+  return previousFocused && nextFocused
+    ? getTotalHistoryLength(nextFocused) -
+        getTotalHistoryLength(previousFocused)
+    : 'replace';
+};
+
+/**
+ * Check if navigator history matches between committed and latest state.
+ */
+const hasMatchingBackHistory = (
+  current: NavigationState,
+  latest: NavigationState
+): boolean => {
+  if (current.history !== undefined || latest.history !== undefined) {
+    return isEqual(current.history, latest.history);
+  }
+
+  return current.routes
+    .slice(0, Math.min(current.index, latest.index) + 1)
+    .every((route, i) => route.key === latest.routes[i]?.key);
+};
+
+/**
+ * Check if the state change is popping the last route or history entry.
+ */
+const isPoppingLastEntry = (
+  current: NavigationState,
+  record: NavigationState
+): boolean => {
+  const currentRoute = current.routes[current.index];
+  const recordRoute = record.routes[record.index];
+
+  if (currentRoute == null || recordRoute == null) {
+    return false;
+  }
+
+  const currentRouteHistory = currentRoute.history;
+  const recordRouteHistory = recordRoute.history ?? [];
+
+  if (currentRouteHistory?.length) {
+    return (
+      currentRoute.key === recordRoute.key &&
+      currentRouteHistory.length === recordRouteHistory.length + 1
+    );
+  }
+
+  if (current.history && record.history) {
+    return current.history.length === record.history.length + 1;
+  }
+
+  const currentRoutes = getRoutesUntilIndex(current);
+  const recordRoutes = getRoutesUntilIndex(record);
+
+  if (currentRoutes.length === recordRoutes.length + 1) {
+    return recordRoutes.every((route, i) => {
+      const currentRoute = currentRoutes[i];
+
+      return currentRoute != null && route.key === currentRoute.key;
+    });
+  }
+
+  return false;
+};
+
 /**
  * Run async function in series as it's called.
  */
-export const series = (cb: () => Promise<void>) => {
+const series = (cb: () => Promise<void>) => {
   let queue = Promise.resolve();
+
   const callback = () => {
     // eslint-disable-next-line promise/no-callback-in-promise
-    queue = queue.then(cb);
+    queue = queue.then(cb).catch((e) => {
+      console.error(e);
+    });
   };
+
   return callback;
 };
 
 const linkingHandlers = new Set<symbol>();
 
-type Options = LinkingOptions<ParamListBase>;
-
-export function useLinking(
-  ref: React.RefObject<NavigationContainerRef<ParamListBase> | null>,
+export function useLinking<ParamList extends ParamListBase>(
+  ref: React.RefObject<NavigationContainerRef<ParamList> | null>,
   {
     enabled = true,
     config,
     getStateFromPath = getStateFromPathDefault,
     getPathFromState = getPathFromStateDefault,
     getActionFromState = getActionFromStateDefault,
-  }: Options
+  }: LinkingOptions<ParamList>
 ) {
   const independent = useNavigationIndependentTree();
 
@@ -134,7 +272,15 @@ export function useLinking(
     };
   }, [enabled, independent]);
 
-  const [history] = React.useState(createMemoryHistory);
+  const server = React.use(ServerContext);
+
+  const [history] = React.useState(() => {
+    if (server || typeof window === 'undefined') {
+      return undefined;
+    }
+
+    return createMemoryHistory();
+  });
 
   // 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`
@@ -154,34 +300,41 @@ export function useLinking(
   });
 
   const validateRoutesNotExistInRootState = React.useCallback(
-    (state: ResultState) => {
-      const navigation = ref.current;
-      const rootState = navigation?.getRootState();
+    (
+      state: PartialState<NavigationState> | undefined,
+      rootState: NavigationState | undefined
+    ) => {
       // Make sure that the routes in the state exist in the root navigator
       // Otherwise there's an error in the linking configuration
       return state?.routes.some((r) => !rootState?.routeNames.includes(r.name));
     },
-    [ref]
+    []
   );
 
-  const server = React.useContext(ServerContext);
-
   const getInitialState = React.useCallback(() => {
-    let value: ResultState | undefined;
+    let value: PartialState<NavigationState> | undefined;
 
     if (enabledRef.current) {
-      const location =
-        server?.location ??
-        (typeof window !== 'undefined' ? window.location : undefined);
+      const location = server
+        ? server.location
+        : typeof window !== 'undefined'
+          ? window.location
+          : undefined;
 
       const path = location ? location.pathname + location.search : undefined;
 
       if (path) {
-        value = getStateFromPathRef.current(path, configRef.current);
+        try {
+          value = getStateFromPathRef.current(path, configRef.current);
+        } catch (e) {
+          console.error(e);
+
+          value = undefined;
+        }
       }
     }
 
-    const thenable: Thenable<ResultState | undefined> = {
+    const thenable: Thenable<PartialState<NavigationState> | undefined> = {
       then(onfulfilled) {
         return Promise.resolve(onfulfilled ? onfulfilled(value) : value);
       },
@@ -193,9 +346,15 @@ export function useLinking(
 
   const previousIndexRef = React.useRef<number | undefined>(undefined);
   const previousStateRef = React.useRef<NavigationState | undefined>(undefined);
-  const pendingPopStatePathRef = React.useRef<string | undefined>(undefined);
+  const pendingPopStateRef = React.useRef<
+    { state: NavigationState | undefined; delta: PopStateDelta } | undefined
+  >(undefined);
 
   React.useEffect(() => {
+    if (!history) {
+      return;
+    }
+
     previousIndexRef.current = history.index;
 
     return history.listen(() => {
@@ -213,7 +372,91 @@ export function useLinking(
       const previousIndex = previousIndexRef.current ?? 0;
 
       previousIndexRef.current = index;
-      pendingPopStatePathRef.current = path;
+
+      const rollbackHistory = () => {
+        const delta = previousIndex - index;
+
+        if (delta === 0) {
+          return;
+        }
+
+        history
+          .go(delta)
+          // eslint-disable-next-line promise/always-return
+          ?.then(() => {
+            previousIndexRef.current = history.index;
+          })
+          .catch(() => {
+            // The navigation was interrupted
+          });
+      };
+
+      const rollbackHistoryIfPrevented = (
+        callback: () => void,
+        pendingDelta: PopStateDelta
+      ) => {
+        let removePrevented = false;
+        let actionChangedState = false;
+
+        const unsubscribeEvent = navigation.addListener(
+          '__unsafe_event__',
+          (e) => {
+            if (e.data.type === 'beforeRemove' && e.data.defaultPrevented) {
+              removePrevented = true;
+            }
+          }
+        );
+
+        // After preventing remove, user may synchronously continue navigation
+        // This is common when showing a confirmation dialog
+        // If this action produces an update, we don't want to rollback the history
+        const unsubscribeAction = navigation.addListener(
+          '__unsafe_action__',
+          (e) => {
+            if (!e.data.noop) {
+              actionChangedState = true;
+            }
+          }
+        );
+
+        try {
+          callback();
+        } finally {
+          unsubscribeEvent();
+          unsubscribeAction();
+        }
+
+        if (actionChangedState) {
+          // The change may be committed later, e.g. with transitions
+          // Remember the delta so it can be subtracted when syncing the commit
+          pendingPopStateRef.current = {
+            state: navigation.getRootState(),
+            delta: pendingDelta,
+          };
+        } else if (removePrevented) {
+          rollbackHistory();
+        }
+      };
+
+      const dispatch = (
+        action: Parameters<typeof navigation.dispatch>[0],
+        pendingDelta: PopStateDelta
+      ) => {
+        rollbackHistoryIfPrevented(
+          () => navigation.dispatch(action),
+          pendingDelta
+        );
+      };
+
+      const resetRoot = (
+        state: Parameters<typeof navigation.resetRoot>[0],
+        pendingDelta: PopStateDelta
+      ) => {
+        rollbackHistoryIfPrevented(
+          () => navigation.resetRoot(state),
+          pendingDelta
+        );
+      };
 
       // When browser back/forward is clicked, we first need to check if state object for this index exists
       // If it does we'll reset to that state object
@@ -221,72 +464,157 @@ export function useLinking(
       const record = history.get(index);
 
       if (record?.path === path && record?.state) {
-        navigation.resetRoot(record.state);
+        const pending = pendingPopStateRef.current;
+
+        // Use the state synced to browser history or the result of a pending traversal,
+        // since the store may already contain another navigation that hasn't committed yet.
+        const currentState = pending?.state ?? previousStateRef.current;
+
+        const [currentFocused, recordFocused] = findMatchingState(
+          currentState,
+          record.state
+        );
+
+        const [latestFocused] = findMatchingState(
+          navigation.getRootState(),
+          record.state
+        );
+
+        const [pendingFocused] = findMatchingState(
+          previousStateRef.current,
+          pending?.state
+        );
+
+        const currentRoute = currentFocused?.routes[currentFocused.index];
+        const latestRoute =
+          latestFocused &&
+          getRoutesUntilIndex(latestFocused).find(
+            (route) => route.key === currentRoute?.key
+          );
+
+        if (
+          previousIndex - index === 1 &&
+          currentFocused &&
+          recordFocused &&
+          latestFocused &&
+          currentFocused.key === latestFocused.key &&
+          // Only combine pending browser history deltas within the same navigator,
+          // as history lengths from different navigators aren't comparable.
+          (!pending?.state || pendingFocused?.key === currentFocused.key) &&
+          // We don't want to dispatch `goBack` if route history has grown since,
+          // as we can't specify the entry to go back from.
+          // We can only specify route to go back from with `source`.
+          // Entries removed since are fine, they were already popped by a back action.
+          (latestRoute?.history?.length ?? 0) <=
+            (currentRoute?.history?.length ?? 0) &&
+          hasMatchingBackHistory(currentFocused, latestFocused) &&
+          isPoppingLastEntry(currentFocused, recordFocused)
+        ) {
+          // If we detect that the state change is popping the last entry
+          // Dispatch a back action instead of resetting to the state
+          // This makes sure changes to history state since the entry was added don't get lost
+          dispatch(
+            {
+              ...CommonActions.goBack(),
+              target: currentFocused.key,
+              // If another back action already removed the source, go back
+              // from the current route in the same navigator instead.
+              source: latestRoute?.key,
+            },
+            // Stack on any delta from a previous `popstate` that hasn't committed yet
+            pending?.delta === 'replace' ? 'replace' : (pending?.delta ?? 0) - 1
+          );
+        } else {
+          // The browser already moved from the current state to the record's state
+          // We measure the delta from the last synced state,
+          // since that's what the pending delta gets subtracted from when syncing the commit
+          resetRoot(
+            record.state,
+            getHistoryDelta(previousStateRef.current, record.state)
+          );
+        }
+
         return;
       }
 
-      const state = getStateFromPathRef.current(path, configRef.current);
+      const rootState = navigation.getRootState();
+
+      let state: PartialState<NavigationState> | undefined;
+
+      try {
+        state = getStateFromPathRef.current(path, configRef.current, rootState);
+      } catch (e) {
+        console.error(e);
+
+        state = undefined;
+      }
+
+      // Make sure that the routes in the state exist in the root navigator
+      // Otherwise there's an error in the linking configuration
+      if (state && validateRoutesNotExistInRootState(state, rootState)) {
+        return;
+      }
 
       // We should only dispatch an action when going forward
       // Otherwise the action will likely add items to history, which would mess things up
-      if (state) {
-        // Make sure that the routes in the state exist in the root navigator
-        // Otherwise there's an error in the linking configuration
-        if (validateRoutesNotExistInRootState(state)) {
-          return;
-        }
-
-        if (index > previousIndex) {
-          const action = getActionFromStateRef.current(
-            state,
-            configRef.current
+      const action =
+        state && index > previousIndex
+          ? getActionFromStateRef.current(state, configRef.current)
+          : undefined;
+
+      if (action !== undefined) {
+        try {
+          dispatch(
+            {
+              target: rootState?.key,
+              ...action,
+            },
+            'replace'
+          );
+        } 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 '${path}': ${
+              typeof e === 'object' && e != null && 'message' in e
+                ? e.message
+                : e
+            }`
           );
-
-          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 '${path}': ${
-                  typeof e === 'object' && e != null && 'message' in e
-                    ? e.message
-                    : e
-                }`
-              );
-            }
-          } else {
-            navigation.resetRoot(state);
-          }
-        } else {
-          navigation.resetRoot(state);
         }
       } else {
-        // if current path didn't return any state, we should revert to initial state
-        navigation.resetRoot(state);
+        // If current path didn't return any state, we should revert to initial state
+        resetRoot(state, 'replace');
       }
     });
   }, [enabled, history, ref, validateRoutesNotExistInRootState]);
 
   React.useEffect(() => {
-    if (!enabled) {
+    if (!enabled || !history) {
       return;
     }
 
     const getPathForRoute = (
       route: ReturnType<typeof findFocusedRoute>,
-      state: NavigationState
+      state: NavigationState | PartialState<NavigationState>
     ): string => {
       let path;
 
       // If the `route` object contains a `path`, use that path as long as `route.name` and `params` still match
       // This makes sure that we preserve the original URL for wildcard routes
       if (route?.path) {
-        const stateForPath = getStateFromPathRef.current(
-          route.path,
-          configRef.current
-        );
+        let stateForPath: PartialState<NavigationState> | undefined;
+
+        try {
+          stateForPath = getStateFromPathRef.current(
+            route.path,
+            configRef.current
+          );
+        } catch (e) {
+          console.error(e);
+
+          stateForPath = undefined;
+        }
 
         if (stateForPath) {
           const focusedRoute = findFocusedRoute(stateForPath);
@@ -329,18 +657,21 @@ export function useLinking(
       const state = ref.current.getRootState();
 
       if (state) {
-        const route = findFocusedRoute(state);
-        const path = getPathForRoute(route, state);
+        const stateForPath = getStateForPath(state, ref.current.getState());
+
+        const route = findFocusedRoute(stateForPath);
+        const path = getPathForRoute(route, stateForPath);
 
         if (previousStateRef.current === undefined) {
           previousStateRef.current = state;
         }
 
         history.replace({ path, state });
+        previousIndexRef.current = history.index;
       }
     }
 
-    const onStateChange = async () => {
+    const onUpdate = async () => {
       const navigation = ref.current;
 
       if (!navigation || !enabled) {
@@ -355,32 +686,36 @@ export function useLinking(
         return;
       }
 
-      const pendingPath = pendingPopStatePathRef.current;
-      const route = findFocusedRoute(state);
-      const path = getPathForRoute(route, state);
+      // Skip if the state hasn't changed since we last synced it
+      if (previousState === state) {
+        return;
+      }
+
+      const stateForPath = getStateForPath(state, navigation.getState());
+
+      const route = findFocusedRoute(stateForPath);
+      const path = getPathForRoute(route, stateForPath);
+
+      const pendingPopStateDelta = pendingPopStateRef.current?.delta;
 
       previousStateRef.current = state;
-      pendingPopStatePathRef.current = undefined;
+      pendingPopStateRef.current = undefined;
 
       // To detect the kind of state change, we need to:
       // - Find the common focused navigation state in previous and current state
       // - If only the route keys changed, compare history/routes.length to check if we go back/forward/replace
       // - If no common focused navigation state found, it's a replace
-      const [previousFocusedState, focusedState] = findMatchingState(
-        previousState,
-        state
-      );
+      const delta = getHistoryDelta(previousState, state);
 
       if (
-        previousFocusedState &&
-        focusedState &&
-        // We should only handle push/pop if path changed from what was in last `popstate`
-        // Otherwise it's likely a change triggered by `popstate`
-        path !== pendingPath
+        delta !== 'replace' &&
+        // If the delta from `popstate` is unknown, we can only replace
+        pendingPopStateDelta !== 'replace'
       ) {
         const historyDelta =
-          getTotalHistoryLength(focusedState) -
-          getTotalHistoryLength(previousFocusedState);
+          delta -
+          // Subtract the delta already applied by the browser to sync only the remaining changes
+          (pendingPopStateDelta ?? 0);
 
         if (historyDelta > 0) {
           // If history length is increased, we should pushState
@@ -422,12 +757,16 @@ export function useLinking(
         // This would happen if the user did a reset/conditionally changed navigators
         history.replace({ path, state });
       }
+
+      previousIndexRef.current = history.index;
     };
 
-    // We debounce onStateChange coz we don't want multiple state changes to be handled at one time
+    // We debounce onUpdate coz we don't want multiple state changes to be handled at one time
     // This could happen since `history.go(n)` is asynchronous
     // If `pushState` or `replaceState` were called before `history.go(n)` completes, it'll mess stuff up
-    return ref.current?.addListener('state', series(onStateChange));
+    const handleUpdate = series(onUpdate);
+
+    return ref.current?.addListener('state', handleUpdate);
   }, [enabled, history, ref]);
 
   return {

package/src/useLocale.tsx

@@ -6,7 +6,7 @@ import { LocaleDirContext } from './LocaleDirContext';
  * Hook to access the text direction specified in the `NavigationContainer`.
  */
 export function useLocale() {
-  const direction = React.useContext(LocaleDirContext);
+  const direction = React.use(LocaleDirContext);
 
   if (direction === undefined) {
     throw new Error(