@react-navigation/core 7.0.2 → 7.0.4

package/src/BaseNavigationContainer.tsx

@@ -103,9 +103,10 @@ export const BaseNavigationContainer = React.forwardRef(
       );
     }
 
-    const [state, getState, setState] = useSyncState<State>(() =>
-      getPartialState(initialState == null ? undefined : initialState)
-    );
+    const { state, getState, setState, scheduleUpdate, flushUpdates } =
+      useSyncState<State>(() =>
+        getPartialState(initialState == null ? undefined : initialState)
+      );
 
     const isFirstMountRef = React.useRef<boolean>(true);
 
@@ -260,9 +261,18 @@ export const BaseNavigationContainer = React.forwardRef(
         addKeyedListener,
         onDispatchAction,
         onOptionsChange,
+        scheduleUpdate,
+        flushUpdates,
         stackRef,
       }),
-      [addListener, addKeyedListener, onDispatchAction, onOptionsChange]
+      [
+        addListener,
+        addKeyedListener,
+        onDispatchAction,
+        onOptionsChange,
+        scheduleUpdate,
+        flushUpdates,
+      ]
     );
 
     const isInitialRef = React.useRef(true);

package/src/NavigationBuilderContext.tsx

@@ -61,8 +61,16 @@ export const NavigationBuilderContext = React.createContext<{
   onRouteFocus?: (key: string) => void;
   onDispatchAction: (action: NavigationAction, noop: boolean) => void;
   onOptionsChange: (options: object) => void;
+  scheduleUpdate: (callback: () => void) => void;
+  flushUpdates: () => void;
   stackRef?: React.MutableRefObject<string | undefined>;
 }>({
   onDispatchAction: () => undefined,
   onOptionsChange: () => undefined,
+  scheduleUpdate: () => {
+    throw new Error("Couldn't find a context for scheduling updates.");
+  },
+  flushUpdates: () => {
+    throw new Error("Couldn't find a context for flushing updates.");
+  },
 });

package/src/SceneView.tsx

@@ -72,9 +72,37 @@ export function SceneView<
 
       setState({
         ...state,
-        routes: state.routes.map((r) =>
-          r.key === route.key ? { ...r, state: child } : r
-        ),
+        routes: state.routes.map((r) => {
+          if (r.key !== route.key) {
+            return r;
+          }
+
+          const nextRoute = { ...r, state: child };
+
+          // 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) {
+              nextRoute.params = rest;
+            } else {
+              delete nextRoute.params;
+            }
+          }
+
+          return nextRoute;
+        }),
       });
     },
     [getState, route.key, setState]

package/src/useDescriptors.tsx

@@ -116,9 +116,13 @@ export function useDescriptors<
   const [options, setOptions] = React.useState<Record<string, ScreenOptions>>(
     {}
   );
-  const { onDispatchAction, onOptionsChange, stackRef } = React.useContext(
-    NavigationBuilderContext
-  );
+  const {
+    onDispatchAction,
+    onOptionsChange,
+    scheduleUpdate,
+    flushUpdates,
+    stackRef,
+  } = React.useContext(NavigationBuilderContext);
 
   const context = React.useMemo(
     () => ({
@@ -129,6 +133,8 @@ export function useDescriptors<
       onRouteFocus,
       onDispatchAction,
       onOptionsChange,
+      scheduleUpdate,
+      flushUpdates,
       stackRef,
     }),
     [
@@ -139,6 +145,8 @@ export function useDescriptors<
       onRouteFocus,
       onDispatchAction,
       onOptionsChange,
+      scheduleUpdate,
+      flushUpdates,
       stackRef,
     ]
   );

package/src/useNavigationBuilder.tsx

@@ -46,6 +46,7 @@ import { useOnAction } from './useOnAction';
 import { useOnGetState } from './useOnGetState';
 import { useOnRouteFocus } from './useOnRouteFocus';
 import { useRegisterNavigator } from './useRegisterNavigator';
+import { useScheduleUpdate } from './useScheduleUpdate';
 
 // This is to make TypeScript compiler happy
 PrivateValueStore;
@@ -561,7 +562,7 @@ export function useNavigationBuilder<
 
   const shouldUpdate = state !== nextState;
 
-  useIsomorphicLayoutEffect(() => {
+  useScheduleUpdate(() => {
     if (shouldUpdate) {
       // If the state needs to be updated, we'll schedule an update
       setState(nextState);

package/src/useScheduleUpdate.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { NavigationBuilderContext } from './NavigationBuilderContext';
+/**
+ * When screen config changes, we want to update the navigator in the same update phase.
+ * However, navigation state is in the root component and React won't let us update it from a child.
+ * This is a workaround for that, the scheduled update is stored in the ref without actually calling setState.
+ * It lets all subsequent updates access the latest state so it stays correct.
+ * Then we call setState during after the component updates.
+ */
+export function useScheduleUpdate(callback: () => void) {
+  const { scheduleUpdate, flushUpdates } = React.useContext(
+    NavigationBuilderContext
+  );
+
+  // FIXME: This is potentially unsafe
+  // However, since we are using sync store, it might be fine
+  scheduleUpdate(callback);
+
+  React.useEffect(flushUpdates);
+}

package/src/useSyncState.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useLatestCallback from 'use-latest-callback';
 
 import { deepFreeze } from './deepFreeze';
 
@@ -19,10 +20,16 @@ const createStore = <T,>(getInitialState: () => T) => {
     return state;
   };
 
+  let isBatching = false;
+  let didUpdate = false;
+
   const setState = (newState: T) => {
     state = deepFreeze(newState);
+    didUpdate = true;
 
-    listeners.forEach((listener) => listener());
+    if (!isBatching) {
+      listeners.forEach((listener) => listener());
+    }
   };
 
   const subscribe = (callback: () => void) => {
@@ -37,9 +44,21 @@ const createStore = <T,>(getInitialState: () => T) => {
     };
   };
 
+  const batchUpdates = (callback: () => void) => {
+    isBatching = true;
+    callback();
+    isBatching = false;
+
+    if (didUpdate) {
+      didUpdate = false;
+      listeners.forEach((listener) => listener());
+    }
+  };
+
   return {
     getState,
     setState,
+    batchUpdates,
     subscribe,
   };
 };
@@ -55,5 +74,32 @@ export function useSyncState<T>(getInitialState: () => T) {
 
   React.useDebugValue(state);
 
-  return [state, store.getState, store.setState] as const;
+  const pendingUpdatesRef = React.useRef<(() => void)[]>([]);
+
+  const scheduleUpdate = useLatestCallback((callback: () => void) => {
+    pendingUpdatesRef.current.push(callback);
+  });
+
+  const flushUpdates = useLatestCallback(() => {
+    const pendingUpdates = pendingUpdatesRef.current;
+
+    pendingUpdatesRef.current = [];
+
+    if (pendingUpdates.length !== 0) {
+      store.batchUpdates(() => {
+        // Flush all the pending updates
+        for (const update of pendingUpdates) {
+          update();
+        }
+      });
+    }
+  });
+
+  return {
+    state,
+    getState: store.getState,
+    setState: store.setState,
+    scheduleUpdate,
+    flushUpdates,
+  } as const;
 }