@react-navigation/core 8.0.0-alpha.4 → 8.0.0-alpha.41

package/src/ConsumedParamsContext.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export const ConsumedParamsContext = React.createContext<
+  WeakMap<object, true> | undefined
+>(undefined);

package/src/DataLoading.tsx

@@ -0,0 +1,206 @@
+import type { NavigationState, PartialState } from '@react-navigation/routers';
+
+import { getStateFromRouteParams } from './getStateFromRouteParams';
+import type { TreeForPathConfig } from './StaticNavigation';
+
+function findScreenInConfig(config: TreeForPathConfig['config'], name: string) {
+  const screens = config.screens;
+
+  if (screens?.[name] != null) {
+    return screens[name];
+  }
+
+  if (config.groups) {
+    for (const group of Object.values(config.groups)) {
+      if (group.screens[name] != null) {
+        return group.screens[name];
+      }
+    }
+  }
+
+  return undefined;
+}
+
+function findInitialRouteName(
+  config: TreeForPathConfig['config']
+): string | undefined {
+  if (config.initialRouteName != null) {
+    return config.initialRouteName;
+  }
+
+  for (const key in config) {
+    if (key === 'screens' && config.screens) {
+      const name = Object.keys(config.screens)[0];
+
+      if (name != null) {
+        return name;
+      }
+    }
+
+    if (key === 'groups' && config.groups) {
+      for (const group of Object.values(config.groups)) {
+        const name = Object.keys(group.screens)[0];
+
+        if (name != null) {
+          return name;
+        }
+      }
+    }
+  }
+
+  return undefined;
+}
+
+/**
+ * Get loader for the focused route in a static config tree with given navigation state.
+ *
+ * @param tree The static navigation config.
+ * @param state The navigation state to extract the focused route path from.
+ * @returns A function that returns a `Promise<void>`, or `undefined` if no loaders are found.
+ *
+ * @example
+ * ```js
+ * const loader = getLoaderForState(RootStack, {
+ *   index: 0,
+ *   routes: [{ name: 'Home' }],
+ * });
+ * await loader?.();
+ * ```
+ */
+export function getLoaderForState(
+  tree: TreeForPathConfig,
+  state: PartialState<NavigationState> | NavigationState | undefined
+): (() => Promise<void>) | undefined {
+  return getLoaderForStateChange(tree, state, undefined, undefined);
+}
+
+export function getLoaderForStateChange(
+  tree: TreeForPathConfig,
+  state: PartialState<NavigationState> | NavigationState | undefined,
+  previousState: PartialState<NavigationState> | NavigationState | undefined,
+  consumedParams: WeakMap<object, true> | undefined
+): (() => Promise<void>) | undefined {
+  const focusedRoute = state?.routes[state.index ?? state.routes.length - 1];
+  const previousFocusedRoute =
+    previousState?.routes[
+      previousState.index ?? previousState.routes.length - 1
+    ];
+
+  if (!focusedRoute) {
+    return undefined;
+  }
+
+  const isNewlyFocused =
+    previousState === undefined ||
+    previousFocusedRoute == null ||
+    focusedRoute.name !== previousFocusedRoute.name ||
+    (focusedRoute.key != null &&
+      previousFocusedRoute.key != null &&
+      focusedRoute.key !== previousFocusedRoute.key);
+
+  const item = findScreenInConfig(tree.config, focusedRoute.name);
+
+  if (item == null) {
+    return undefined;
+  }
+
+  const initialParams =
+    typeof item === 'object' && 'initialParams' in item
+      ? item.initialParams
+      : undefined;
+
+  const params =
+    initialParams != null || focusedRoute.params != null
+      ? { ...initialParams, ...focusedRoute.params }
+      : undefined;
+
+  const loaders: (() => Promise<void>)[] = [];
+
+  if (
+    isNewlyFocused &&
+    'UNSTABLE_loader' in item &&
+    typeof item.UNSTABLE_loader === 'function'
+  ) {
+    const loader = item.UNSTABLE_loader;
+
+    loaders.push(() =>
+      loader({
+        name: focusedRoute.name,
+        params,
+      })
+    );
+  }
+
+  const nested =
+    'config' in item
+      ? item
+      : 'screen' in item &&
+          // Nested navigators cannot be defined as a getter
+          Object.getOwnPropertyDescriptor(item, 'screen')?.get == null &&
+          'config' in item.screen
+        ? item.screen
+        : undefined;
+
+  if (nested) {
+    const initialRouteName = findInitialRouteName(nested.config);
+
+    const stateFromParams =
+      focusedRoute.params != null && consumedParams?.has(focusedRoute.params)
+        ? undefined
+        : getStateFromRouteParams(params);
+
+    let childState =
+      previousState !== undefined && stateFromParams != null
+        ? stateFromParams
+        : (focusedRoute.state ?? stateFromParams);
+
+    if (childState == null && initialRouteName != null) {
+      childState = { routes: [{ name: initialRouteName }] };
+    }
+
+    let previousChildState:
+      | PartialState<NavigationState>
+      | NavigationState
+      | undefined;
+
+    if (!isNewlyFocused) {
+      const previousRouteParams = previousFocusedRoute?.params;
+      const previousParams =
+        initialParams != null || previousRouteParams != null
+          ? { ...initialParams, ...previousRouteParams }
+          : undefined;
+      const previousStateFromParams =
+        previousRouteParams != null && consumedParams?.has(previousRouteParams)
+          ? undefined
+          : getStateFromRouteParams(previousParams);
+
+      previousChildState =
+        previousFocusedRoute?.state ?? previousStateFromParams;
+
+      if (previousChildState == null && initialRouteName != null) {
+        previousChildState = { routes: [{ name: initialRouteName }] };
+      }
+    }
+
+    const childLoader = getLoaderForStateChange(
+      nested,
+      childState,
+      previousState === undefined
+        ? undefined
+        : (previousChildState ?? { routes: [] }),
+      consumedParams
+    );
+
+    if (childLoader) {
+      loaders.push(childLoader);
+    }
+  }
+
+  if (loaders.length === 0) {
+    return undefined;
+  }
+
+  return async () => {
+    await Promise.all(loaders.map((l) => l()));
+  };
+}

