@react-navigation/core 7.0.0-alpha.4 → 7.0.0-alpha.5

package/src/StaticNavigation.tsx

@@ -49,7 +49,7 @@ type ParamsForScreen<T> = T extends { screen: StaticNavigation<any, any, any> }
   ? NavigatorScreenParams<StaticParamList<T>> | undefined
   : UnknownToUndefined<ParamsForScreenComponent<T>>;
 
-type ParamListForScreens<Screens extends unknown> = {
+type ParamListForScreens<Screens> = {
   [Key in KeysOf<Screens>]: ParamsForScreen<Screens[Key]>;
 };
 
@@ -65,7 +65,7 @@ type ParamListForGroups<
           >;
         };
       }>
-    | undefined
+    | undefined,
 > = Groups extends {
   [key: string]: {
     screens: StaticConfigScreens<
@@ -83,7 +83,7 @@ type StaticConfigScreens<
   ParamList extends ParamListBase,
   State extends NavigationState,
   ScreenOptions extends {},
-  EventMap extends EventMapBase
+  EventMap extends EventMapBase,
 > = {
   [key in keyof ParamList]:
     | React.ComponentType<any>
@@ -129,7 +129,7 @@ type GroupConfig<
   ParamList extends ParamListBase,
   State extends NavigationState,
   ScreenOptions extends {},
-  EventMap extends EventMapBase
+  EventMap extends EventMapBase,
 > = Omit<RouteGroupConfig<ParamList, ScreenOptions>, 'screens' | 'children'> & {
   /**
    * Callback to determine whether the screens in the group should be rendered or not.
@@ -147,7 +147,7 @@ export type StaticConfig<
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends EventMapBase,
-  Navigator extends React.ComponentType<{}>
+  Navigator extends React.ComponentType<{}>,
 > = Omit<
   Omit<
     React.ComponentProps<Navigator>,
@@ -196,7 +196,7 @@ export type StaticParamList<
         };
       };
     };
-  }
+  },
 > = FlatType<
   ParamListForScreens<T['config']['screens']> &
     ParamListForGroups<T['config']['groups']>
@@ -263,7 +263,7 @@ const getItemsFromScreens = (
       );
     }
 
-    let element = isNavigator ? (
+    const element = isNavigator ? (
       React.createElement(component, {})
     ) : (
       <MemoizedScreen component={component} />

package/src/checkDuplicateRouteNames.tsx

@@ -7,7 +7,7 @@ export function checkDuplicateRouteNames(state: NavigationState) {
     location: string,
     state: NavigationState | PartialState<NavigationState>
   ) => {
-    state.routes.forEach((route: typeof state.routes[0]) => {
+    state.routes.forEach((route: (typeof state.routes)[0]) => {
       const currentLocation = location
         ? `${location} > ${route.name}`
         : route.name;

package/src/createNavigationContainerRef.tsx

@@ -10,7 +10,7 @@ export const NOT_INITIALIZED_ERROR =
   "The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. See https://reactnavigation.org/docs/navigating-without-navigation-prop#handling-initialization for more details.";
 
 export function createNavigationContainerRef<
-  ParamList extends {} = ReactNavigation.RootParamList
+  ParamList extends {} = ReactNavigation.RootParamList,
 >(): NavigationContainerRefWithCurrent<ParamList> {
   const methods = [
     ...Object.keys(CommonActions),

package/src/createNavigatorFactory.tsx

@@ -17,7 +17,7 @@ export function createNavigatorFactory<
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends EventMapBase,
-  NavigatorComponent extends React.ComponentType<any>
+  NavigatorComponent extends React.ComponentType<any>,
 >(Navigator: NavigatorComponent) {
   function createNavigator<ParamList extends ParamListBase>(): TypedNavigator<
     ParamList,
@@ -27,7 +27,6 @@ export function createNavigatorFactory<
     typeof Navigator
   >;
 
-  // eslint-disable-next-line no-redeclare
   function createNavigator<
     ParamList extends ParamListBase,
     Config extends StaticConfig<
@@ -36,7 +35,7 @@ export function createNavigatorFactory<
       ScreenOptions,
       EventMap,
       typeof Navigator
-    >
+    >,
   >(
     config: Config
   ): TypedNavigator<
@@ -47,7 +46,6 @@ export function createNavigatorFactory<
     typeof Navigator
   > & { config: Config };
 
-  // eslint-disable-next-line no-redeclare
   function createNavigator(config?: any): any {
     if (config != null) {
       return {

package/src/getActionFromState.tsx

@@ -65,7 +65,7 @@ export function getActionFromState(
   let config: ConfigItem | undefined = normalizedConfig?.screens?.[route?.name];
   let params = { ...route.params } as NavigatorScreenParams<ParamListBase>;
 
-  let payload = route
+  const payload = route
     ? { name: route.name, path: route.path, params }
     : undefined;
 

package/src/getPathFromState.tsx

@@ -99,11 +99,11 @@ export function getPathFromState<ParamList extends {}>(
     let pattern: string | undefined;
 
     let focusedParams: Record<string, any> | undefined;
-    let focusedRoute = getActiveRoute(state);
+    const focusedRoute = getActiveRoute(state);
     let currentOptions = configs;
 
     // Keep all the route names that appeared during going deeper in config in case the pattern is resolved to undefined
-    let nestedRouteNames = [];
+    const nestedRouteNames = [];
 
     let hasNext = true;
 
@@ -213,7 +213,7 @@ export function getPathFromState<ParamList extends {}>(
     if (route.state) {
       path += '/';
     } else if (focusedParams) {
-      for (let param in focusedParams) {
+      for (const param in focusedParams) {
         if (focusedParams[param] === 'undefined') {
           // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
           delete focusedParams[param];
@@ -262,17 +262,15 @@ const createConfigItem = (
     return { pattern };
   }
 
-  // If an object is specified as the value (e.g. Foo: { ... }),
-  // It can have `path` property and `screens` prop which has nested configs
-  let pattern: string | undefined;
-
   if (config.exact && config.path === undefined) {
     throw new Error(
       "A 'path' needs to be specified when specifying 'exact: true'. If you don't want this screen in the URL, specify it as empty string, e.g. `path: ''`."
     );
   }
 
-  pattern =
+  // If an object is specified as the value (e.g. Foo: { ... }),
+  // It can have `path` property and `screens` prop which has nested configs
+  const pattern =
     config.exact !== true
       ? joinPaths(parentPattern || '', config.path || '')
       : config.path || '';

package/src/getStateFromPath.tsx

@@ -71,7 +71,7 @@ export function getStateFromPath<ParamList extends {}>(
     validatePathConfig(options);
   }
 
-  let initialRoutes: InitialRouteConfig[] = [];
+  const initialRoutes: InitialRouteConfig[] = [];
 
   if (options?.initialRouteName) {
     initialRoutes.push({
@@ -523,7 +523,6 @@ const createNestedStateObject = (
   initialRoutes: InitialRouteConfig[],
   flatConfig?: RouteConfig[]
 ) => {
-  let state: InitialState;
   let route = routes.shift() as ParsedRoute;
   const parentScreens: string[] = [];
 
@@ -531,7 +530,11 @@ const createNestedStateObject = (
 
   parentScreens.push(route.name);
 
-  state = createStateObject(initialRoute, route, routes.length === 0);
+  const state: InitialState = createStateObject(
+    initialRoute,
+    route,
+    routes.length === 0
+  );
 
   if (routes.length > 0) {
     let nestedState = state;

package/src/index.tsx

@@ -15,11 +15,11 @@ export { NavigationRouteContext } from './NavigationRouteContext';
 export { PreventRemoveContext } from './PreventRemoveContext';
 export { PreventRemoveProvider } from './PreventRemoveProvider';
 export {
+  createComponentForStaticNavigation,
+  createPathConfigForStaticNavigation,
   type StaticNavigation,
   type StaticParamList,
   type StaticScreenProps,
-  createComponentForStaticNavigation,
-  createPathConfigForStaticNavigation,
 } from './StaticNavigation';
 export * from './types';
 export { useFocusEffect } from './useFocusEffect';

package/src/types.tsx

@@ -23,7 +23,7 @@ export type DefaultNavigatorOptions<
   ParamList extends ParamListBase,
   State extends NavigationState,
   ScreenOptions extends {},
-  EventMap extends EventMapBase
+  EventMap extends EventMapBase,
 > = DefaultRouterOptions<Keyof<ParamList>> & {
   /**
    * Optional ID for the navigator. Can be used with `navigation.getParent(id)` to refer to a parent.
@@ -34,6 +34,30 @@ export type DefaultNavigatorOptions<
    * Only `Screen`, `Group` and `React.Fragment` are supported as children.
    */
   children: React.ReactNode;
+  /**
+   * Layout component for the navigator.
+   * Useful for wrapping with a component with access to navigator's state and options.
+   */
+  layout?: (props: {
+    state: State;
+    navigation: NavigationHelpers<ParamList>;
+    descriptors: Record<
+      string,
+      Descriptor<
+        ScreenOptions,
+        NavigationProp<
+          ParamList,
+          keyof ParamList,
+          string | undefined,
+          State,
+          ScreenOptions,
+          EventMap
+        >,
+        RouteProp<ParamList>
+      >
+    >;
+    children: React.ReactNode;
+  }) => React.ReactElement;
   /**
    * Event listeners for all the screens in the navigator.
    */
@@ -52,6 +76,12 @@ export type DefaultNavigatorOptions<
         route: RouteProp<ParamList>;
         navigation: any;
       }) => ScreenOptions);
+  /**
+   A function returning a state, which may be set after modifying the routes name.
+   */
+  getStateForRouteNamesChange?: (
+    state: NavigationState
+  ) => PartialState<NavigationState> | undefined;
 };
 
 export type EventMapBase = Record<
