@react-navigation/native-stack 7.10.1 → 8.0.0-alpha.1

package/src/index.tsx

@@ -1,7 +1,10 @@
 /**
  * Navigators
  */
-export { createNativeStackNavigator } from './navigators/createNativeStackNavigator';
+export {
+  createNativeStackNavigator,
+  createNativeStackScreen,
+} from './navigators/createNativeStackNavigator';
 
 /**
  * Views

package/src/navigators/createNativeStackNavigator.tsx

@@ -2,7 +2,6 @@ import {
   createNavigatorFactory,
   type EventArg,
   NavigationMetaContext,
-  type NavigatorTypeBagBase,
   type ParamListBase,
   type StackActionHelpers,
   StackActions,
@@ -10,6 +9,10 @@ import {
   StackRouter,
   type StackRouterOptions,
   type StaticConfig,
+  type StaticParamList,
+  type StaticScreenConfig,
+  type StaticScreenConfigLinking,
+  type StaticScreenConfigScreen,
   type TypedNavigator,
   useNavigationBuilder,
 } from '@react-navigation/native';
@@ -24,15 +27,14 @@ import type {
 import { NativeStackView } from '../views/NativeStackView';
 
 function NativeStackNavigator({
-  id,
   initialRouteName,
-  UNSTABLE_routeNamesChangeBehavior,
+  routeNamesChangeBehavior,
   children,
   layout,
   screenListeners,
   screenOptions,
   screenLayout,
-  UNSTABLE_router,
+  router,
   ...rest
 }: NativeStackNavigatorProps) {
   const { state, describe, descriptors, navigation, NavigationContent } =
@@ -43,15 +45,14 @@ function NativeStackNavigator({
       NativeStackNavigationOptions,
       NativeStackNavigationEventMap
     >(StackRouter, {
-      id,
       initialRouteName,
-      UNSTABLE_routeNamesChangeBehavior,
+      routeNamesChangeBehavior,
       children,
       layout,
       screenListeners,
       screenOptions,
       screenLayout,
-      UNSTABLE_router,
+      router,
     });
 
   const meta = React.useContext(NavigationMetaContext);
@@ -99,25 +100,47 @@ function NativeStackNavigator({
   );
 }
 
+type NativeStackTypeBag<ParamList extends {}> = {
+  ParamList: ParamList;
+  State: StackNavigationState<ParamList>;
+  ScreenOptions: NativeStackNavigationOptions;
+  EventMap: NativeStackNavigationEventMap;
+  NavigationList: {
+    [RouteName in keyof ParamList]: NativeStackNavigationProp<
+      ParamList,
+      RouteName
+    >;
+  };
+  Navigator: typeof NativeStackNavigator;
+};
+
 export function createNativeStackNavigator<
   const ParamList extends ParamListBase,
-  const NavigatorID extends string | undefined = string | undefined,
-  const TypeBag extends NavigatorTypeBagBase = {
-    ParamList: ParamList;
-    NavigatorID: NavigatorID;
-    State: StackNavigationState<ParamList>;
-    ScreenOptions: NativeStackNavigationOptions;
-    EventMap: NativeStackNavigationEventMap;
-    NavigationList: {
-      [RouteName in keyof ParamList]: NativeStackNavigationProp<
-        ParamList,
-        RouteName,
-        NavigatorID
-      >;
-    };
-    Navigator: typeof NativeStackNavigator;
-  },
-  const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
->(config?: Config): TypedNavigator<TypeBag, Config> {
+>(): TypedNavigator<NativeStackTypeBag<ParamList>, undefined>;
+export function createNativeStackNavigator<
+  const Config extends StaticConfig<NativeStackTypeBag<ParamListBase>>,
+>(
+  config: Config
+): TypedNavigator<
+  NativeStackTypeBag<StaticParamList<{ config: Config }>>,
+  Config
+>;
+export function createNativeStackNavigator(config?: unknown) {
   return createNavigatorFactory(NativeStackNavigator)(config);
 }
+
+export function createNativeStackScreen<
+  const Linking extends StaticScreenConfigLinking,
+  const Screen extends StaticScreenConfigScreen,
+>(
+  config: StaticScreenConfig<
+    Linking,
+    Screen,
+    StackNavigationState<ParamListBase>,
+    NativeStackNavigationOptions,
+    NativeStackNavigationEventMap,
+    NativeStackNavigationProp<ParamListBase>
+  >
+) {
+  return config;
+}

package/src/types.tsx

@@ -53,31 +53,27 @@ export type NativeStackNavigationEventMap = {
 export type NativeStackNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = string,
-  NavigatorID extends string | undefined = undefined,
 > = NavigationProp<
   ParamList,
   RouteName,
-  NavigatorID,
   StackNavigationState<ParamList>,
   NativeStackNavigationOptions,
-  NativeStackNavigationEventMap
-> &
-  StackActionHelpers<ParamList>;
+  NativeStackNavigationEventMap,
+  StackActionHelpers<ParamList>
+>;
 
 export type NativeStackScreenProps<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = string,
-  NavigatorID extends string | undefined = undefined,
 > = {
-  navigation: NativeStackNavigationProp<ParamList, RouteName, NavigatorID>;
+  navigation: NativeStackNavigationProp<ParamList, RouteName>;
   route: RouteProp<ParamList, RouteName>;
 };
 
 export type NativeStackOptionsArgs<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined,
-> = NativeStackScreenProps<ParamList, RouteName, NavigatorID> & {
+> = NativeStackScreenProps<ParamList, RouteName> & {
   theme: Theme;
 };
 
@@ -121,7 +117,7 @@ export type NativeStackHeaderItemProps = {
   /**
    * Tint color for the header.
    */
