@react-navigation/bottom-tabs 7.9.0 → 8.0.0-alpha.0

package/src/types.tsx

@@ -17,24 +17,36 @@ import type {
 import type * as React from 'react';
 import type {
   Animated,
+  ColorValue,
   GestureResponderEvent,
+  ImageSourcePropType,
   StyleProp,
   TextStyle,
   ViewStyle,
 } from 'react-native';
-import type { EdgeInsets } from 'react-native-safe-area-context';
-
-export type Layout = { width: number; height: number };
+import type {
+  BottomTabsScreenBlurEffect,
+  BottomTabsSystemItem,
+  ScrollEdgeEffect,
+  TabBarControllerMode,
+  TabBarItemLabelVisibilityMode,
+  TabBarMinimizeBehavior,
+} from 'react-native-screens';
+import type { SFSymbol } from 'sf-symbols-typescript';
 
 export type Variant = 'uikit' | 'material';
 
 export type BottomTabNavigationEventMap = {
   /**
    * Event which fires on tapping on the tab in the tab bar.
+   *
+   * Preventing default is only supported with `custom` implementation.
    */
   tabPress: { data: undefined; canPreventDefault: true };
   /**
    * Event which fires on long press on the tab in the tab bar.
+   *
+   * Only supported with `custom` implementation.
    */
   tabLongPress: { data: undefined };
   /**
@@ -58,31 +70,27 @@ export type BottomTabNavigationHelpers = NavigationHelpers<
 export type BottomTabNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined,
 > = NavigationProp<
   ParamList,
   RouteName,
-  NavigatorID,
   TabNavigationState<ParamList>,
   BottomTabNavigationOptions,
-  BottomTabNavigationEventMap
-> &
-  TabActionHelpers<ParamList>;
+  BottomTabNavigationEventMap,
+  TabActionHelpers<ParamList>
+>;
 
 export type BottomTabScreenProps<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined,
 > = {
-  navigation: BottomTabNavigationProp<ParamList, RouteName, NavigatorID>;
+  navigation: BottomTabNavigationProp<ParamList, RouteName>;
   route: RouteProp<ParamList, RouteName>;
 };
 
 export type BottomTabOptionsArgs<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined,
-> = BottomTabScreenProps<ParamList, RouteName, NavigatorID> & {
+> = BottomTabScreenProps<ParamList, RouteName> & {
   theme: Theme;
 };
 
@@ -108,31 +116,83 @@ export type TabBarVisibilityAnimationConfig =
 
 export type TabAnimationName = 'none' | 'fade' | 'shift';
 
-export type BottomTabNavigationOptions = HeaderOptions & {
+type IconImage = {
   /**
-   * Title text for the screen.
+   * - `image` - Use a local image as the icon.
    */
-  title?: string;
+  type: 'image';
+  /**
+   * Image source to use as the icon.
+   * e.g., `require('./path/to/image.png')`
+   */
+  source: ImageSourcePropType;
+  /**
+   * Whether to apply tint color to the icon.
+   * Defaults to `true`.
+   *
+   * @platform ios
+   */
+  tinted?: boolean;
+};
 
+type IconIOSSfSymbol = {
   /**
-   * Title string of a tab displayed in the tab bar
-   * or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon', children: string } returns a React.Node to display in tab bar.
+   * - `sfSymbol` - Use an SF Symbol as the icon on iOS.
+   */
+  type: 'sfSymbol';
+  /**
+   * Name of the SF Symbol to use as the icon.
    *
-   * When undefined, scene title is used. Use `tabBarShowLabel` to hide the label.
+   * @platform ios
    */
-  tabBarLabel?:
-    | string
-    | ((props: {
-        focused: boolean;
-        color: string;
-        position: LabelPosition;
-        children: string;
-      }) => React.ReactNode);
+  name: SFSymbol;
+};
 
+type IconAndroidDrawable = {
   /**
-   * Whether the tab label should be visible. Defaults to `true`.
+   * - `drawableResource` - Use a drawable resource as the icon on Android.
    */
-  tabBarShowLabel?: boolean;
+  type: 'drawableResource';
+  /**
+   * Name of the drawable resource to use as the icon.
+   *
+   * @platform android
+   */
+  name: string;
+};
+
+type IconIOS = IconIOSSfSymbol | IconImage;
+
+type IconAndroid = IconAndroidDrawable | IconImage;
+
+export type BottomTabIcon = IconIOS | IconAndroid;
+
+type BottomTabCustomOptions = {
+  /**
+   * How the screen should animate when switching tabs.
+   *
+   * Supported values:
+   * - 'none': don't animate the screen (default)
+   * - 'fade': cross-fade the screens.
+   * - 'shift': shift the screens slightly shift to left/right.
+   *
+   * Only supported with `custom` implementation.
+   */
+  animation?: TabAnimationName;
+
+  /**
+   * Function which specifies interpolated styles for bottom-tab scenes.
+   *
+   * Only supported with `custom` implementation.
+   */
+  sceneStyleInterpolator?: BottomTabSceneStyleInterpolator;
+
+  /**
+   * Object which specifies the animation type (timing or spring) and their options (such as duration for timing).
+   *
+   * Only supported with `custom` implementation.
+   */
+  transitionSpec?: TransitionSpec;
 
   /**
    * Whether the label is shown below the icon or beside the icon.
@@ -141,180 +201,414 @@ export type BottomTabNavigationOptions = HeaderOptions & {
    * - `beside-icon` the label is shown next to the icon (typical for iPad)
    *
    * By default, the position is chosen automatically based on device width.
+   *
+   * Only supported with `custom` implementation.
    */
   tabBarLabelPosition?: LabelPosition;
 
   /**
-   * Style object for the tab label.
+   * Whether label font should scale to respect Text Size accessibility settings.
+   *
+   * Defaults to `true`.
+   *
+   * Only supported with `custom` implementation.
    */
-  tabBarLabelStyle?: StyleProp<TextStyle>;
+  tabBarAllowFontScaling?: boolean;
 
   /**
-   * Whether label font should scale to respect Text Size accessibility settings.
+   * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
+   * It's recommended to set this if you don't have a label for the tab.
+   *
+   * Only supported with `custom` implementation.
    */
-  tabBarAllowFontScaling?: boolean;
+  tabBarAccessibilityLabel?: string;
 
   /**
-   * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
+   * ID to locate this tab button in tests.
+   *
+   * Only supported with `custom` implementation.
    */
-  tabBarIcon?: (props: {
-    focused: boolean;
-    color: string;
-    size: number;
-  }) => React.ReactNode;
+  tabBarButtonTestID?: string;
+
+  /**
+   * Style object for the tab item container.
+   *
+   * Only supported with `custom` implementation.
+   */
+  tabBarItemStyle?: StyleProp<ViewStyle>;
 
   /**
    * Style object for the tab icon.
+   *
+   * Only supported with `custom` implementation.
    */
   tabBarIconStyle?: StyleProp<TextStyle>;
 
   /**
-   * Text to show in a badge on the tab icon.
+   * Whether the tab bar gets hidden when the keyboard is shown.
+   *
+   * Defaults to `false`.
+   *
+   * Only supported with `custom` implementation.
    */
-  tabBarBadge?: number | string;
+  tabBarHideOnKeyboard?: boolean;
 
   /**
-   * Custom style for the tab bar badge.
-   * You can specify a background color or text color here.
+   * Animation config for showing and hiding the tab bar when the keyboard is shown/hidden.
+   *
+   * Only supported with `custom` implementation.
    */
-  tabBarBadgeStyle?: StyleProp<TextStyle>;
+  tabBarVisibilityAnimationConfig?: {
+    show?: TabBarVisibilityAnimationConfig;
+    hide?: TabBarVisibilityAnimationConfig;
+  };
 
   /**
-   * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
-   * It's recommended to set this if you don't have a label for the tab.
+   * Variant of the tab bar. Defaults to `uikit`.
+   *
+   * Only supported with `custom` implementation.
    */
-  tabBarAccessibilityLabel?: string;
+  tabBarVariant?: Variant;
 
   /**
-   * ID to locate this tab button in tests.
+   * Style object for the tab bar container.
+   *
+   * Only supported with `custom` implementation.
    */
-  tabBarButtonTestID?: string;
+  tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+
+  /**
+   * Function which returns a React Element to use as background for the tab bar.
+   * You could render an image, a gradient, blur view etc.
+   *
+   * When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well.
+   * You'd also need to use `useBottomTabBarHeight()` to add a bottom padding to your content.
+   *
+   * Only supported with `custom` implementation.
+   */
+  tabBarBackground?: () => React.ReactNode;
+
+  /**
+   * Position of the tab bar on the screen. Defaults to `bottom`.
+   *
+   * Only supported with `custom` implementation or if custom tab bar is provided.
+   */
+  tabBarPosition?: 'bottom' | 'left' | 'right' | 'top';
+
+  /**
+   * Background color for the active tab.
+   *
+   * Only supported with `custom` implementation.
+   */
+  tabBarActiveBackgroundColor?: ColorValue;
+
+  /**
+   * Background color for the inactive tabs.
+   *
+   * Only supported with `custom` implementation.
+   */
+  tabBarInactiveBackgroundColor?: ColorValue;
 
   /**
    * Function which returns a React element to render as the tab bar button.
    * Renders `PlatformPressable` by default.
+   *
+   * Only supported with `custom` implementation.
    */
   tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
+};
 
+type BottomTabNativeOptions = {
   /**
-   * Color for the icon and label in the active tab.
+   * Uses iOS built-in tab bar items with standard iOS styling and localized titles.
+   * If set to `search`, it's positioned next to the tab bar on iOS 26 and above.
+   *
+   * The `tabBarIcon` and `tabBarLabel` options will override the icon and label from the system item.
+   * If you want to keep the system behavior on iOS, but need to provide icon and label for other platforms,
+   * Use `Platform.OS`  or `Platform.select`  to conditionally set `undefined` for `tabBarIcon` and `tabBarLabel` on iOS.
+   *
+   * @platform ios
    */
-  tabBarActiveTintColor?: string;
+  tabBarSystemItem?: BottomTabsSystemItem;
 
   /**
-   * Color for the icon and label in the inactive tabs.
+   * Blur effect applied to the tab bar when tab screen is selected.
+   *
+   * Works with backgroundColor's alpha < 1.
+   *
+   * The following values are currently supported:
+   *
+   * - `none` - disables blur effect
+   * - `systemDefault` - uses UIKit's default tab bar blur effect
+   * - one of styles mapped from UIKit's UIBlurEffectStyle, e.g. `systemUltraThinMaterial`
+   *
+   * Defaults to `systemDefault`.
+   *
+   * Complete list of possible blur effect styles is available in the official UIKit documentation:
+   * @see {@link https://developer.apple.com/documentation/uikit/uiblureffect/style|UIBlurEffect.Style}
+   *
+   * Only supported on iOS 18 and lower.
+   *
+   * @platform ios
    */
-  tabBarInactiveTintColor?: string;
+  tabBarBlurEffect?: BottomTabsScreenBlurEffect;
 
   /**
-   * Background color for the active tab.
+   * Minimize behavior for the tab bar.
+   *
+   * The following values are currently supported:
+   *
+   * - `auto` - resolves to the system default minimize behavior
+   * - `never` - the tab bar does not minimize
+   * - `onScrollDown` - the tab bar minimizes when scrolling down and
+   *   expands when scrolling back up
+   * - `onScrollUp` - the tab bar minimizes when scrolling up and expands
+   *   when scrolling back down
+   *
+   * Defaults to `auto`.
+   *
+   * The supported values correspond to the official UIKit documentation:
+   * @see {@link https://developer.apple.com/documentation/uikit/uitabbarcontroller/minimizebehavior|UITabBarController.MinimizeBehavior}
+   *
+   * Available starting from iOS 26.
+   *
+   * @platform ios
    */
-  tabBarActiveBackgroundColor?: string;
+  tabBarMinimizeBehavior?: TabBarMinimizeBehavior;
 
   /**
-   * Background color for the inactive tabs.
+   * Background color of the active indicator.
+   *
+   * Only supported with `native` implementation.
+   *
+   * @platform android
    */
-  tabBarInactiveBackgroundColor?: string;
+  tabBarActiveIndicatorColor?: ColorValue;
 
   /**
-   * Style object for the tab item container.
+   * Specifies if the active indicator should be used. Defaults to `true`.
+   *
+   * Only supported with `native` implementation.
+   *
+   * @platform android
    */
-  tabBarItemStyle?: StyleProp<ViewStyle>;
+  tabBarActiveIndicatorEnabled?: boolean;
 
   /**
-   * Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
+   * Function which returns a React element to display as an accessory view.
+   *
+   * Accepts a `placement` parameter which can be one of the following values:
+   * - `regular` - at bottom of the screen, above the tab bar if tab bar is at the bottom
+   * - `inline` - inline with the collapsed bottom tab bar (e.g. when minimized based on `tabBarMinimizeBehavior`)
+   *
+   * Note: the content is rendered twice for both placements, but only one is visible at a time based on the tab bar state.
+   * Any shared state should be stored outside of the component to keep both versions in sync.
+   *
+   * Available starting from iOS 26.
+   *
+   * Only supported with `native` implementation.
+   *
+   * @platform ios
    */
-  tabBarHideOnKeyboard?: boolean;
+  bottomAccessory?: (options: {
+    placement: 'regular' | 'inline';
+  }) => React.ReactNode;
 
   /**
-   * Animation config for showing and hiding the tab bar when the keyboard is shown/hidden.
+   * Configures the scroll edge effect for the _content ScrollView_ (the ScrollView that is present in first descendants chain of the Screen).
+   * Depending on values set, it will blur the scrolling content below certain UI elements (header items, search bar)
+   * for the specified edge of the ScrollView.
+   *
+   * When set in nested containers, i.e. Native Stack inside Native Bottom Tabs, or the other way around,
+   * the ScrollView will use only the innermost one's config.
+   *
+   * **Note:** Using both `headerBlurEffect` and `scrollEdgeEffects` (>= iOS 26) simultaneously may cause overlapping effects.
+   *
+   * Edge effects can be configured for each edge separately. The following values are currently supported:
+   *
+   * - `automatic` - the automatic scroll edge effect style,
+   * - `hard` - a scroll edge effect with a hard cutoff and dividing line,
+   * - `soft` - a soft-edged scroll edge effect,
+   * - `hidden` - no scroll edge effect.
+   *
+   * Defaults to `automatic` for each edge.
+   *
+   * Available starting from iOS 26.
+   *
+   * Only supported with `native` implementation.
+   *
+   * @platform ios
    */
-  tabBarVisibilityAnimationConfig?: {
-    show?: TabBarVisibilityAnimationConfig;
-    hide?: TabBarVisibilityAnimationConfig;
+  scrollEdgeEffects?: {
+    bottom?: ScrollEdgeEffect;
+    left?: ScrollEdgeEffect;
+    right?: ScrollEdgeEffect;
+    top?: ScrollEdgeEffect;
   };
+};
 
+export type BottomTabNavigationOptions = {
   /**
-   * Variant of the tab bar. Defaults to `uikit`.
+   * Title text for the screen.
    */
-  tabBarVariant?: Variant;
+  title?: string;
 
   /**
-   * Style object for the tab bar container.
+   * Title string of the tab displayed in the tab bar
+   *
+   * Overrides the label provided by `tabBarSystemItem` on iOS.
+   *
+   * If not provided, or set to `undefined`:
+   * - The system values are used if `tabBarSystemItem` is set on iOS.
+   * - Otherwise, it falls back to the `title` or route name.
    */
-  tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  tabBarLabel?: string;
 
   /**
-   * Function which returns a React Element to use as background for the tab bar.
-   * You could render an image, a gradient, blur view etc.
+   * Label visibility mode for the tab bar items.
    *
-   * When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well.
-   * You'd also need to use `useBottomTabBarHeight()` to add a bottom padding to your content.
+   * The following values are currently supported:
+   *
+   * - `auto` - decided based on platform and implementation
+   * - `labeled` - labels are always shown
+   * - `unlabeled` - labels are never shown
+   * - `selected` - labels shown only for selected tab (only supported on Android with `native` implementation)
+   *
+   * Defaults to `auto`.
+   *
+   * Supported on all platforms with `custom` implementation.
+   * Only supported on Android with `native` implementation.
    */
-  tabBarBackground?: () => React.ReactNode;
+  tabBarLabelVisibilityMode?: TabBarItemLabelVisibilityMode;
 
   /**
-   * Position of the tab bar on the screen. Defaults to `bottom`.
+   * Style object for the tab label.
    */
-  tabBarPosition?: 'bottom' | 'left' | 'right' | 'top';
+  tabBarLabelStyle?: Pick<
+    TextStyle,
+    'fontFamily' | 'fontSize' | 'fontWeight' | 'fontStyle'
+  >;
 
   /**
-   * Whether this screens should render the first time it's accessed. Defaults to `true`.
-   * Set it to `false` if you want to render the screen on initial render.
+   * Icon to display for the tab.
+   *
+   * Overrides the icon provided by `tabBarSystemItem` on iOS with native implementation.
+   *
+   * Providing different icon for focused and unfocused states is supported:
+   * - on all platforms with `custom` implementation
+   * - on iOS with `native` implementation
+   *
+   * A React element is only supported with `custom` implementation.
    */
-  lazy?: boolean;
+  tabBarIcon?:
+    | BottomTabIcon
+    | ((props: {
+        focused: boolean;
+        color: ColorValue;
+        size: number;
+      }) => BottomTabIcon | React.ReactNode);
 
   /**
-   * Function that given returns a React Element to display as a header.
+   * Text to show in a badge on the tab icon.
    */
-  header?: (props: BottomTabHeaderProps) => React.ReactNode;
+  tabBarBadge?: number | string;
 
   /**
-   * Whether to show the header. Setting this to `false` hides the header.
-   * Defaults to `true`.
+   * Custom style for the tab bar badge.
+   * You can specify a background color or text color here.
+   *
+   * @platform android
    */
-  headerShown?: boolean;
+  tabBarBadgeStyle?: {
+    backgroundColor?: ColorValue;
+    color?: ColorValue;
+  };
 
   /**
-   * Whether any nested stack should be popped to top when navigating away from the tab.
-   * Defaults to `false`.
+   * Color for the icon and label in the active tab.
    */
-  popToTopOnBlur?: boolean;
+  tabBarActiveTintColor?: ColorValue;
 
   /**
-   * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
-   * Defaults to `true` when `enableFreeze()` is run at the top of the application.
-   * Requires `react-native-screens` version >=3.16.0.
-   *
-   * Only supported on iOS and Android.
+   * Color for the icon and label in the inactive tabs.
    */
-  freezeOnBlur?: boolean;
+  tabBarInactiveTintColor?: ColorValue;
 
   /**
-   * Style object for the component wrapping the screen content.
+   * Color of tab bar item's ripple effect.
+   *
+   * @platform android
    */
-  sceneStyle?: StyleProp<ViewStyle>;
+  tabBarRippleColor?: ColorValue;
 
   /**
-   * How the screen should animate when switching tabs.
+   * Display mode for the tab bar.
    *
    * Supported values:
-   * - 'none': don't animate the screen (default)
-   * - 'fade': cross-fade the screens.
-   * - 'shift': shift the screens slightly shift to left/right.
+   * - `auto` - automatic based on the tab’s content
+   * - `tabBar` - tab items are shown in a traditional tab bar
+   * - `tabSidebar` - tab items are shown in a sidebar
+   *
+   * Supported on all platforms with `custom` implementation. By default:
+   * - `tabBar` is positioned at the bottom
+   * - `tabSidebar` is positioned on the left (LTR) or right (RTL)
+   *
+   * The `tabBarPosition` option can be used to override this in `custom` implementation.
+   *
+   * Supported on iOS 18 and above with `native` implementation.
+   * Not supported on tvOS.
    */
-  animation?: TabAnimationName;
+  tabBarControllerMode?: TabBarControllerMode;
 
   /**
-   * Function which specifies interpolated styles for bottom-tab scenes.
+   * Style object for the tab bar container.
    */
-  sceneStyleInterpolator?: BottomTabSceneStyleInterpolator;
+  tabBarStyle?: {
+    /**
+     * Background color of the tab bar.
+     *
+     * Only supported on Android and iOS 18 and below.
+     */
+    backgroundColor?: ColorValue;
+    /**
+     * Shadow color of the tab bar.
+     *
+     * Only supported on iOS 18 and below.
+     */
+    shadowColor?: ColorValue;
+  };
 
   /**
-   * Object which specifies the animation type (timing or spring) and their options (such as duration for timing).
+   * Whether this screens should render the first time it's accessed. Defaults to `true`.
+   * Set it to `false` if you want to render the screen on initial render.
    */
-  transitionSpec?: TransitionSpec;
-};
+  lazy?: boolean;
+
+  /**
+   * Whether any nested stack should be popped to top when navigating away from the tab.
+   * Defaults to `false`.
+   */
+  popToTopOnBlur?: boolean; // TODO: handle natively
+
+  /**
+   * Style object for the component wrapping the screen content.
+   */
+  sceneStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Function that returns a React Element to display as a header.
+   */
+  header?: (props: BottomTabHeaderProps) => React.ReactNode;
+
+  /**
+   * Whether to show the header.
+   *
+   * Defaults to `false` unless a header is provided.
+   */
+  headerShown?: boolean;
+} & HeaderOptions &
+  BottomTabNativeOptions &
+  BottomTabCustomOptions;
 
 export type BottomTabDescriptor = Descriptor<
   BottomTabNavigationOptions,
@@ -385,32 +679,35 @@ export type BottomTabTransitionPreset = {
 
 export type BottomTabNavigationConfig = {
   /**
-   * Function that returns a React element to display as the tab bar.
+   * The implementation to use for rendering the bottom tabs.
+   *
+   * - `native`: uses native platform bottom tabs on Android and iOS.
+   * - `custom`: uses a custom JavaScript implementation for all platforms.
+   *
+   * Some feature may not be available depending on the implementation used.
+   *
+   * Defaults to `native` on Android and iOS.
+   *
+   * On other platforms, it's always `custom` and this option has no effect.
    */
-  tabBar?: (props: BottomTabBarProps) => React.ReactNode;
+  implementation?: 'native' | 'custom';
+
   /**
-   * Safe area insets for the tab bar. This is used to avoid elements like the navigation bar on Android and bottom safe area on iOS.
-   * By default, the device's safe area insets are automatically detected. You can override the behavior with this option.
+   * Function that returns a React element to display as the tab bar.
    */
-  safeAreaInsets?: {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
-  };
+  tabBar?: (props: BottomTabBarProps) => React.ReactNode;
+
   /**
    * Whether inactive screens should be detached from the view hierarchy to save memory.
-   * Make sure to call `enableScreens` from `react-native-screens` to make it work.
-   * Defaults to `true` on Android.
+   *
+   * Defaults to `true`.
+   *
+   * Only supported with `custom` implementation.
    */
   detachInactiveScreens?: boolean;
 };
 
 export type BottomTabHeaderProps = {
-  /**
-   * Layout of the screen.
-   */
-  layout: Layout;
   /**
    * Options for the current screen.
    */
@@ -429,7 +726,6 @@ export type BottomTabBarProps = {
   state: TabNavigationState<ParamListBase>;
   descriptors: BottomTabDescriptorMap;
   navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>;
-  insets: EdgeInsets;
 };
 
 export type BottomTabBarButtonProps = Omit<
@@ -446,7 +742,6 @@ export type BottomTabBarButtonProps = Omit<
 
 export type BottomTabNavigatorProps = DefaultNavigatorOptions<
   ParamListBase,
-  string | undefined,
   TabNavigationState<ParamListBase>,
   BottomTabNavigationOptions,
   BottomTabNavigationEventMap,