@react-navigation/core 7.17.5 → 7.19.0

package/src/StaticNavigation.tsx

@@ -6,12 +6,14 @@ import type {
   DefaultNavigatorOptions,
   EventMapBase,
   NavigationListBase,
+  NavigatorScreenParams,
   NavigatorTypeBagBase,
   PathConfig,
   PathConfigMap,
   RouteConfigComponent,
   RouteConfigProps,
   RouteGroupConfig,
+  StaticParamList,
 } from './types';
 import { useRoute } from './useRoute';
 
@@ -34,6 +36,86 @@ type StaticRouteConfig<
 > &
   RouteConfigComponent<ParamList, RouteName>;
 
+type StaticScreenConfigBrand = {
+  readonly __reactNavigationStaticScreenConfig: true;
+};
+
+type UnknownToUndefined<T> = unknown extends T ? undefined : T;
+
+type ParamsForStaticScreenComponent<T> =
+  T extends React.ComponentType<{ route: { params: infer P } }>
+    ? UnknownToUndefined<P>
+    : undefined;
+
+type ParamsForStaticScreen<T> =
+  T extends StaticNavigation<any, any, any>
+    ? NavigatorScreenParams<StaticParamList<T>> | undefined
+    : ParamsForStaticScreenComponent<T>;
+
+type ParamListForStaticScreenConfig<Params> = {
+  Screen: Params extends object | undefined ? Params : never;
+};
+
+type StaticScreenConfigLinking =
+  | PathConfig<ParamListBase>
+  | string
+  | null
+  | undefined;
+
+type StaticScreenConfigScreen =
+  | React.ComponentType<any>
+  | StaticNavigation<any, any, any>;
+
+type StaticScreenConfig<
+  Screen extends StaticScreenConfigScreen,
+  State extends NavigationState,
+  ScreenOptions extends {},
+  EventMap extends EventMapBase,
+  Navigation,
+  Params = ParamsForStaticScreen<Screen>,
+> = Omit<
+  StaticRouteConfig<
+    ParamListForStaticScreenConfig<Params>,
+    'Screen',
+    State,
+    ScreenOptions,
+    EventMap,
+    Navigation
+  >,
+  'name' | 'component' | 'getComponent' | 'children'
+> & {
+  /**
+   * Callback to determine whether the screen should be rendered or not.
+   * This can be useful for conditional rendering of screens,
+   * e.g. - if you want to render a different screen for logged in users.
+   *
+   * You can use a custom hook to use custom logic to determine the return value.
+   *
+   * @example
+   * ```js
+   * if: useIsLoggedIn
+   * ```
+   */
+  if?: () => boolean;
+  /**
+   * Linking config for the screen.
+   * This can be a string to specify the path, or an object with more options.
+   *
+   * @example
+   * ```js
+   * linking: {
+   *   path: 'profile/:id',
+   *   exact: true,
+   * },
+   * ```
+   */
+  linking?: StaticScreenConfigLinking;
+  /**
+   * Static navigation config or Component to render for the screen.
+   */
+  screen: Screen;
+};
+
 export type StaticConfigScreens<
   ParamList extends ParamListBase,
   State extends NavigationState,
@@ -85,7 +167,13 @@ export type StaticConfigScreens<
          * Static navigation config or Component to render for the screen.
          */
         screen: StaticNavigation<any, any, any> | React.ComponentType<any>;
-      });
+      })
+    | StaticScreenConfigBranded;
+};
+
+type StaticScreenConfigBranded = StaticScreenConfigBrand & {
+  screen: StaticScreenConfigScreen;
+  if?: () => boolean;
 };
 
 export type StaticConfigGroup<
@@ -229,6 +317,34 @@ export type StaticNavigation<NavigatorProps, GroupProps, ScreenProps> =
     Screen: React.ComponentType<ScreenProps>;
   };
 
+export type StaticScreenFactory<Bag extends NavigatorTypeBagBase> = <
+  const Screen extends StaticScreenConfigScreen,
+>(
+  config: StaticScreenConfig<
+    Screen,
+    Bag['State'],
+    Bag['ScreenOptions'],
+    Bag['EventMap'],
+    Bag['NavigationList'][keyof Bag['ParamList']]
+  >
+) => StaticScreenConfig<
+  Screen,
+  Bag['State'],
+  Bag['ScreenOptions'],
+  Bag['EventMap'],
+  Bag['NavigationList'][keyof Bag['ParamList']]
+> &
+  StaticScreenConfigBrand;
+
+/**
+ * Helper to create a typed `createXScreen` for static configuration.
+ */
+export function createScreenFactory<
+  TypeBag extends NavigatorTypeBagBase,
+>(): StaticScreenFactory<TypeBag> {
+  return ((config: unknown) => config) as never;
+}
+
 const MemoizedScreen = React.memo(
   <T extends React.ComponentType<any>>({ component }: { component: T }) => {
     const route = useRoute();

package/src/index.tsx

@@ -21,10 +21,12 @@ export { PreventRemoveProvider } from './PreventRemoveProvider';
 export {
   createComponentForStaticNavigationDeprecated as createComponentForStaticNavigation,
   createPathConfigForStaticNavigation,
+  createScreenFactory,
   type StaticConfig,
   type StaticConfigGroup,
   type StaticConfigScreens,
   type StaticNavigation,
+  type StaticScreenFactory,
   type StaticScreenProps,
 } from './StaticNavigation';
 export { ThemeContext } from './theming/ThemeContext';

package/src/useNavigationBuilder.tsx

@@ -781,6 +781,11 @@ export function useNavigationBuilder<
         setCurrentState(undefined);
         stateCleanupRef.current = true;
       }
+
+      // Reset so that StrictMode's second mount re-propagates state correctly.
+      // Without this, the guard above sees the same reference and skips setState,
+      // causing the initial state to be lost after cleanup wipes the container state.
+      lastNotifiedStateRef.current = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);