@react-navigation/native-stack 7.8.6 → 8.0.0-alpha.0

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.
@@ -369,7 +352,7 @@ export type NativeStackNavigationOptions = {
         /**
          * Tint color for the header.
          */
-        tintColor?: string;
+        tintColor?: ColorValue;
       }) => React.ReactNode);
   /**
    * How to align the the header title.
@@ -387,7 +370,7 @@ export type NativeStackNavigationOptions = {
    */
   headerTitleStyle?: StyleProp<
     Pick<TextStyle, 'fontFamily' | 'fontSize' | 'fontWeight'> & {
-      color?: string;
+      color?: ColorValue;
     }
   >;
   /**
@@ -395,7 +378,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 +424,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 +442,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 +463,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.
@@ -934,6 +879,10 @@ export type NativeStackHeaderItemMenuAction = {
    * Label for the menu item.
    */
   label: string;
+  /**
+   * The secondary text displayed alongside the label of the menu item.
+   */
+  description?: string;
   /**
    * Icon for the menu item.
    */
@@ -996,6 +945,40 @@ export type NativeStackHeaderItemMenuSubmenu = {
    * Icon for the submenu item.
    */
   icon?: PlatformIconIOSSfSymbol;
+  /**
+   * Whether the menu is displayed inline with the parent menu.
+   * By default, submenus are displayed after expanding the parent menu item.
+   * Inline menus are displayed as part of the parent menu as a section.
+   *
+   * Defaults to `false`.
+   *
+   * Read more: https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayinline
+   */
+  inline?: boolean;
+  /**
+   * How the submenu items are displayed.
+   * - `default`: menu items are displayed normally.
+   * - `palette`: menu items are displayed in a horizontal row.
+   *
+   * Defaults to `default`.
+   *
+   * Read more: https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayaspalette
+   */
+  layout?: 'default' | 'palette';
+  /**
+   * Whether to apply destructive style to the menu item.
+   *
+   * Read more: https://developer.apple.com/documentation/uikit/uimenuelement/attributes/destructive
+   */
+  destructive?: boolean;
+  /**
+   * Whether multiple items in the submenu can be selected, i.e. in "on" state.
+   *
+   * Defaults to `false`.
+   *
+   * Read more: https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/singleselection
+   */
+  multiselectable?: boolean;
   /**
    * Array of menu items (actions or submenus).
    */
@@ -1022,6 +1005,24 @@ export type NativeStackHeaderItemMenu = SharedHeaderItem & {
      * Optional title to show on top of the menu.
      */
     title?: string;
+    /**
+     * Whether multiple items in the submenu can be selected, i.e. in "on" state.
+     *
+     * Defaults to `false`.
+     *
+     * Read more: https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/singleselection
+     */
+    multiselectable?: boolean;
+    /**
+     * How the submenu items are displayed.
+     * - `default`: menu items are displayed normally.
+     * - `palette`: menu items are displayed in a horizontal row.
+     *
+     * Defaults to `default`.
+     *
+     * Read more: https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayaspalette
+     */
+    layout?: 'default' | 'palette';
     /**
      * Array of menu items (actions or submenus).
      */
@@ -1077,7 +1078,6 @@ export type NativeStackHeaderItem =
 
 export type NativeStackNavigatorProps = DefaultNavigatorOptions<
   ParamListBase,
-  string | undefined,
   StackNavigationState<ParamListBase>,
   NativeStackNavigationOptions,
   NativeStackNavigationEventMap,