package/src/NavigationBuilderContext.tsx

@@ -2,6 +2,7 @@ import type {
   NavigationAction,
   NavigationState,
   ParamListBase,
+  PartialState,
 } from '@react-navigation/routers';
 import * as React from 'react';
 
@@ -14,6 +15,7 @@ export type ListenerMap = {
 
 export type KeyedListenerMap = {
   getState: GetStateListener;
+  getNavigation: GetNavigationListener;
   beforeRemove: ChildBeforeRemoveListener;
 };
 
@@ -46,19 +48,26 @@ export type FocusedNavigationListener = <T>(
 
 export type GetStateListener = () => NavigationState;
 
-export type ChildBeforeRemoveListener = (action: NavigationAction) => boolean;
+export type GetNavigationListener = () => NavigationHelpers<ParamListBase>;
 
-/**
- * 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;
+export type WithStackTrace = (
+  entry: (...args: never[]) => void,
+  callback: () => void
+) => void;
+
+export type ChildBeforeRemoveListener = (
+  action: NavigationAction,
+  nextState: NavigationState | PartialState<NavigationState> | undefined
+) => boolean;
+
+type NavigationBuilderContextValue = {
+  canGoBack?: ((source?: string) => boolean) | undefined;
+  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;
@@ -66,18 +75,28 @@ export const NavigationBuilderContext = React.createContext<{
     target: string | undefined;
     data: unknown;
   }) => void;
-  onOptionsChange: (options: object) => void;
+  onOptionsChange: () => void;
+  getIsStateEmitted: () => boolean;
   scheduleUpdate: (callback: () => void) => void;
   flushUpdates: () => void;
-  stackRef?: React.MutableRefObject<string | undefined>;
-}>({
-  onDispatchAction: () => undefined,
-  onEmitEvent: () => 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.");
-  },
-});
+  withStackTrace: WithStackTrace;
+};
+
+/**
+ * Context which holds the required helpers needed to build nested navigators.
+ */
+export const NavigationBuilderContext = React.createContext<
+  NavigationBuilderContextValue | undefined
+>(undefined);
+
+export function useNavigationBuilderContext() {
+  const value = React.use(NavigationBuilderContext);
+
+  if (value == null) {
+    throw new Error(
+      "Couldn't find a navigation builder context. Is your component inside NavigationContainer?"
+    );
+  }
+
+  return value;
+}

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

@@ -1,12 +1,28 @@
 import * as React from 'react';
 
+import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { NavigationContainerRefContext } from './NavigationContainerRefContext';
+import { NavigationFocusedRouteStateContext } from './NavigationFocusedRouteStateContext';
+import { NavigationHelpersContext } from './NavigationHelpersContext';
 import { NavigationIndependentTreeContext } from './NavigationIndependentTreeContext';
 import {
+  IsScreenContext,
   NamedRouteContextListContext,
   NavigationContext,
   NavigationRouteContext,
-  NavigationRouteNameContext,
 } from './NavigationProvider';
+import { NavigationRootContext } from './NavigationRootContext';
+import { PreventRemoveContext } from './PreventRemoveContext';
+import { StaticTreeContext } from './StaticTreeContext';
+import {
+  FocusedRouteKeyContext,
+  IsFocusedContext,
+  IsFocusedGetterContext,
+} from './useIsFocused';
+import {
+  NamedNavigationStateListenerListContext,
+  NavigationStateListenerContext,
+} from './useNavigationState';
 
 /**
  * Component to make the child navigation container independent of parent containers.
@@ -18,16 +34,48 @@ export function NavigationIndependentTree({
 }) {
   return (
     // We need to clear any existing contexts for nested independent container to work correctly
-    <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>
-        </NavigationContext.Provider>
-      </NavigationRouteContext.Provider>
-    </NamedRouteContextListContext.Provider>
+    <NavigationIndependentTreeContext.Provider value={true}>
+      <NavigationContainerRefContext.Provider value={undefined}>
+        <NavigationRootContext.Provider value={undefined}>
+          <NavigationBuilderContext.Provider value={undefined}>
+            <StaticTreeContext.Provider value={undefined}>
+              <NavigationHelpersContext.Provider value={undefined}>
+                <NavigationStateListenerContext.Provider value={undefined}>
+                  <FocusedRouteKeyContext.Provider value={undefined}>
+                    <PreventRemoveContext.Provider value={undefined}>
+                      <NamedNavigationStateListenerListContext.Provider
+                        value={undefined}
+                      >
+                        <NamedRouteContextListContext.Provider
+                          value={undefined}
+                        >
+                          <NavigationRouteContext.Provider value={undefined}>
+                            <NavigationContext.Provider value={undefined}>
+                              <IsFocusedContext.Provider value={undefined}>
+                                <IsFocusedGetterContext.Provider
+                                  value={undefined}
+                                >
+                                  <IsScreenContext.Provider value={false}>
+                                    <NavigationFocusedRouteStateContext.Provider
+                                      value={undefined}
+                                    >
+                                      {children}
+                                    </NavigationFocusedRouteStateContext.Provider>
+                                  </IsScreenContext.Provider>
+                                </IsFocusedGetterContext.Provider>
+                              </IsFocusedContext.Provider>
+                            </NavigationContext.Provider>
+                          </NavigationRouteContext.Provider>
+                        </NamedRouteContextListContext.Provider>
+                      </NamedNavigationStateListenerListContext.Provider>
+                    </PreventRemoveContext.Provider>
+                  </FocusedRouteKeyContext.Provider>
+                </NavigationStateListenerContext.Provider>
+              </NavigationHelpersContext.Provider>
+            </StaticTreeContext.Provider>
+          </NavigationBuilderContext.Provider>
+        </NavigationRootContext.Provider>
+      </NavigationContainerRefContext.Provider>
+    </NavigationIndependentTreeContext.Provider>
   );
 }

package/src/NavigationProvider.tsx

@@ -1,8 +1,15 @@
 import type { ParamListBase, Route } from '@react-navigation/routers';
 import * as React from 'react';
+import useLatestCallback from 'use-latest-callback';
 
 import type { NavigationProp } from './types';
+import {
+  FocusedRouteKeyContext,
+  IsFocusedContext,
+  IsFocusedGetterContext,
+} from './useIsFocused';
 import { useLazyValue } from './useLazyValue';
+import { NamedNavigationStateListenerProvider } from './useNavigationState';
 
 /**
  * Context which holds the route prop for a screen.
@@ -18,15 +25,10 @@ export const NavigationContext = React.createContext<
   NavigationProp<ParamListBase> | undefined
 >(undefined);
 
-export const NavigationRouteNameContext = React.createContext<
-  string | undefined
->(undefined);
-
-type Props = {
-  route: Route<string>;
-  navigation: NavigationProp<ParamListBase>;
-  children: React.ReactNode;
-};
+/**
+ * Context which indicates whether the component is inside a screen.
+ */
+export const IsScreenContext = React.createContext(false);
 
 /**
  * Component to provide the navigation and route contexts to its children.
@@ -35,6 +37,12 @@ export const NamedRouteContextListContext = React.createContext<
   Record<string, React.Context<Route<string>>> | undefined
 >(undefined);
 
+type Props = {
+  route: Route<string>;
+  navigation: NavigationProp<ParamListBase>;
+  children: React.ReactNode;
+};
+
 export function NavigationProvider({ route, navigation, children }: Props) {
   const NamedRouteContext = useLazyValue(() => React.createContext(route));
 
@@ -48,17 +56,47 @@ export function NavigationProvider({ route, navigation, children }: Props) {
     [NamedRouteContext, parents, route.name]
   );
 
-  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>
-          </NavigationContext.Provider>
-        </NavigationRouteContext.Provider>
-      </NamedRouteContext.Provider>
-    </NamedRouteContextListContext.Provider>
+  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;
+
+  const getIsFocused = useLatestCallback(() => isFocused);
+
+  return React.useMemo(
+    () => (
+      <NamedNavigationStateListenerProvider name={route.name}>
+        <NamedRouteContextListContext.Provider value={NamedRouteContextList}>
+          <NamedRouteContext.Provider value={route}>
+            <NavigationRouteContext.Provider value={route}>
+              <NavigationContext.Provider value={navigation}>
+                <IsFocusedContext.Provider value={isFocused}>
+                  <IsFocusedGetterContext.Provider value={getIsFocused}>
+                    <IsScreenContext.Provider value={true}>
+                      {children}
+                    </IsScreenContext.Provider>
+                  </IsFocusedGetterContext.Provider>
+                </IsFocusedContext.Provider>
+              </NavigationContext.Provider>
+            </NavigationRouteContext.Provider>
+          </NamedRouteContext.Provider>
+        </NamedRouteContextListContext.Provider>
+      </NamedNavigationStateListenerProvider>
+    ),
+    [
+      NamedRouteContext,
+      NamedRouteContextList,
+      children,
+      getIsFocused,
+      isFocused,
+      navigation,
+      route,
+    ]
   );
 }

package/src/NavigationRootContext.tsx

@@ -0,0 +1,11 @@
+import type { ParamListBase } from '@react-navigation/routers';
+import * as React from 'react';
+
+import type { GenericNavigation } from './types';
+
+/**
+ * Context which holds the navigation object for components outside a screen.
+ */
+export const NavigationRootContext = React.createContext<
+  GenericNavigation<ParamListBase> | undefined
+>(undefined);

package/src/NavigationStateContext.tsx

@@ -5,19 +5,16 @@ 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;
   setState: (
     state: NavigationState | PartialState<NavigationState> | undefined
   ) => void;
+  subscribe: (callback: () => void) => () => void;
   getIsInitial: () => boolean;
-  addOptionsGetter?: (
-    key: string,
-    getter: () => object | undefined | null
-  ) => void;
 }>({
   isDefault: true,
 
@@ -33,6 +30,9 @@ export const NavigationStateContext = React.createContext<{
   get setState(): any {
     throw new Error(MISSING_CONTEXT_ERROR);
   },
+  get subscribe(): any {
+    throw new Error(MISSING_CONTEXT_ERROR);
+  },
   get getIsInitial(): any {
     throw new Error(MISSING_CONTEXT_ERROR);
   },

package/src/PreventRemoveContext.tsx

@@ -14,6 +14,7 @@ export const PreventRemoveContext = React.createContext<
         routeKey: string,
         preventRemove: boolean
       ) => void;
+      notifyPreventRemove: () => void;
     }
   | undefined
 >(undefined);