@@ -69,7 +99,7 @@ export type EventMapCore<State extends NavigationState> = {
 export type EventArg<
   EventName extends string,
   CanPreventDefault extends boolean | undefined = false,
-  Data = undefined
+  Data = undefined,
 > = {
   /**
    * Type of the event (e.g. `focus`, `blur`)
@@ -94,7 +124,7 @@ export type EventArg<
 
 export type EventListenerCallback<
   EventMap extends EventMapBase,
-  EventName extends keyof EventMap
+  EventName extends keyof EventMap,
 > = (
   e: EventArg<
     Extract<EventName, string>,
@@ -162,7 +192,7 @@ export class PrivateValueStore<T extends [any, any, any]> {
 
 type NavigationHelpersCommon<
   ParamList extends ParamListBase,
-  State extends NavigationState = NavigationState
+  State extends NavigationState = NavigationState,
 > = {
   /**
    * Dispatch an action or an update function to the router.
@@ -297,11 +327,18 @@ type NavigationHelpersCommon<
    * Note that this method doesn't re-render screen when the result changes. So don't use it in `render`.
    */
   getState(): State;
+  /**
+   * Schedules the given state to be used as navigation state when the list of screens defined in the navigator changes
+   * instead of automatically calculating the new state, e.g. due to conditional rendering or dynamically defining screens.
+   *
+   * @param state Navigation state object.
+   */
+  setStateForNextRouteNamesChange(state: PartialState<State> | State): void;
 } & PrivateValueStore<[ParamList, unknown, unknown]>;
 
 export type NavigationHelpers<
   ParamList extends ParamListBase,
-  EventMap extends EventMapBase = {}
+  EventMap extends EventMapBase = {},
 > = NavigationHelpersCommon<ParamList> &
   EventEmitter<EventMap> & {
     /**
@@ -354,7 +391,7 @@ export type NavigationProp<
   NavigatorID extends string | undefined = undefined,
   State extends NavigationState = NavigationState<ParamList>,
   ScreenOptions extends {} = {},
-  EventMap extends EventMapBase = {}
+  EventMap extends EventMapBase = {},
 > = Omit<NavigationHelpersCommon<ParamList, State>, 'getParent'> & {
   /**
    * Returns the navigation prop from a parent navigator based on the ID.
@@ -389,12 +426,12 @@ export type NavigationProp<
 
 export type RouteProp<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = Keyof<ParamList>
+  RouteName extends keyof ParamList = Keyof<ParamList>,
 > = Route<Extract<RouteName, string>, ParamList[RouteName]>;
 
 export type CompositeNavigationProp<
   A extends NavigationProp<ParamListBase, string, any, any, any>,
-  B extends NavigationHelpersCommon<ParamListBase, any>
+  B extends NavigationHelpersCommon<ParamListBase, any>,
 > = Omit<A & B, keyof NavigationProp<any>> &
   NavigationProp<
     /**
@@ -442,7 +479,7 @@ export type CompositeScreenProps<
   },
   B extends {
     navigation: NavigationHelpersCommon<any, any>;
-  }
+  },
 > = {
   navigation: CompositeNavigationProp<A['navigation'], B['navigation']>;
   route: A['route'];
@@ -451,7 +488,7 @@ export type CompositeScreenProps<
 export type Descriptor<
   ScreenOptions extends {},
   Navigation extends NavigationProp<any, any, any, any, any, any>,
-  Route extends RouteProp<any, any>
+  Route extends RouteProp<any, any>,
 > = {
   /**
    * Render the component associated with this route.
@@ -476,7 +513,7 @@ export type Descriptor<
 
 export type ScreenListeners<
   State extends NavigationState,
-  EventMap extends EventMapBase
+  EventMap extends EventMapBase,
 > = Partial<{
   [EventName in keyof (EventMap & EventMapCore<State>)]: EventListenerCallback<
     EventMap,
@@ -486,7 +523,7 @@ export type ScreenListeners<
 
 type ScreenComponentType<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList
+  RouteName extends keyof ParamList,
 > =
   | React.ComponentType<{
       route: RouteProp<ParamList, RouteName>;
@@ -496,7 +533,7 @@ type ScreenComponentType<
 
 export type RouteConfigComponent<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList
+  RouteName extends keyof ParamList,
 > =
   | {
       /**
@@ -531,7 +568,7 @@ export type RouteConfig<
   RouteName extends keyof ParamList,
   State extends NavigationState,
   ScreenOptions extends {},
-  EventMap extends EventMapBase
+  EventMap extends EventMapBase,
 > = {
   /**
    * Optional key for this screen. This doesn't need to be unique.
@@ -585,7 +622,7 @@ export type RouteConfig<
 
 export type RouteGroupConfig<
   ParamList extends ParamListBase,
-  ScreenOptions extends {}
+  ScreenOptions extends {},
 > = {
   /**
    * Optional key for the screens in this group.
@@ -685,7 +722,7 @@ export type TypedNavigator<
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends EventMapBase,
-  Navigator extends React.ComponentType<any>
+  Navigator extends React.ComponentType<any>,
 > = {
   /**
    * Navigator component which manages the child screens.
@@ -779,6 +816,12 @@ export type PathConfig<ParamList extends {}> = {
    * Name of the initial route to use for the navigator when the path matches.
    */
   initialRouteName?: keyof ParamList;
+  /**
+   * A function returning a state, which may be set after modifying the routes name.
+   */
+  getStateForRouteNamesChange?: (
+    state: NavigationState
+  ) => PartialState<NavigationState> | undefined;
 };
 
 export type PathConfigMap<ParamList extends {}> = {

package/src/useDescriptors.tsx

@@ -7,8 +7,8 @@ import type {
 import * as React from 'react';
 
 import {
-  AddKeyedListener,
-  AddListener,
+  type AddKeyedListener,
+  type AddListener,
   NavigationBuilderContext,
 } from './NavigationBuilderContext';
 import { NavigationContext } from './NavigationContext';
@@ -29,7 +29,7 @@ import { useRouteCache } from './useRouteCache';
 export type ScreenConfigWithParent<
   State extends NavigationState,
   ScreenOptions extends {},
-  EventMap extends EventMapBase
+  EventMap extends EventMapBase,
 > = {
   keys: (string | undefined)[];
   options: (ScreenOptionsOrCallback<ScreenOptions> | undefined)[] | undefined;
@@ -46,7 +46,7 @@ type ScreenOptionsOrCallback<ScreenOptions extends {}> =
 type Options<
   State extends NavigationState,
   ScreenOptions extends {},
-  EventMap extends EventMapBase
+  EventMap extends EventMapBase,
 > = {
   state: State;
   screens: Record<
@@ -77,7 +77,7 @@ export function useDescriptors<
   State extends NavigationState,
   ActionHelpers extends Record<string, () => void>,
   ScreenOptions extends {},
-  EventMap extends EventMapBase
+  EventMap extends EventMapBase,
 >({
   state,
   screens,

package/src/useFocusEffect.tsx

@@ -14,6 +14,7 @@ type EffectCallback = () => undefined | void | (() => void);
 export function useFocusEffect(effect: EffectCallback) {
   const navigation = useNavigation();
 
+  // eslint-disable-next-line prefer-rest-params
   if (arguments[1] !== undefined) {
     const message =
       "You passed a second argument to 'useFocusEffect', but it only accepts one argument. " +

package/src/useFocusedListenersChildrenAdapter.tsx

@@ -2,8 +2,8 @@ import type { ParamListBase } from '@react-navigation/routers';
 import * as React from 'react';
 
 import {
-  FocusedNavigationCallback,
-  FocusedNavigationListener,
+  type FocusedNavigationCallback,
+  type FocusedNavigationListener,
   NavigationBuilderContext,
 } from './NavigationBuilderContext';
 import type { NavigationHelpers } from './types';

package/src/useIsomorphicLayoutEffect.native.tsx

@@ -0,0 +1,3 @@
+import { useLayoutEffect } from 'react';
+
+export const useIsomorphicLayoutEffect = useLayoutEffect;

package/src/useIsomorphicLayoutEffect.tsx

@@ -0,0 +1,7 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+/**
+ * Use `useEffect` during SSR and `useLayoutEffect` in the browser to avoid warnings.
+ */
+export const useIsomorphicLayoutEffect =
+  typeof document !== 'undefined' ? useLayoutEffect : useEffect;

package/src/useNavigation.tsx

@@ -10,7 +10,7 @@ import type { NavigationProp } from './types';
  * @returns Navigation prop of the parent screen.
  */
 export function useNavigation<
-  T = NavigationProp<ReactNavigation.RootParamList>
+  T = NavigationProp<ReactNavigation.RootParamList>,
 >(): T {
   const root = React.useContext(NavigationContainerRefContext);
   const navigation = React.useContext(NavigationContext);