@react-navigation/core 6.4.8 → 7.0.0-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "6.4.8",
+  "version": "7.0.0-alpha.1",
   "keywords": [
     "react",
     "react-native",
@@ -35,23 +35,23 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^6.1.8",
+    "@react-navigation/routers": "^7.0.0-alpha.1",
     "escape-string-regexp": "^4.0.0",
     "nanoid": "^3.1.23",
     "query-string": "^7.1.3",
-    "react-is": "^16.13.0",
+    "react-is": "^18.2.0",
     "use-latest-callback": "^0.1.5"
   },
   "devDependencies": {
     "@testing-library/react-native": "^11.5.0",
-    "@types/react": "~18.0.0",
-    "@types/react-is": "^17.0.0",
-    "del-cli": "^3.0.1",
-    "immer": "^9.0.2",
-    "react": "18.0.0",
+    "@types/react": "~18.0.26",
+    "@types/react-is": "^17.0.3",
+    "del-cli": "^5.0.0",
+    "immer": "^9.0.16",
+    "react": "18.1.0",
     "react-native-builder-bob": "^0.20.4",
-    "react-test-renderer": "18.0.0",
-    "typescript": "^4.7.4"
+    "react-test-renderer": "18.1.0",
+    "typescript": "^4.9.4"
   },
   "peerDependencies": {
     "react": "*"
@@ -70,5 +70,5 @@
       ]
     ]
   },
-  "gitHead": "ba6380c93f945e4c586f5e17e618208ab603bf30"
+  "gitHead": "230c09deeeb886929a15cb4cdcb496372a9496e1"
 }

package/src/BaseNavigationContainer.tsx

@@ -8,29 +8,31 @@ 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 { checkDuplicateRouteNames } from './checkDuplicateRouteNames';
+import { checkSerializable } from './checkSerializable';
 import { NOT_INITIALIZED_ERROR } from './createNavigationContainerRef';
-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 NavigationStateContext from './NavigationStateContext';
+import { DeprecatedNavigationInChildContext } from './DeprecatedNavigationInChildContext';
+import { EnsureSingleNavigator } from './EnsureSingleNavigator';
+import { findFocusedRoute } from './findFocusedRoute';
+import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { NavigationContainerRefContext } from './NavigationContainerRefContext';
+import { NavigationIndependentTreeContext } from './NavigationIndependentTreeContext';
+import { NavigationStateContext } from './NavigationStateContext';
 import type {
   NavigationContainerEventMap,
   NavigationContainerProps,
   NavigationContainerRef,
 } from './types';
-import UnhandledActionContext from './UnhandledActionContext';
-import useChildListeners from './useChildListeners';
-import useEventEmitter from './useEventEmitter';
-import useKeyedChildListeners from './useKeyedChildListeners';
-import useOptionsGetters from './useOptionsGetters';
+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';
+import { useSyncState } from './useSyncState';
 
 type State = NavigationState | PartialState<NavigationState> | undefined;
 
@@ -72,26 +74,30 @@ 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.
  */
