@react-navigation/core 6.4.5 → 7.0.0-alpha.0

package/src/BaseNavigationContainer.tsx

@@ -8,16 +8,17 @@ import {
   Route,
 } from '@react-navigation/routers';
 import * as React from 'react';
+import useLatestCallback from 'use-latest-callback';
 
 import checkDuplicateRouteNames from './checkDuplicateRouteNames';
 import checkSerializable from './checkSerializable';
 import { NOT_INITIALIZED_ERROR } from './createNavigationContainerRef';
+import DeprecatedNavigationInChildContext from './DeprecatedNavigationInChildContext';
 import EnsureSingleNavigator from './EnsureSingleNavigator';
 import findFocusedRoute from './findFocusedRoute';
 import NavigationBuilderContext from './NavigationBuilderContext';
 import NavigationContainerRefContext from './NavigationContainerRefContext';
-import NavigationContext from './NavigationContext';
-import NavigationRouteContext from './NavigationRouteContext';
+import NavigationIndependentTreeContext from './NavigationIndependentTreeContext';
 import NavigationStateContext from './NavigationStateContext';
 import type {
   NavigationContainerEventMap,
@@ -28,6 +29,7 @@ import UnhandledActionContext from './UnhandledActionContext';
 import useChildListeners from './useChildListeners';
 import useEventEmitter from './useEventEmitter';
 import useKeyedChildListeners from './useKeyedChildListeners';
+import useNavigationIndependentTree from './useNavigationIndependentTree';
 import useOptionsGetters from './useOptionsGetters';
 import { ScheduleUpdateContext } from './useScheduleUpdate';
 import useSyncState from './useSyncState';
@@ -72,7 +74,9 @@ const getPartialState = (
  * This should be rendered at the root wrapping the whole app.
  *
  * @param props.initialState Initial state object for the navigation tree.
+ * @param props.onReady Callback which is called after the navigation tree mounts.
  * @param props.onStateChange Callback which is called with the latest navigation state when it changes.
+ * @param props.onUnhandledAction Callback which is called when an action is not handled.
  * @param props.children Child elements to render the content.
  * @param props.ref Ref object which refers to the navigation object containing helper methods.
  */
@@ -81,17 +85,19 @@ const BaseNavigationContainer = React.forwardRef(
     {
       initialState,
       onStateChange,
+      onReady,
       onUnhandledAction,
-      independent,
+      navigationInChildEnabled = false,
       children,
     }: NavigationContainerProps,
     ref?: React.Ref<NavigationContainerRef<ParamListBase>>
   ) {
     const parent = React.useContext(NavigationStateContext);
+    const independent = useNavigationIndependentTree();
 
     if (!parent.isDefault && !independent) {
       throw new Error(
-        "Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them."
+        "Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, wrap the container in 'NavigationIndependentTree' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them."
       );
     }
 
@@ -114,7 +120,7 @@ const BaseNavigationContainer = React.forwardRef(
 
     const { keyedListeners, addKeyedListener } = useKeyedChildListeners();
 
-    const dispatch = React.useCallback(
+    const dispatch = useLatestCallback(
       (
         action:
           | NavigationAction
@@ -125,11 +131,10 @@ const BaseNavigationContainer = React.forwardRef(
         } else {
           listeners.focus[0]((navigation) => navigation.dispatch(action));
         }
-      },
-      [listeners.focus]
+      }
     );
 
-    const canGoBack = React.useCallback(() => {
+    const canGoBack = useLatestCallback(() => {
       if (listeners.focus[0] == null) {
         return false;
       }
@@ -143,9 +148,9 @@ const BaseNavigationContainer = React.forwardRef(
       } else {
         return false;
       }
-    }, [listeners.focus]);
+    });
 
-    const resetRoot = React.useCallback(
+    const resetRoot = useLatestCallback(
       (state?: PartialState<NavigationState> | NavigationState) => {
         const target = state?.key ?? keyedListeners.getState.root?.().key;
 
@@ -159,15 +164,14 @@ const BaseNavigationContainer = React.forwardRef(
             })
           );
         }
-      },
-      [keyedListeners.getState, listeners.focus]
+      }
     );
 
-    const getRootState = React.useCallback(() => {
+    const getRootState = useLatestCallback(() => {
       return keyedListeners.getState.root?.();
-    }, [keyedListeners.getState]);
+    });
 
-    const getCurrentRoute = React.useCallback(() => {
+    const getCurrentRoute = useLatestCallback(() => {
       const state = getRootState();
 
       if (state == null) {
@@ -177,7 +181,9 @@ const BaseNavigationContainer = React.forwardRef(
       const route = findFocusedRoute(state);
 
       return route as Route<string> | undefined;
-    }, [getRootState]);
+    });
+
+    const isReady = useLatestCallback(() => listeners.focus[0] != null);
 
     const emitter = useEventEmitter<NavigationContainerEventMap>();
 
@@ -201,7 +207,7 @@ const BaseNavigationContainer = React.forwardRef(
         getRootState,
         getCurrentRoute,
         getCurrentOptions,
-        isReady: () => listeners.focus[0] != null,
+        isReady,
       }),
       [
         canGoBack,
@@ -210,40 +216,36 @@ const BaseNavigationContainer = React.forwardRef(
         getCurrentOptions,
         getCurrentRoute,
         getRootState,
-        listeners.focus,
+        isReady,
         resetRoot,
       ]
     );
 
     React.useImperativeHandle(ref, () => navigation, [navigation]);
 
-    const onDispatchAction = React.useCallback(
+    const onDispatchAction = useLatestCallback(
       (action: NavigationAction, noop: boolean) => {
         emitter.emit({
           type: '__unsafe_action__',
           data: { action, noop, stack: stackRef.current },
         });
-      },
-      [emitter]
+      }
     );
 
     const lastEmittedOptionsRef = React.useRef<object | undefined>();
 
-    const onOptionsChange = React.useCallback(
-      (options: object) => {
-        if (lastEmittedOptionsRef.current === options) {
-          return;
-        }
+    const onOptionsChange = useLatestCallback((options: object) => {
+      if (lastEmittedOptionsRef.current === options) {
+        return;
+      }
 
-        lastEmittedOptionsRef.current = options;
+      lastEmittedOptionsRef.current = options;
 
-        emitter.emit({
-          type: 'options',
-          data: { options },
-        });
-      },
-      [emitter]
-    );
+      emitter.emit({
+        type: 'options',
+        data: { options },
+      });
+    });
 
     const stackRef = React.useRef<string | undefined>();
 
@@ -288,15 +290,25 @@ const BaseNavigationContainer = React.forwardRef(
       ]
     );
 
+    const onReadyRef = React.useRef(onReady);
     const onStateChangeRef = React.useRef(onStateChange);
     const stateRef = React.useRef(state);
 
     React.useEffect(() => {
       isInitialRef.current = false;
       onStateChangeRef.current = onStateChange;
+      onReadyRef.current = onReady;
       stateRef.current = state;
     });
 
+    const isNavigationReady = isReady();
+
+    React.useEffect(() => {
+      if (isNavigationReady) {
+        onReadyRef.current?.();
+      }
+    }, [isNavigationReady]);
+
     React.useEffect(() => {
       const hydratedState = getRootState();
 
@@ -376,7 +388,7 @@ const BaseNavigationContainer = React.forwardRef(
       isFirstMountRef.current = false;
     }, [getRootState, emitter, state]);
 
-    const defaultOnUnhandledAction = React.useCallback(
+    const defaultOnUnhandledAction = useLatestCallback(
       (action: NavigationAction) => {
         if (process.env.NODE_ENV === 'production') {
           return;
@@ -415,38 +427,30 @@ const BaseNavigationContainer = React.forwardRef(
         message += `\n\nThis is a development-only warning and won't be shown in production.`;
 
         console.error(message);
-      },
-      []
+      }
     );
 
-    let element = (
-      <NavigationContainerRefContext.Provider value={navigation}>
-        <ScheduleUpdateContext.Provider value={scheduleContext}>
-          <NavigationBuilderContext.Provider value={builderContext}>
-            <NavigationStateContext.Provider value={context}>
-              <UnhandledActionContext.Provider
-                value={onUnhandledAction ?? defaultOnUnhandledAction}
-              >
-                <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
-              </UnhandledActionContext.Provider>
-            </NavigationStateContext.Provider>
-          </NavigationBuilderContext.Provider>
-        </ScheduleUpdateContext.Provider>
-      </NavigationContainerRefContext.Provider>
+    return (
+      <NavigationIndependentTreeContext.Provider value={false}>
+        <NavigationContainerRefContext.Provider value={navigation}>
+          <ScheduleUpdateContext.Provider value={scheduleContext}>
+            <NavigationBuilderContext.Provider value={builderContext}>
+              <NavigationStateContext.Provider value={context}>
+                <UnhandledActionContext.Provider
+                  value={onUnhandledAction ?? defaultOnUnhandledAction}
+                >
+                  <DeprecatedNavigationInChildContext.Provider
+                    value={navigationInChildEnabled}
+                  >
+                    <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
+                  </DeprecatedNavigationInChildContext.Provider>
+                </UnhandledActionContext.Provider>
+              </NavigationStateContext.Provider>
+            </NavigationBuilderContext.Provider>
+          </ScheduleUpdateContext.Provider>
+        </NavigationContainerRefContext.Provider>
+      </NavigationIndependentTreeContext.Provider>
     );
-
-    if (independent) {
-      // We need to clear any existing contexts for nested independent container to work correctly
-      element = (
-        <NavigationRouteContext.Provider value={undefined}>
-          <NavigationContext.Provider value={undefined}>
-            {element}
-          </NavigationContext.Provider>
-        </NavigationRouteContext.Provider>
-      );
-    }
-
-    return element;
   }
 );
 

package/src/DeprecatedNavigationInChildContext.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+/**
+ * Context which enables deprecated bubbling to child navigators.
+ */
+const DeprecatedNavigationInChildContext = React.createContext(false);
+
+export default DeprecatedNavigationInChildContext;

package/src/NavigationIndependentTree.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import NavigationContext from './NavigationContext';
+import NavigationIndependentTreeContext from './NavigationIndependentTreeContext';
+import NavigationRouteContext from './NavigationRouteContext';
+
+/**
+ * Component to make the child navigation container independent of parent containers.
+ */
+export default function NavigationIndependentTree({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    // We need to clear any existing contexts for nested independent container to work correctly
+    <NavigationRouteContext.Provider value={undefined}>
+      <NavigationContext.Provider value={undefined}>
+        <NavigationIndependentTreeContext.Provider value>
+          {children}
+        </NavigationIndependentTreeContext.Provider>
+      </NavigationContext.Provider>
+    </NavigationRouteContext.Provider>
+  );
+}

package/src/NavigationIndependentTreeContext.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+/**
+ * Context which marks the navigation tree as independent.
+ */
+const NavigationIndependentTreeContext = React.createContext(false);
+
+export default NavigationIndependentTreeContext;