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

package/src/PreventRemoveProvider.tsx

@@ -1,4 +1,3 @@
-import { nanoid } from 'nanoid/non-secure';
 import * as React from 'react';
 import useLatestCallback from 'use-latest-callback';
 
@@ -13,13 +12,7 @@ type Props = {
   children: React.ReactNode;
 };
 
-type PreventedRoutesMap = Map<
-  string,
-  {
-    routeKey: string;
-    preventRemove: boolean;
-  }
->;
+type PreventedRoutesMap = Map<string, string>;
 
 /**
  * Util function to transform map of prevented routes to a simpler object.
@@ -27,17 +20,11 @@ type PreventedRoutesMap = Map<
 const transformPreventedRoutes = (
   preventedRoutesMap: PreventedRoutesMap
 ): PreventedRoutes => {
-  const preventedRoutesToTransform = [...preventedRoutesMap.values()];
+  const preventedRoutes: PreventedRoutes = {};
 
-  const preventedRoutes = preventedRoutesToTransform.reduce<PreventedRoutes>(
-    (acc, { routeKey, preventRemove }) => {
-      acc[routeKey] = {
-        preventRemove: acc[routeKey]?.preventRemove || preventRemove,
-      };
-      return acc;
-    },
-    {}
-  );
+  for (const routeKey of preventedRoutesMap.values()) {
+    preventedRoutes[routeKey] = { preventRemove: true };
+  }
 
   return preventedRoutes;
 };
@@ -46,61 +33,72 @@ const transformPreventedRoutes = (
  * Component used for managing which routes have to be prevented from removal in native-stack.
  */
 export function PreventRemoveProvider({ children }: Props) {
-  const [parentId] = React.useState(() => nanoid());
+  const parentId = React.useId();
+
   const [preventedRoutesMap, setPreventedRoutesMap] =
     React.useState<PreventedRoutesMap>(() => new Map());
 
-  const navigation = React.useContext(NavigationHelpersContext);
-  const route = React.useContext(NavigationRouteContext);
+  const registry = React.useRef<PreventedRoutesMap>(new Map());
+
+  const navigation = React.use(NavigationHelpersContext);
+  const route = React.use(NavigationRouteContext);
 
-  const preventRemoveContextValue = React.useContext(PreventRemoveContext);
+  const preventRemoveContextValue = React.use(PreventRemoveContext);
   // take `setPreventRemove` from parent context - if exist it means we're in a nested context
   const setParentPrevented = preventRemoveContextValue?.setPreventRemove;
+  const notifyParentPrevented = preventRemoveContextValue?.notifyPreventRemove;
 
   const setPreventRemove = useLatestCallback(
     (id: string, routeKey: string, preventRemove: boolean): void => {
-      if (
-        preventRemove &&
-        (navigation == null ||
-          navigation
-            ?.getState()
-            .routes.every((route) => route.key !== routeKey))
-      ) {
+      if (preventRemove && navigation == null) {
         throw new Error(
-          `Couldn't find a route with the key ${routeKey}. Is your component inside NavigationContent?`
+          "Couldn't find a navigation object. This is likely a bug in the navigator.\n\nIf you're using a custom navigator, make sure that the navigator content is wrapped by the 'render' function returned by 'useNavigationBuilder'."
         );
       }
 
-      setPreventedRoutesMap((prevPrevented) => {
-        // values haven't changed - do nothing
-        if (
-          routeKey === prevPrevented.get(id)?.routeKey &&
-          preventRemove === prevPrevented.get(id)?.preventRemove
-        ) {
-          return prevPrevented;
-        }
-
-        const nextPrevented = new Map(prevPrevented);
-
-        if (preventRemove) {
-          nextPrevented.set(id, {
-            routeKey,
-            preventRemove,
-          });
-        } else {
-          nextPrevented.delete(id);
-        }
-
-        return nextPrevented;
-      });
+      if (preventRemove) {
+        registry.current.set(id, routeKey);
+      } else {
+        registry.current.delete(id);
+      }
     }
   );
 
-  const isPrevented = [...preventedRoutesMap.values()].some(
-    ({ preventRemove }) => preventRemove
-  );
+  const notifyPreventRemove = useLatestCallback(() => {
+    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+    setPreventedRoutesMap((prevPrevented) => {
+      const nextPrevented = registry.current;
 
+      const hasChanged =
+        prevPrevented.size !== nextPrevented.size ||
+        [...nextPrevented].some(
+          ([id, routeKey]) => prevPrevented.get(id) !== routeKey
+        );
+
+      // values haven't changed - do nothing
+      if (!hasChanged) {
+        return prevPrevented;
+      }
+
+      return new Map(nextPrevented);
+    });
+  });
+
+  // Sync the state on every commit in case the registry was changed by a screen
+  // unmounting while hidden with `<Activity>`, where no passive effects run
+  // Also notify the parent so nested prevention propagates upwards
   React.useEffect(() => {
+    notifyPreventRemove();
+    notifyParentPrevented?.();
+
+    return () => {
+      notifyParentPrevented?.();
+    };
+  });
+
+  const isPrevented = preventedRoutesMap.size > 0;
+
+  React.useInsertionEffect(() => {
     if (route?.key !== undefined && setParentPrevented !== undefined) {
       // when route is defined (and setParentPrevented) it means we're in a nested stack
       // route.key then will be the route key of parent
@@ -116,9 +114,10 @@ export function PreventRemoveProvider({ children }: Props) {
   const value = React.useMemo(
     () => ({
       setPreventRemove,
+      notifyPreventRemove,
       preventedRoutes: transformPreventedRoutes(preventedRoutesMap),
     }),
-    [setPreventRemove, preventedRoutesMap]
+    [setPreventRemove, notifyPreventRemove, preventedRoutesMap]
   );
 
   return (

package/src/SceneView.tsx

@@ -15,15 +15,17 @@ import {
 import { NavigationStateContext } from './NavigationStateContext';
 import { StaticContainer } from './StaticContainer';
 import type { NavigationProp, RouteConfigComponent } from './types';
-import { useOptionsGetters } from './useOptionsGetters';
+import { OptionsGetterContext, useOptionsGetters } from './useOptionsGetters';
 
 type Props<State extends NavigationState, ScreenOptions extends {}> = {
   screen: RouteConfigComponent<ParamListBase, string> & { name: string };
   navigation: NavigationProp<ParamListBase, string, State, ScreenOptions>;
   route: Route<string>;
   routeState: NavigationState | PartialState<NavigationState> | undefined;
+  getFocusedRouteKey: () => string | undefined;
   getState: () => State;
   setState: (state: State) => void;
+  subscribe: (callback: () => void) => () => void;
   options: object;
   clearOptions: () => void;
 };
@@ -40,8 +42,10 @@ export function SceneView<
   route,
   navigation,
   routeState,
+  getFocusedRouteKey,
   getState,
   setState,
+  subscribe,
   options,
   clearOptions,
 }: Props<State, ScreenOptions>) {
@@ -51,7 +55,7 @@ export function SceneView<
   const { addOptionsGetter } = useOptionsGetters({
     key: route.key,
     options,
-    navigation,
+    getFocusedRouteKey,
   });
 
   const setKey = React.useCallback((key: string) => {
@@ -70,46 +74,16 @@ export function SceneView<
       const state = getState();
 
       const routes = state.routes.map((r) => {
-        if (r.key !== route.key) {
-          return r;
+        if (r.key === route.key && r.state !== child) {
+          return {
+            ...r,
+            state: child,
+          };
         }
 
-        const nextRoute = r.state !== child ? { ...r, state: child } : r;
-
-        // Before updating the state, cleanup any nested screen and state
-        // This will avoid the navigator trying to handle them again
-        if (
-          nextRoute.params &&
-          (('state' in nextRoute.params &&
-            typeof nextRoute.params.state === 'object' &&
-            nextRoute.params.state !== null) ||
-            ('screen' in nextRoute.params &&
-              typeof nextRoute.params.screen === 'string'))
-        ) {
-          // @ts-expect-error: we don't have correct type for params
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { state, screen, params, initial, ...rest } = nextRoute.params;
-
-          if (Object.keys(rest).length) {
-            return { ...nextRoute, params: rest };
-          } else {
-            const {
-              // We destructure the params to omit them
-              // eslint-disable-next-line @typescript-eslint/no-unused-vars
-              params,
-              ...restRoute
-            } = nextRoute;
-
-            return restRoute;
-          }
-        }
-
-        return nextRoute;
+        return r;
       });
 
-      // Make sure not to update state if routes haven't changed
-      // Otherwise this will result in params cleanup as well
-      // We only want to cleanup params when state changes - after they are used
       if (!isArrayEqual(state.routes, routes)) {
         setState({
           ...state,
@@ -134,9 +108,7 @@ export function SceneView<
 
   const getIsInitial = React.useCallback(() => isInitialRef.current, []);
 
-  const parentFocusedRouteState = React.useContext(
-    NavigationFocusedRouteStateContext
-  );
+  const parentFocusedRouteState = React.use(NavigationFocusedRouteStateContext);
 
   const focusedRouteState = React.useMemo(() => {
     const state: FocusedRouteState = {
@@ -184,19 +156,19 @@ export function SceneView<
       state: routeState,
       getState: getCurrentState,
       setState: setCurrentState,
+      subscribe,
       getKey,
       setKey,
       getIsInitial,
-      addOptionsGetter,
     }),
     [
       routeState,
       getCurrentState,
       setCurrentState,
+      subscribe,
       getKey,
       setKey,
       getIsInitial,
-      addOptionsGetter,
     ]
   );
 
@@ -207,20 +179,22 @@ export function SceneView<
   return (
     <NavigationStateContext.Provider value={context}>
       <NavigationFocusedRouteStateContext.Provider value={focusedRouteState}>
-        <EnsureSingleNavigator>
-          <StaticContainer
-            name={screen.name}
-            render={ScreenComponent || screen.children}
-            navigation={navigation}
-            route={route}
-          >
-            {ScreenComponent !== undefined ? (
-              <ScreenComponent navigation={navigation} route={route} />
-            ) : screen.children !== undefined ? (
-              screen.children({ navigation, route })
-            ) : null}
-          </StaticContainer>
-        </EnsureSingleNavigator>
+        <OptionsGetterContext.Provider value={addOptionsGetter}>
+          <EnsureSingleNavigator>
+            <StaticContainer
+              name={screen.name}
+              render={ScreenComponent || screen.children}
+              navigation={navigation}
+              route={route}
+            >
+              {ScreenComponent !== undefined ? (
+                <ScreenComponent navigation={navigation} route={route} />
+              ) : screen.children !== undefined ? (
+                screen.children({ navigation, route })
+              ) : null}
+            </StaticContainer>
+          </EnsureSingleNavigator>
+        </OptionsGetterContext.Provider>
       </NavigationFocusedRouteStateContext.Provider>
     </NavigationStateContext.Provider>
   );