-const BaseNavigationContainer = React.forwardRef(
+export const BaseNavigationContainer = React.forwardRef(
   function BaseNavigationContainer(
     {
       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,39 +427,29 @@ 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;
   }
 );
-
-export default BaseNavigationContainer;

package/src/CurrentRenderContext.tsx

@@ -4,8 +4,6 @@ import * as React from 'react';
  * Context which holds the values for the current navigation tree.
  * Intended for use in SSR. This is not safe to use on the client.
  */
-const CurrentRenderContext = React.createContext<
+export const CurrentRenderContext = React.createContext<
   { options?: object } | undefined
 >(undefined);
-
-export default CurrentRenderContext;

package/src/DeprecatedNavigationInChildContext.tsx

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

package/src/EnsureSingleNavigator.tsx

@@ -17,7 +17,7 @@ export const SingleNavigatorContext = React.createContext<
 /**
  * Component which ensures that there's only one navigator nested under it.
  */
-export default function EnsureSingleNavigator({ children }: Props) {
+export function EnsureSingleNavigator({ children }: Props) {
   const navigatorKeyRef = React.useRef<string | undefined>();
 
   const value = React.useMemo(

package/src/Group.tsx

@@ -5,7 +5,7 @@ import type { RouteGroupConfig } from './types';
 /**
  * Empty component used for grouping screen configs.
  */
-export default function Group<
+export function Group<
   ParamList extends ParamListBase,
   ScreenOptions extends {}
 >(_: RouteGroupConfig<ParamList, ScreenOptions>) {

package/src/NavigationBuilderContext.tsx

@@ -51,7 +51,7 @@ export type ChildBeforeRemoveListener = (action: NavigationAction) => boolean;
 /**
  * Context which holds the required helpers needed to build nested navigators.
  */
-const NavigationBuilderContext = React.createContext<{
+export const NavigationBuilderContext = React.createContext<{
   onAction?: (
     action: NavigationAction,
     visitedNavigators?: Set<string>
@@ -66,5 +66,3 @@ const NavigationBuilderContext = React.createContext<{
   onDispatchAction: () => undefined,
   onOptionsChange: () => undefined,
 });
-
-export default NavigationBuilderContext;

package/src/NavigationContainerRefContext.tsx

@@ -6,8 +6,6 @@ import type { NavigationContainerRef } from './types';
 /**
  * Context which holds the route prop for a screen.
  */
-const NavigationContainerRefContext = React.createContext<
+export const NavigationContainerRefContext = React.createContext<
   NavigationContainerRef<ParamListBase> | undefined
 >(undefined);
-
-export default NavigationContainerRefContext;

package/src/NavigationContext.tsx

@@ -6,8 +6,6 @@ import type { NavigationProp } from './types';
 /**
  * Context which holds the navigation prop for a screen.
  */
-const NavigationContext = React.createContext<
+export const NavigationContext = React.createContext<
   NavigationProp<ParamListBase> | undefined
 >(undefined);
-
-export default NavigationContext;

package/src/NavigationHelpersContext.tsx

@@ -7,8 +7,6 @@ import type { NavigationHelpers } from './types';
  * Context which holds the navigation helpers of the parent navigator.
  * Navigators should use this context in their view component.
  */
-const NavigationHelpersContext = React.createContext<
+export const NavigationHelpersContext = React.createContext<
   NavigationHelpers<ParamListBase> | undefined
 >(undefined);
-
-export default NavigationHelpersContext;

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 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,6 @@
+import * as React from 'react';
+
+/**
+ * Context which marks the navigation tree as independent.
+ */
+export const NavigationIndependentTreeContext = React.createContext(false);

package/src/NavigationRouteContext.tsx

@@ -4,8 +4,6 @@ import * as React from 'react';
 /**
  * Context which holds the route prop for a screen.
  */
-const NavigationRouteContext = React.createContext<Route<string> | undefined>(
-  undefined
-);
-
-export default NavigationRouteContext;
+export const NavigationRouteContext = React.createContext<
+  Route<string> | undefined
+>(undefined);

package/src/NavigationStateContext.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 const MISSING_CONTEXT_ERROR =
   "Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.";
 
-export default React.createContext<{
+export const NavigationStateContext = React.createContext<{
   isDefault?: true;
   state?: NavigationState | PartialState<NavigationState>;
   getKey: () => string | undefined;

package/src/PreventRemoveContext.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
  */
 export type PreventedRoutes = Record<string, { preventRemove: boolean }>;
 
-const PreventRemoveContext = React.createContext<
+export const PreventRemoveContext = React.createContext<
   | {
       preventedRoutes: PreventedRoutes;
       setPreventRemove: (
@@ -17,5 +17,3 @@ const PreventRemoveContext = React.createContext<
     }
   | undefined
 >(undefined);
-
-export default PreventRemoveContext;

package/src/PreventRemoveProvider.tsx

@@ -2,9 +2,9 @@ import { nanoid } from 'nanoid/non-secure';
 import * as React from 'react';
 import useLatestCallback from 'use-latest-callback';
 
-import NavigationHelpersContext from './NavigationHelpersContext';
-import NavigationRouteContext from './NavigationRouteContext';
-import PreventRemoveContext, { PreventedRoutes } from './PreventRemoveContext';
+import { NavigationHelpersContext } from './NavigationHelpersContext';
+import { NavigationRouteContext } from './NavigationRouteContext';
+import { PreventedRoutes, PreventRemoveContext } from './PreventRemoveContext';
 
 type Props = {
   children: React.ReactNode;
@@ -42,7 +42,7 @@ const transformPreventedRoutes = (
 /**
  * Component used for managing which routes have to be prevented from removal in native-stack.
  */
-export default function PreventRemoveProvider({ children }: Props) {
+export function PreventRemoveProvider({ children }: Props) {
   const [parentId] = React.useState(() => nanoid());
   const [preventedRoutesMap, setPreventedRoutesMap] =
     React.useState<PreventedRoutesMap>(new Map());

package/src/SceneView.tsx

@@ -6,11 +6,11 @@ import type {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
-import EnsureSingleNavigator from './EnsureSingleNavigator';
-import NavigationStateContext from './NavigationStateContext';
-import StaticContainer from './StaticContainer';
+import { EnsureSingleNavigator } from './EnsureSingleNavigator';
+import { NavigationStateContext } from './NavigationStateContext';
+import { StaticContainer } from './StaticContainer';
 import type { NavigationProp, RouteConfigComponent } from './types';
-import useOptionsGetters from './useOptionsGetters';
+import { useOptionsGetters } from './useOptionsGetters';
 
 type Props<State extends NavigationState, ScreenOptions extends {}> = {
   screen: RouteConfigComponent<ParamListBase, string> & { name: string };
@@ -33,7 +33,7 @@ type Props<State extends NavigationState, ScreenOptions extends {}> = {
  * Component which takes care of rendering the screen for a route.
  * It provides all required contexts and applies optimizations when applicable.
  */
-export default function SceneView<
+export function SceneView<
   State extends NavigationState,
   ScreenOptions extends {}
 >({

package/src/Screen.tsx

@@ -5,7 +5,7 @@ import type { EventMapBase, RouteConfig } from './types';
 /**
  * Empty component used for specifying route configuration.
  */
-export default function Screen<
+export function Screen<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList,
   State extends NavigationState,

package/src/StaticContainer.tsx

@@ -3,27 +3,28 @@ import * as React from 'react';
 /**
  * Component which prevents updates for children if no props changed
  */
-function StaticContainer(props: any) {
-  return props.children;
-}
+export const StaticContainer = React.memo(
+  function StaticContainer(props: any) {
+    return props.children;
+  },
+  (prevProps: any, nextProps: any) => {
+    const prevPropKeys = Object.keys(prevProps);
+    const nextPropKeys = Object.keys(nextProps);
 
-export default React.memo(StaticContainer, (prevProps: any, nextProps: any) => {
-  const prevPropKeys = Object.keys(prevProps);
-  const nextPropKeys = Object.keys(nextProps);
+    if (prevPropKeys.length !== nextPropKeys.length) {
+      return false;
+    }
 
-  if (prevPropKeys.length !== nextPropKeys.length) {
-    return false;
-  }
+    for (const key of prevPropKeys) {
+      if (key === 'children') {
+        continue;
+      }
 
-  for (const key of prevPropKeys) {
-    if (key === 'children') {
-      continue;
+      if (prevProps[key] !== nextProps[key]) {
+        return false;
+      }
     }
 
-    if (prevProps[key] !== nextProps[key]) {
-      return false;
-    }
+    return true;
   }
-
-  return true;
-});
+);