-  tintColor?: string;
+  tintColor?: ColorValue;
   /**
    * Whether it's possible to navigate back in stack.
    */
@@ -193,7 +189,6 @@ export type NativeStackNavigationOptions = {
   }>;
   /**
    * Icon to display in the header as the icon in the back button.
-   *
    * Defaults to back icon image for the platform
    * - A chevron on iOS
    * - An arrow on Android
@@ -210,15 +205,9 @@ export type NativeStackNavigationOptions = {
     type: 'image';
     source: ImageSourcePropType;
   };
-  /**
-   * Image to display in the header as the icon in the back button.
-   *
-   * @deprecated Use `headerBackIcon` instead.
-   */
-  headerBackImageSource?: ImageSourcePropType;
   /**
    * Style of the header when a large title is shown.
-   * The large title is shown if `headerLargeTitle` is `true` and
+   * The large title is shown if `headerLargeTitleEnabled` is `true` and
    * the edge of any scrollable content reaches the matching edge of the header.
    *
    * Supported properties:
@@ -229,7 +218,7 @@ export type NativeStackNavigationOptions = {
    * @platform ios
    */
   headerLargeStyle?: StyleProp<{
-    backgroundColor?: string;
+    backgroundColor?: ColorValue;
   }>;
   /**
    * Whether to enable header with large title which collapses to regular header on scroll.
@@ -243,12 +232,6 @@ export type NativeStackNavigationOptions = {
    * @platform ios
    */
   headerLargeTitleEnabled?: boolean;
-  /**
-   * Whether to enable header with large title which collapses to regular header on scroll.
-   *
-   * @deprecated Use `headerLargeTitleEnabled` instead.
-   */
-  headerLargeTitle?: boolean;
   /**
    * Whether drop shadow of header is visible when a large title is shown.
    *
@@ -272,7 +255,7 @@ export type NativeStackNavigationOptions = {
     fontFamily?: string;
     fontSize?: number;
     fontWeight?: string;
-    color?: string;
+    color?: ColorValue;
   }>;
   /**
    * Whether to show the header. The header is shown by default.
@@ -284,7 +267,7 @@ export type NativeStackNavigationOptions = {
    * - backgroundColor
    */
   headerStyle?: StyleProp<{
-    backgroundColor?: string;
+    backgroundColor?: ColorValue;
   }>;
   /**
    * Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header.
@@ -310,7 +293,7 @@ export type NativeStackNavigationOptions = {
   /**
    * Tint color for the header. Changes the color of back button and title.
    */
-  headerTintColor?: string;
+  headerTintColor?: ColorValue;
   /**
    * Function which returns a React Element to render as the background of the header.
    * This is useful for using backgrounds such as an image, a gradient, blur effect etc.
@@ -323,11 +306,29 @@ export type NativeStackNavigationOptions = {
    * Will be overriden by `headerLeftItems` on iOS.
    */
   headerLeft?: (props: NativeStackHeaderBackProps) => React.ReactNode;
+  /**
+   * Whether the liquid glass background is visible for the item.
+   *
+   * Only supported on iOS 26.0 and later.
+   * Older versions of iOS and other platforms never show the background.
+   *
+   * Defaults to `true`.
+   */
+  headerLeftBackgroundVisible?: boolean;
   /**
    * Function which returns a React Element to display on the right side of the header.
    * Will be overriden by `headerRightItems` on iOS.
    */
   headerRight?: (props: NativeStackHeaderItemProps) => React.ReactNode;
+  /**
+   * Whether the liquid glass background is visible for the item.
+   *
+   * Only supported on iOS 26.0 and later.
+   * Older versions of iOS and other platforms never show the background.
+   *
+   * Defaults to `true`.
+   */
+  headerRightBackgroundVisible?: boolean;
   /**
    * Function which returns an array of items to display as on the left side of the header.
    * Overrides `headerLeft`.
@@ -369,7 +370,7 @@ export type NativeStackNavigationOptions = {
         /**
          * Tint color for the header.
          */
