@react-navigation/core 7.0.3 → 7.0.5

package/src/BaseNavigationContainer.tsx

@@ -103,9 +103,10 @@ export const BaseNavigationContainer = React.forwardRef(
       );
     }
 
-    const [state, getState, setState, scheduleUpdate] = 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);
 
@@ -261,6 +262,7 @@ export const BaseNavigationContainer = React.forwardRef(
         onDispatchAction,
         onOptionsChange,
         scheduleUpdate,
+        flushUpdates,
         stackRef,
       }),
       [
@@ -269,6 +271,7 @@ export const BaseNavigationContainer = React.forwardRef(
         onDispatchAction,
         onOptionsChange,
         scheduleUpdate,
+        flushUpdates,
       ]
     );
 

package/src/NavigationBuilderContext.tsx

@@ -62,6 +62,7 @@ export const NavigationBuilderContext = React.createContext<{
   onDispatchAction: (action: NavigationAction, noop: boolean) => void;
   onOptionsChange: (options: object) => void;
   scheduleUpdate: (callback: () => void) => void;
+  flushUpdates: () => void;
   stackRef?: React.MutableRefObject<string | undefined>;
 }>({
   onDispatchAction: () => undefined,
@@ -69,4 +70,7 @@ export const NavigationBuilderContext = React.createContext<{
   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/useDescriptors.tsx

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

package/src/useNavigationBuilder.tsx

@@ -18,7 +18,6 @@ import { deepFreeze } from './deepFreeze';
 import { Group } from './Group';
 import { isArrayEqual } from './isArrayEqual';
 import { isRecordEqual } from './isRecordEqual';
-import { NavigationBuilderContext } from './NavigationBuilderContext';
 import { NavigationHelpersContext } from './NavigationHelpersContext';
 import { NavigationRouteContext } from './NavigationRouteContext';
 import { NavigationStateContext } from './NavigationStateContext';
@@ -47,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;
@@ -560,17 +560,12 @@ export function useNavigationBuilder<
         : nextState;
   }
 
-  const { scheduleUpdate } = React.useContext(NavigationBuilderContext);
-
   const shouldUpdate = state !== nextState;
 
-  useIsomorphicLayoutEffect(() => {
+  useScheduleUpdate(() => {
     if (shouldUpdate) {
       // If the state needs to be updated, we'll schedule an update
-      // These updates will be batched and run in the reverse order
-      scheduleUpdate(() => {
-        setState(nextState);
-      });
+      setState(nextState);
     }
   });
 
@@ -614,7 +609,7 @@ export function useNavigationBuilder<
 
   useIsomorphicLayoutEffect(() => {
     stateRef.current = null;
-  }, []);
+  });
 
   const getState = useLatestCallback((): State => {
     if (stateRef.current != null) {

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import useLatestCallback from 'use-latest-callback';
 
 import { deepFreeze } from './deepFreeze';
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 
 const createStore = <T,>(getInitialState: () => T) => {
   const listeners: (() => void)[] = [];
@@ -81,8 +80,7 @@ export function useSyncState<T>(getInitialState: () => T) {
     pendingUpdatesRef.current.push(callback);
   });
 
-  useIsomorphicLayoutEffect(() => {
-    // Flush all the pending updates
+  const flushUpdates = useLatestCallback(() => {
     const pendingUpdates = pendingUpdatesRef.current;
 
     pendingUpdatesRef.current = [];
@@ -90,17 +88,18 @@ export function useSyncState<T>(getInitialState: () => T) {
     if (pendingUpdates.length !== 0) {
       store.batchUpdates(() => {
         // Flush all the pending updates
-        // These updates should be scheduled in useEffect
-        // Run them in reverse order so that the deepest updates are run last
-        // This is opposite to useEffect where the deepest effects are run first
-        for (let i = pendingUpdates.length - 1; i >= 0; i--) {
-          const update = pendingUpdates[i];
-
+        for (const update of pendingUpdates) {
           update();
         }
       });
     }
   });
 
-  return [state, store.getState, store.setState, scheduleUpdate] as const;
+  return {
+    state,
+    getState: store.getState,
+    setState: store.setState,
+    scheduleUpdate,
+    flushUpdates,
+  } as const;
 }