@react-navigation/native 8.0.0-alpha.4 → 8.0.0-alpha.41

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,75 @@ const findMatchingState = <T extends NavigationState>(
   return findMatchingState(aChildState, bChildState);
 };
 
+/**
+ * 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>) => {
   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 +240,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,7 +268,7 @@ export function useLinking(
   });
 
   const validateRoutesNotExistInRootState = React.useCallback(
-    (state: ResultState) => {
+    (state: PartialState<NavigationState>) => {
       const navigation = ref.current;
       const rootState = navigation?.getRootState();
       // Make sure that the routes in the state exist in the root navigator
@@ -164,24 +278,30 @@ export function useLinking(
     [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 +313,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 pendingPopStateDeltaRef = React.useRef<PopStateDelta | undefined>(
+    undefined
+  );
 
   React.useEffect(() => {
+    if (!history) {
+      return;
+    }
+
     previousIndexRef.current = history.index;
 
     return history.listen(() => {
@@ -213,7 +339,88 @@ 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
+          pendingPopStateDeltaRef.current = 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,11 +428,56 @@ export function useLinking(
       const record = history.get(index);
 
       if (record?.path === path && record?.state) {
-        navigation.resetRoot(record.state);
+        const currentState = navigation.getRootState();
+
+        const [currentFocused, recordFocused] = findMatchingState(
+          currentState,
+          record.state
+        );
+
+        if (
+          previousIndex - index === 1 &&
+          currentFocused &&
+          recordFocused &&
+          isPoppingLastEntry(currentFocused, recordFocused)
+        ) {
+          const pending = pendingPopStateDeltaRef.current;
+
+          // 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(),
+            // Stack on any delta from a previous `popstate` that hasn't committed yet
+            pending === 'replace' ? 'replace' : (pending ?? 0) - 1
+          );
+        } else {
+          // The browser already moved from the current state to the record's state
+          resetRoot(
+            record.state,
+            currentFocused && recordFocused
+              ? getTotalHistoryLength(recordFocused) -
+                  getTotalHistoryLength(currentFocused)
+              : 'replace'
+          );
+        }
+
         return;
       }
 
-      const state = getStateFromPathRef.current(path, configRef.current);
+      let state: PartialState<NavigationState> | undefined;
+
+      try {
+        state = getStateFromPathRef.current(
+          path,
+          configRef.current,
+          navigation.getRootState()
+        );
+      } catch (e) {
+        console.error(e);
+
+        state = undefined;
+      }
 
       // We should only dispatch an action when going forward
       // Otherwise the action will likely add items to history, which would mess things up
@@ -244,7 +496,7 @@ export function useLinking(
 
           if (action !== undefined) {
             try {
-              navigation.dispatch(action);
+              dispatch(action, 'replace');
             } catch (e) {
               // Ignore any errors from deep linking.
               // This could happen in case of malformed links, navigation object not being initialized etc.
@@ -257,36 +509,44 @@ export function useLinking(
               );
             }
           } else {
-            navigation.resetRoot(state);
+            resetRoot(state, 'replace');
           }
         } else {
-          navigation.resetRoot(state);
+          resetRoot(state, 'replace');
         }
       } else {
         // if current path didn't return any state, we should revert to initial state
-        navigation.resetRoot(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 +589,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,12 +618,20 @@ 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 = pendingPopStateDeltaRef.current;
 
       previousStateRef.current = state;
-      pendingPopStatePathRef.current = undefined;
+      pendingPopStateDeltaRef.current = undefined;
 
       // To detect the kind of state change, we need to:
       // - Find the common focused navigation state in previous and current state
@@ -374,13 +645,14 @@ export function useLinking(
       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
+        // If the delta from `popstate` is unknown, we can only replace
+        pendingPopStateDelta !== 'replace'
       ) {
         const historyDelta =
           getTotalHistoryLength(focusedState) -
-          getTotalHistoryLength(previousFocusedState);
+          getTotalHistoryLength(previousFocusedState) -
+          // 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 +694,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(

package/src/useMemoArray.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+export function useMemoArray<T>(
+  entries: [item: T, deps: readonly unknown[]][]
+): T[] {
+  const previousRef = React.useRef<
+    | {
+        entries: { item: T; deps: readonly unknown[] }[];
+        items: T[];
+      }
+    | undefined
+  >(undefined);
+
+  const previous = previousRef.current;
+  const next = entries.map(([item, deps], index) => {
+    const previousEntry = previous?.entries[index];
+    const depsEqual =
+      previousEntry &&
+      previousEntry.deps.length === deps.length &&
+      previousEntry.deps.every((it, index) => Object.is(it, deps[index]));
+
+    return depsEqual ? previousEntry : { item, deps };
+  });
+
+  if (
+    previous &&
+    previous.entries.length === next.length &&
+    next.every((entry, index) => entry === previous.entries[index])
+  ) {
+    return previous.items;
+  }
+
+  const items = next.map((entry) => entry.item);
+
+  previousRef.current = {
+    entries: next,
+    items,
+  };
+
+  return items;
+}

package/src/useRoutePath.tsx

@@ -9,7 +9,7 @@ import { LinkingContext } from './LinkingContext';
  * @returns Path for the current route.
  */
 export function useRoutePath() {
-  const { options } = React.useContext(LinkingContext);
+  const { options } = React.use(LinkingContext);
   const state = useStateForPath();
 
   if (state === undefined) {

package/src/useScrollToTop.tsx

@@ -18,7 +18,6 @@ type ScrollableView =
 
 type ScrollableWrapper =
   | { getScrollResponder(): React.ReactNode | ScrollView }
-  | { getNode(): ScrollableView }
   | ScrollableView
   | null;
 
@@ -39,19 +38,13 @@ function getScrollableNode(ref: React.RefObject<ScrollableWrapper>) {
     // If the view is a wrapper like FlatList, SectionList etc.
     // We need to use `getScrollResponder` to get access to the scroll responder
     return ref.current.getScrollResponder();
-  } else if ('getNode' in ref.current) {
-    // When a `ScrollView` is wrapped in `Animated.createAnimatedComponent`
-    // we need to use `getNode` to get the ref to the actual scrollview.
-    // Note that `getNode` is deprecated in newer versions of react-native
-    // this is why we check if we already have a scrollable node above.
-    return ref.current.getNode();
   } else {
     return ref.current;
   }
 }
 
 export function useScrollToTop(ref: React.RefObject<ScrollableWrapper>) {
-  const navigation = React.useContext(NavigationContext);
+  const navigation = React.use(NavigationContext);
   const route = useRoute();
 
   if (navigation === undefined) {
@@ -91,9 +84,10 @@ export function useScrollToTop(ref: React.RefObject<ScrollableWrapper>) {
 
           // In a nested stack navigator, tab press resets the stack to first screen
           // So we should scroll to top only when we are on first screen
+          const firstRoute = navigation.getState().routes[0];
           const isFirst =
             tabNavigations.includes(navigation) ||
-            navigation.getState().routes[0].key === route.key;
+            firstRoute?.key === route.key;
 
           // Run the operation in the next frame so we're sure all listeners have been run
           // This is necessary to know if preventDefault() has been called