@react-navigation/core 8.0.0-alpha.2 → 8.0.0-alpha.21

package/src/ConsumedParamsContext.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+type ConsumedParamsContextValue = {
+  isConsumed: (params: object) => boolean;
+  setConsumed: (params: object) => void;
+};
+
+export const ConsumedParamsContext = React.createContext<
+  ConsumedParamsContextValue | undefined
+>(undefined);

package/src/NavigationBuilderContext.tsx

@@ -52,20 +52,26 @@ export type ChildBeforeRemoveListener = (action: NavigationAction) => boolean;
  * Context which holds the required helpers needed to build nested navigators.
  */
 export const NavigationBuilderContext = React.createContext<{
-  onAction?: (
-    action: NavigationAction,
-    visitedNavigators?: Set<string>
-  ) => boolean;
-  addListener?: AddListener;
-  addKeyedListener?: AddKeyedListener;
-  onRouteFocus?: (key: string) => void;
+  onAction?:
+    | ((action: NavigationAction, visitedNavigators?: Set<string>) => boolean)
+    | undefined;
+  addListener?: AddListener | undefined;
+  addKeyedListener?: AddKeyedListener | undefined;
+  onRouteFocus?: ((key: string) => void) | undefined;
   onDispatchAction: (action: NavigationAction, noop: boolean) => void;
+  onEmitEvent: (event: {
+    type: string;
+    defaultPrevented: boolean | undefined;
+    target: string | undefined;
+    data: unknown;
+  }) => void;
   onOptionsChange: (options: object) => void;
   scheduleUpdate: (callback: () => void) => void;
   flushUpdates: () => void;
-  stackRef?: React.MutableRefObject<string | undefined>;
+  stackRef?: React.MutableRefObject<string | undefined> | undefined;
 }>({
   onDispatchAction: () => undefined,
+  onEmitEvent: () => undefined,
   onOptionsChange: () => undefined,
   scheduleUpdate: () => {
     throw new Error("Couldn't find a context for scheduling updates.");

package/src/NavigationFocusedRouteStateContext.tsx

@@ -3,11 +3,11 @@ import * as React from 'react';
 export type FocusedRouteState = {
   routes: [
     {
-      key?: string;
+      key?: string | undefined;
       name: string;
-      params?: object;
-      path?: string;
-      state?: FocusedRouteState;
+      params?: object | undefined;
+      path?: string | undefined;
+      state?: FocusedRouteState | undefined;
     },
   ];
 };

package/src/NavigationIndependentTree.tsx

@@ -7,6 +7,7 @@ import {
   NavigationRouteContext,
   NavigationRouteNameContext,
 } from './NavigationProvider';
+import { IsFocusedContext } from './useIsFocused';
 
 /**
  * Component to make the child navigation container independent of parent containers.
@@ -21,11 +22,13 @@ export function NavigationIndependentTree({
     <NamedRouteContextListContext.Provider value={undefined}>
       <NavigationRouteContext.Provider value={undefined}>
         <NavigationContext.Provider value={undefined}>
-          <NavigationRouteNameContext.Provider value={undefined}>
-            <NavigationIndependentTreeContext.Provider value={true}>
-              {children}
-            </NavigationIndependentTreeContext.Provider>
-          </NavigationRouteNameContext.Provider>
+          <IsFocusedContext.Provider value={undefined}>
+            <NavigationRouteNameContext.Provider value={undefined}>
+              <NavigationIndependentTreeContext.Provider value={true}>
+                {children}
+              </NavigationIndependentTreeContext.Provider>
+            </NavigationRouteNameContext.Provider>
+          </IsFocusedContext.Provider>
         </NavigationContext.Provider>
       </NavigationRouteContext.Provider>
     </NamedRouteContextListContext.Provider>

package/src/NavigationProvider.tsx

@@ -2,6 +2,7 @@ import type { ParamListBase, Route } from '@react-navigation/routers';
 import * as React from 'react';
 
 import type { NavigationProp } from './types';
+import { FocusedRouteKeyContext, IsFocusedContext } from './useIsFocused';
 import { useLazyValue } from './useLazyValue';
 
 /**
@@ -48,14 +49,27 @@ export function NavigationProvider({ route, navigation, children }: Props) {
     [NamedRouteContext, parents, route.name]
   );
 
+  const parentIsFocused = React.use(IsFocusedContext);
+  const focusedRouteKey = React.use(FocusedRouteKeyContext);
+
+  // Mark route as focused only if:
+  // - It doesn't have a parent navigator
+  // - Parent navigator is focused
+  const isFocused =
+    parentIsFocused == null || parentIsFocused
+      ? focusedRouteKey === route.key
+      : false;
+
   return (
     <NamedRouteContextListContext.Provider value={NamedRouteContextList}>
       <NamedRouteContext.Provider value={route}>
         <NavigationRouteContext.Provider value={route}>
           <NavigationContext.Provider value={navigation}>
-            <NavigationRouteNameContext.Provider value={route.name}>
-              {children}
-            </NavigationRouteNameContext.Provider>
+            <IsFocusedContext.Provider value={isFocused}>
+              <NavigationRouteNameContext.Provider value={route.name}>
+                {children}
+              </NavigationRouteNameContext.Provider>
+            </IsFocusedContext.Provider>
           </NavigationContext.Provider>
         </NavigationRouteContext.Provider>
       </NamedRouteContext.Provider>

package/src/NavigationStateContext.tsx

@@ -5,8 +5,8 @@ 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 const NavigationStateContext = React.createContext<{
-  isDefault?: true;
-  state?: NavigationState | PartialState<NavigationState>;
+  isDefault?: true | undefined;
+  state?: NavigationState | PartialState<NavigationState> | undefined;
   getKey: () => string | undefined;
   setKey: (key: string) => void;
   getState: () => NavigationState | PartialState<NavigationState> | undefined;
@@ -14,10 +14,9 @@ export const NavigationStateContext = React.createContext<{
     state: NavigationState | PartialState<NavigationState> | undefined
   ) => void;
   getIsInitial: () => boolean;
-  addOptionsGetter?: (
-    key: string,
-    getter: () => object | undefined | null
-  ) => void;
+  addOptionsGetter?:
+    | ((key: string, getter: () => object | undefined | null) => void)
+    | undefined;
 }>({
   isDefault: true,
 

package/src/PreventRemoveProvider.tsx

@@ -50,10 +50,10 @@ export function PreventRemoveProvider({ children }: Props) {
   const [preventedRoutesMap, setPreventedRoutesMap] =
     React.useState<PreventedRoutesMap>(() => new Map());
 
-  const navigation = React.useContext(NavigationHelpersContext);
-  const route = React.useContext(NavigationRouteContext);
+  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;
 

package/src/SceneView.tsx

@@ -6,6 +6,7 @@ import type {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
+import { ConsumedParamsContext } from './ConsumedParamsContext';
 import { EnsureSingleNavigator } from './EnsureSingleNavigator';
 import { isArrayEqual } from './isArrayEqual';
 import {
@@ -70,46 +71,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,10 +105,39 @@ export function SceneView<
 
   const getIsInitial = React.useCallback(() => isInitialRef.current, []);
 
-  const parentFocusedRouteState = React.useContext(
-    NavigationFocusedRouteStateContext
+  const [consumedParams, setConsumedParams] = React.useState<WeakMap<
+    object,
+    true
+  > | null>(null);
+
+  const consumedParamsContext = React.useMemo(
+    () => ({
+      isConsumed: (params: object) => {
+        if (consumedParams) {
+          return consumedParams.has(params);
+        }
+
+        return false;
+      },
+      setConsumed: (params: object) => {
+        setConsumedParams((prev) => {
+          if (prev && prev.has(params)) {
+            return prev;
+          }
+
+          const map = new WeakMap<object, true>();
+
+          map.set(params, true);
+
+          return map;
+        });
+      },
+    }),
+    [consumedParams]
   );
 
+  const parentFocusedRouteState = React.use(NavigationFocusedRouteStateContext);
+
   const focusedRouteState = React.useMemo(() => {
     const state: FocusedRouteState = {
       routes: [
@@ -205,23 +205,25 @@ export function SceneView<
     : screen.component;
 
   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>
-      </NavigationFocusedRouteStateContext.Provider>
-    </NavigationStateContext.Provider>
+    <ConsumedParamsContext.Provider value={consumedParamsContext}>
+      <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>
+        </NavigationFocusedRouteStateContext.Provider>
+      </NavigationStateContext.Provider>
+    </ConsumedParamsContext.Provider>
   );
 }