-        tintColor?: string;
+        tintColor?: ColorValue;
       }) => React.ReactNode);
   /**
    * How to align the the header title.
@@ -387,7 +388,7 @@ export type NativeStackNavigationOptions = {
    */
   headerTitleStyle?: StyleProp<
     Pick<TextStyle, 'fontFamily' | 'fontSize' | 'fontWeight'> & {
-      color?: string;
+      color?: ColorValue;
     }
   >;
   /**
@@ -395,7 +396,9 @@ export type NativeStackNavigationOptions = {
    * You also need to specify `contentInsetAdjustmentBehavior="automatic"` in your `ScrollView`, `FlatList` etc.
    * If you don't have a `ScrollView`, specify `headerTransparent: false`.
    */
-  headerSearchBarOptions?: SearchBarProps;
+  headerSearchBarOptions?: Omit<SearchBarProps, 'onChangeText'> & {
+    onChange?: SearchBarProps['onChangeText'];
+  };
   /**
    * Boolean indicating whether to show the menu on longPress of iOS >= 14 back button. Defaults to `true`.
    * Requires `react-native-screens` version >=3.3.0.
@@ -439,26 +442,6 @@ export type NativeStackNavigationOptions = {
    * @platform ios
    */
   keyboardHandlingEnabled?: boolean;
-  /**
-   * Sets the navigation bar color. Defaults to initial navigation bar color.
-   *
-   * @deprecated For all apps targeting Android SDK 35 or above edge-to-edge is enabled by default.
-   *  This prop is subject to removal in the future.
-   *  See: https://developer.android.com/about/versions/15/behavior-changes-15#ux.
-   *
-   * @platform android
-   */
-  navigationBarColor?: string;
-  /**
-   * Boolean indicating whether the content should be visible behind the navigation bar. Defaults to `false`.
-   *
-   * @deprecated For all apps targeting Android SDK 35 or above edge-to-edge is enabled by default.
-   *  This prop is subject to removal in the future.
-   *  See: https://developer.android.com/about/versions/15/behavior-changes-15#ux.
-   *
-   * @platform android
-   */
-  navigationBarTranslucent?: boolean;
   /**
    * Sets the visibility of the navigation bar. Defaults to `false`.
    *
@@ -477,16 +460,6 @@ export type NativeStackNavigationOptions = {
    * @platform android, ios
    */
   statusBarAnimation?: ScreenProps['statusBarAnimation'];
-  /**
-   * Sets the status bar color (similar to the `StatusBar` component). Defaults to initial status bar color.
-   *
-   * @deprecated For all apps targeting Android SDK 35 or above edge-to-edge is enabled by default.
-   *  This prop is subject to removal in the future.
-   *  See: https://developer.android.com/about/versions/15/behavior-changes-15#ux.
-   *
-   * @platform android
-   */
-  statusBarBackgroundColor?: string;
   /**
    * Whether the status bar should be hidden on this screen.
    * Requires setting `View controller-based status bar appearance -> YES` in your Info.plist file.
@@ -508,16 +481,6 @@ export type NativeStackNavigationOptions = {
    * @platform android, ios
    */
   statusBarStyle?: ScreenProps['statusBarStyle'];
-  /**
-   * Sets the translucency of the status bar. Defaults to `false`.
-   *
-   * @deprecated For all apps targeting Android SDK 35 or above edge-to-edge is enabled by default.
-   *  This prop is subject to removal in the future.
-   *  See: https://developer.android.com/about/versions/15/behavior-changes-15#ux.
-   *
-   * @platform android
-   */
-  statusBarTranslucent?: boolean;
   /**
    * Sets the direction in which you should swipe to dismiss the screen.
    * When using `vertical` option, options `fullScreenGestureEnabled: true`, `animationMatchesGesture: true` and `animation: 'slide_from_bottom'` are set by default.
@@ -724,22 +687,6 @@ export type NativeStackNavigationOptions = {
    * Defaults to `none`, indicating that the dimming view should be always present.
    */
   sheetLargestUndimmedDetentIndex?: number | 'none' | 'last';
-  /**
-   * Whether the sheet content should be rendered behind the Status Bar or display cutouts.
-   *
-   * When set to `true`, the sheet will extend to the physical edges of the stack,
-   * allowing content to be visible behind the status bar or display cutouts.
-   * Detent ratios in sheetAllowedDetents will be measured relative to the full stack height.
-   *
-   * When set to `false`, the sheet's layout will be constrained by the inset from the top
-   * and the detent ratios will then be measured relative to the adjusted height (excluding the top inset).
-   * This means that sheetAllowedDetents will result in different sheet heights depending on this prop.
-   *
-   * Defaults to `false`.
-   *
-   * @platform android
-   */
-  sheetShouldOverflowTopInset?: boolean;
   /**
    * The display orientation to use for the screen.
    *
@@ -1149,7 +1096,6 @@ export type NativeStackHeaderItem =
 
 export type NativeStackNavigatorProps = DefaultNavigatorOptions<
   ParamListBase,
-  string | undefined,
   StackNavigationState<ParamListBase>,
   NativeStackNavigationOptions,
   NativeStackNavigationEventMap,