@react-navigation/bottom-tabs 7.5.0 → 7.7.0

package/lib/typescript/src/unstable/types.d.ts

@@ -0,0 +1,276 @@
+import type { DefaultNavigatorOptions, Descriptor, NavigationHelpers, NavigationProp, ParamListBase, RouteProp, TabActionHelpers, TabNavigationState, TabRouterOptions, Theme } from '@react-navigation/native';
+import type { ColorValue, ImageSourcePropType, TextStyle } from 'react-native';
+import type { EdgeInsets } from 'react-native-safe-area-context';
+import type { BottomTabsSystemItem, TabBarControllerMode, TabBarItemLabelVisibilityMode, TabBarMinimizeBehavior } from 'react-native-screens';
+import type { SFSymbol } from 'sf-symbols-typescript';
+import type { NativeHeaderOptions } from './NativeScreen/types';
+export type Layout = {
+    width: number;
+    height: number;
+};
+export type NativeBottomTabNavigationEventMap = {
+    /**
+     * Event which fires on tapping on the tab in the tab bar.
+     */
+    tabPress: {
+        data: undefined;
+        canPreventDefault: true;
+    };
+    /**
+     * Event which fires when a transition animation starts.
+     */
+    transitionStart: {
+        data: {
+            closing: boolean;
+        };
+    };
+    /**
+     * Event which fires when a transition animation ends.
+     */
+    transitionEnd: {
+        data: {
+            closing: boolean;
+        };
+    };
+};
+export type NativeBottomTabNavigationProp<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = NavigationProp<ParamList, RouteName, NavigatorID, TabNavigationState<ParamList>, NativeBottomTabNavigationOptions, NativeBottomTabNavigationEventMap> & TabActionHelpers<ParamList>;
+export type NativeBottomTabScreenProps<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = {
+    navigation: NativeBottomTabNavigationProp<ParamList, RouteName, NavigatorID>;
+    route: RouteProp<ParamList, RouteName>;
+};
+export type NativeBottomTabOptionsArgs<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = NativeBottomTabScreenProps<ParamList, RouteName, NavigatorID> & {
+    theme: Theme;
+};
+type IconImage = {
+    /**
+     * - `image` - Use a local image as the icon.
+     */
+    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 = {
+    /**
+     * - `sfSymbol` - Use an SF Symbol as the icon on iOS.
+     */
+    type: 'sfSymbol';
+    /**
+     * Name of the SF Symbol to use as the icon.
+     *
+     * @platform ios
+     */
+    name: SFSymbol;
+};
+type IconAndroidDrawable = {
+    /**
+     * - `drawableResource` - Use a drawable resource as the icon on Android.
+     */
+    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 Icon = IconIOS | IconAndroid;
+export type NativeBottomTabNavigationOptions = NativeHeaderOptions & {
+    /**
+     * Title text for the screen.
+     */
+    title?: string;
+    /**
+     * 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
+     */
+    tabBarSystemItem?: BottomTabsSystemItem;
+    /**
+     * Title string of a 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.
+     */
+    tabBarLabel?: string;
+    /**
+     * Style object for the tab label.
+     */
+    tabBarLabelStyle?: Pick<TextStyle, 'fontFamily' | 'fontSize' | 'fontWeight' | 'fontStyle'>;
+    /**
+     * Icon to display for the tab.
+     * Showing a different icon for focused tab is only supported on iOS.
+     *
+     * Overrides the icon provided by `tabBarSystemItem` on iOS.
+     */
+    tabBarIcon?: Icon | ((props: {
+        focused: boolean;
+    }) => Icon);
+    /**
+     * Text to show in a badge on the tab icon.
+     */
+    tabBarBadge?: number | string;
+    /**
+     * Custom style for the tab bar badge.
+     * You can specify a background color or text color here.
+     * Only supported on Android.
+     */
+    tabBarBadgeStyle?: {
+        backgroundColor?: ColorValue;
+        color?: ColorValue;
+    };
+    /**
+     * Color for the icon and label in the active tab.
+     */
+    tabBarActiveTintColor?: ColorValue;
+    /**
+     * Color for the icon and label in the inactive tabs.
+     *
+     * @platform android
+     */
+    tabBarInactiveTintColor?: ColorValue;
+    /**
+     * Specifies the background color of the active indicator.
+     *
+     * @platform android
+     */
+    tabBarActiveIndicatorColor?: ColorValue;
+    /**
+     * Specifies if the active indicator should be used. Defaults to `true`.
+     *
+     * @platform android
+     */
+    tabBarActiveIndicatorEnabled?: boolean;
+    /**
+     * Specifies the color of each tab bar item's ripple effect.
+     *
+     * @platform android
+     */
+    tabBarRippleColor?: ColorValue;
+    /**
+     * Style object for the tab bar container.
+     */
+    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;
+    };
+    /**
+     * 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.
+     */
+    lazy?: boolean;
+    /**
+     * Whether any nested stack should be popped to top when navigating away from the tab.
+     * Defaults to `false`.
+     */
+    popToTopOnBlur?: boolean;
+    /**
+     * Specifies the label visibility mode for the tab bar items.
+     *
+     * The following values are currently supported:
+     *
+     * - `automatic` - the system decides when to show or hide labels
+     * - `selected` - labels are shown only for the selected tab
+     * - `labeled` - labels are always shown
+     * - `unlabeled` - labels are never shown
+     *
+     * @platform android
+     */
+    tabBarLabelVisibilityMode?: TabBarItemLabelVisibilityMode;
+    /**
+     * Specifies the display mode for the tab bar.
+     *
+     * Available starting from iOS 18.
+     * Not supported on tvOS.
+     *
+     * The following values are currently supported:
+     *
+     * - `automatic` - the system sets the display mode based on the tab’s content
+     * - `tabBar` - the system displays the content only as a tab bar
+     * - `tabSidebar` - the tab bar is displayed as a sidebar
+     *
+     * See the official documentation for more details:
+     * @see {@link https://developer.apple.com/documentation/uikit/uitabbarcontroller/mode|UITabBarController.Mode}
+     *
+     * @default Defaults to `automatic`.
+     *
+     * @platform ios
+     * @supported iOS 18 or higher, not supported on tvOS
+     */
+    tabBarControllerMode?: TabBarControllerMode;
+    /**
+     * Specifies the minimize behavior for the tab bar.
+     *
+     * The following values are currently supported:
+     *
+     * - `automatic` - 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
+     *
+     * The supported values correspond to the official UIKit documentation:
+     * @see {@link https://developer.apple.com/documentation/uikit/uitabbarcontroller/minimizebehavior|UITabBarController.MinimizeBehavior}
+     *
+     * @platform ios
+     * @supported iOS 26 or higher
+     */
+    tabBarMinimizeBehavior?: TabBarMinimizeBehavior;
+};
+export type NativeBottomTabDescriptor = Descriptor<NativeBottomTabNavigationOptions, NativeBottomTabNavigationProp<ParamListBase>, RouteProp<ParamListBase>>;
+export type NativeBottomTabDescriptorMap = Record<string, NativeBottomTabDescriptor>;
+export type NativeBottomTabNavigationConfig = {};
+export type NativeBottomTabBarProps = {
+    state: TabNavigationState<ParamListBase>;
+    descriptors: NativeBottomTabDescriptorMap;
+    navigation: NavigationHelpers<ParamListBase, NativeBottomTabNavigationEventMap>;
+    insets: EdgeInsets;
+};
+export type NativeBottomTabNavigatorProps = DefaultNavigatorOptions<ParamListBase, string | undefined, TabNavigationState<ParamListBase>, NativeBottomTabNavigationOptions, NativeBottomTabNavigationEventMap, NativeBottomTabNavigationProp<ParamListBase>> & TabRouterOptions & NativeBottomTabNavigationConfig;
+export type NativeBottomTabNavigationHelpers = NavigationHelpers<ParamListBase, NativeBottomTabNavigationEventMap> & TabActionHelpers<ParamListBase>;
+export type NativeBottomTabHeaderProps = {
+    /**
+     * Options for the current screen.
+     */
+    options: NativeBottomTabNavigationOptions;
+    /**
+     * Route object for the current screen.
+     */
+    route: RouteProp<ParamListBase>;
+    /**
+     * Navigation prop for the header.
+     */
+    navigation: NativeBottomTabNavigationProp<ParamListBase>;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/unstable/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/unstable/types.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/bottom-tabs",
   "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "7.5.0",
+  "version": "7.7.0",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -25,6 +25,11 @@
       "types": "./lib/typescript/src/index.d.ts",
       "default": "./lib/module/index.js"
     },
+    "./unstable": {
+      "source": "./src/unstable/index.tsx",
+      "types": "./lib/typescript/src/unstable/index.d.ts",
+      "default": "./lib/module/unstable/index.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -41,12 +46,13 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^2.7.0",
-    "color": "^4.2.3"
+    "@react-navigation/elements": "^2.8.0",
+    "color": "^4.2.3",
+    "sf-symbols-typescript": "^2.1.0"
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",
-    "@react-navigation/native": "^7.1.18",
+    "@react-navigation/native": "^7.1.19",
     "@testing-library/react-native": "^13.2.0",
     "@types/color": "^4.2.0",
     "@types/react": "~19.0.10",
@@ -60,7 +66,7 @@
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^7.1.18",
+    "@react-navigation/native": "^7.1.19",
     "react": ">= 18.2.0",
     "react-native": "*",
     "react-native-safe-area-context": ">= 4.0.0",
@@ -84,5 +90,5 @@
       ]
     ]
   },
-  "gitHead": "6f98ce195ea29883f4242e56390b334547c68bc5"
+  "gitHead": "437fdd5547406b90d1045c47b86bcfdcf800f51d"
 }

package/src/navigators/createBottomTabNavigator.tsx

@@ -23,6 +23,7 @@ function BottomTabNavigator({
   id,
   initialRouteName,
   backBehavior,
+  UNSTABLE_routeNamesChangeBehavior,
   children,
   layout,
   screenListeners,
@@ -42,6 +43,7 @@ function BottomTabNavigator({
       id,
       initialRouteName,
       backBehavior,
+      UNSTABLE_routeNamesChangeBehavior,
       children,
       layout,
       screenListeners,

package/src/unstable/NativeBottomTabView.native.tsx

@@ -0,0 +1,303 @@
+import {
+  getLabel,
+  Lazy,
+  SafeAreaProviderCompat,
+} from '@react-navigation/elements';
+import {
+  CommonActions,
+  type ParamListBase,
+  type Route,
+  StackActions,
+  type TabNavigationState,
+  useTheme,
+} from '@react-navigation/native';
+import Color from 'color';
+import * as React from 'react';
+import { type ColorValue, Platform, PlatformColor } from 'react-native';
+import {
+  BottomTabs,
+  BottomTabsScreen,
+  type BottomTabsScreenItemStateAppearance,
+  type PlatformIcon,
+} from 'react-native-screens';
+
+import { NativeScreen } from './NativeScreen/NativeScreen';
+import type {
+  Icon,
+  NativeBottomTabDescriptorMap,
+  NativeBottomTabNavigationConfig,
+  NativeBottomTabNavigationHelpers,
+} from './types';
+
+type Props = NativeBottomTabNavigationConfig & {
+  state: TabNavigationState<ParamListBase>;
+  navigation: NativeBottomTabNavigationHelpers;
+  descriptors: NativeBottomTabDescriptorMap;
+};
+
+export function NativeBottomTabView({ state, navigation, descriptors }: Props) {
+  const { colors, fonts } = useTheme();
+
+  const focusedRouteKey = state.routes[state.index].key;
+  const previousRouteKeyRef = React.useRef(focusedRouteKey);
+
+  React.useEffect(() => {
+    const previousRouteKey = previousRouteKeyRef.current;
+
+    if (
+      previousRouteKey !== focusedRouteKey &&
+      descriptors[previousRouteKey]?.options.popToTopOnBlur
+    ) {
+      const prevRoute = state.routes.find(
+        (route) => route.key === previousRouteKey
+      );
+
+      if (prevRoute?.state?.type === 'stack' && prevRoute.state.key) {
+        const popToTopAction = {
+          ...StackActions.popToTop(),
+          target: prevRoute.state.key,
+        };
+        navigation.dispatch(popToTopAction);
+      }
+    }
+
+    previousRouteKeyRef.current = focusedRouteKey;
+  }, [descriptors, focusedRouteKey, navigation, state.index, state.routes]);
+
+  const currentOptions = descriptors[state.routes[state.index].key]?.options;
+
+  const {
+    backgroundColor: tabBarBackgroundColor,
+    shadowColor: tabBarShadowColor,
+  } = currentOptions.tabBarStyle || {};
+
+  const {
+    fontFamily = Platform.select({
+      ios: fonts.medium.fontFamily,
+      default: fonts.regular.fontFamily,
+    }),
+    fontWeight = Platform.select({
+      ios: fonts.medium.fontWeight,
+      default: fonts.regular.fontWeight,
+    }),
+    fontSize,
+    fontStyle,
+  } = currentOptions.tabBarLabelStyle || {};
+
+  const activeTintColor =
+    currentOptions.tabBarActiveTintColor ?? colors.primary;
+
+  const inactiveTintColor =
+    currentOptions.tabBarInactiveTintColor ??
+    Platform.select<ColorValue | string>({
+      ios: PlatformColor('label'),
+      default: colors.text,
+    });
+
+  const activeIndicatorColor =
+    (currentOptions?.tabBarActiveIndicatorColor ??
+    typeof activeTintColor === 'string')
+      ? Color(activeTintColor)?.alpha(0.1).string()
+      : undefined;
+
+  const onTransitionStart = ({
+    closing,
+    route,
+  }: {
+    closing: boolean;
+    route: Route<string>;
+  }) => {
+    navigation.emit({
+      type: 'transitionStart',
+      data: { closing },
+      target: route.key,
+    });
+  };
+
+  const onTransitionEnd = ({
+    closing,
+    route,
+  }: {
+    closing: boolean;
+    route: Route<string>;
+  }) => {
+    navigation.emit({
+      type: 'transitionEnd',
+      data: { closing },
+      target: route.key,
+    });
+  };
+
+  return (
+    <SafeAreaProviderCompat>
+      <BottomTabs
+        tabBarItemLabelVisibilityMode={
+          currentOptions?.tabBarLabelVisibilityMode
+        }
+        tabBarControllerMode={currentOptions?.tabBarControllerMode}
+        tabBarMinimizeBehavior={currentOptions?.tabBarMinimizeBehavior}
+        tabBarTintColor={activeTintColor}
+        tabBarItemIconColor={inactiveTintColor}
+        tabBarItemIconColorActive={activeTintColor}
+        tabBarItemTitleFontColor={inactiveTintColor}
+        tabBarItemTitleFontColorActive={activeTintColor}
+        tabBarItemTitleFontFamily={fontFamily}
+        tabBarItemTitleFontWeight={fontWeight}
+        tabBarItemTitleFontSize={fontSize}
+        tabBarItemTitleFontSizeActive={fontSize}
+        tabBarBackgroundColor={currentOptions.tabBarStyle?.backgroundColor}
+        tabBarItemActiveIndicatorColor={activeIndicatorColor}
+        tabBarItemActiveIndicatorEnabled={
+          currentOptions?.tabBarActiveIndicatorEnabled
+        }
+        tabBarItemRippleColor={currentOptions?.tabBarRippleColor}
+        experimentalControlNavigationStateInJS
+        onNativeFocusChange={(e) => {
+          const route = state.routes.find(
+            (route) => route.key === e.nativeEvent.tabKey
+          );
+
+          if (route) {
+            const isFocused =
+              state.index ===
+              state.routes.findIndex((r) => r.key === route.key);
+
+            const event = navigation.emit({
+              type: 'tabPress',
+              target: route.key,
+              canPreventDefault: true,
+            });
+
+            if (!isFocused && !event.defaultPrevented) {
+              React.startTransition(() => {
+                navigation.dispatch({
+                  ...CommonActions.navigate(route.name, route.params),
+                  target: state.key,
+                });
+              });
+            }
+          }
+        }}
+      >
+        {state.routes.map((route, index) => {
+          const { options, render, navigation } = descriptors[route.key];
+          const isFocused = state.index === index;
+          const isPreloaded = state.preloadedRouteKeys.includes(route.key);
+
+          const {
+            title,
+            lazy = true,
+            tabBarLabel,
+            tabBarBadgeStyle,
+            tabBarIcon,
+            tabBarBadge,
+            tabBarSystemItem,
+          } = options;
+
+          const tabTitle =
+            // On iOS, `systemItem` already provides a localized label
+            // So we should only use `tabBarLabel` if explicitly provided
+            Platform.OS === 'ios' && tabBarSystemItem != null
+              ? tabBarLabel
+              : getLabel({ label: tabBarLabel, title }, route.name);
+
+          const tabItemAppearance: BottomTabsScreenItemStateAppearance = {
+            tabBarItemTitleFontFamily: fontFamily,
+            tabBarItemTitleFontSize: fontSize,
+            tabBarItemTitleFontWeight: fontWeight,
+            tabBarItemTitleFontStyle: fontStyle,
+          };
+
+          const badgeBackgroundColor =
+            tabBarBadgeStyle?.backgroundColor ?? colors.notification;
+          const badgeTextColor =
+            typeof badgeBackgroundColor === 'string' &&
+            Color(badgeBackgroundColor)?.isLight()
+              ? 'black'
+              : 'white';
+
+          const icon =
+            typeof tabBarIcon === 'function'
+              ? getPlatformIcon(tabBarIcon({ focused: false }))
+              : tabBarIcon != null
+                ? getPlatformIcon(tabBarIcon)
+                : undefined;
+
+          const selectedIcon =
+            typeof tabBarIcon === 'function'
+              ? getPlatformIcon(tabBarIcon({ focused: true }))
+              : undefined;
+
+          return (
+            <BottomTabsScreen
+              onWillDisappear={() =>
+                onTransitionStart({ closing: true, route })
+              }
+              onWillAppear={() => onTransitionStart({ closing: false, route })}
+              onDidAppear={() => onTransitionEnd({ closing: false, route })}
+              onDidDisappear={() => onTransitionEnd({ closing: true, route })}
+              key={route.key}
+              tabKey={route.key}
+              icon={icon}
+              selectedIcon={selectedIcon?.ios ?? selectedIcon?.shared}
+              tabBarItemBadgeBackgroundColor={badgeBackgroundColor}
+              tabBarItemBadgeTextColor={badgeTextColor}
+              badgeValue={tabBarBadge?.toString()}
+              systemItem={tabBarSystemItem}
+              isFocused={isFocused}
+              title={tabTitle}
+              standardAppearance={{
+                tabBarBackgroundColor,
+                tabBarShadowColor,
+                stacked: {
+                  normal: tabItemAppearance,
+                },
+                inline: {
+                  normal: tabItemAppearance,
+                },
+                compactInline: {
+                  normal: tabItemAppearance,
+                },
+              }}
+            >
+              <Lazy
+                enabled={lazy ? isFocused || isPreloaded : true}
+                render={() => (
+                  <NativeScreen
+                    route={route}
+                    navigation={navigation}
+                    options={options}
+                  >
+                    {render()}
+                  </NativeScreen>
+                )}
+              />
+            </BottomTabsScreen>
+          );
+        })}
+      </BottomTabs>
+    </SafeAreaProviderCompat>
+  );
+}
+
+function getPlatformIcon(icon: Icon): PlatformIcon {
+  return {
+    ios:
+      icon?.type === 'sfSymbol'
+        ? icon
+        : icon?.type === 'image' && icon.tinted !== false
+          ? {
+              type: 'templateSource',
+              templateSource: icon.source,
+            }
+          : undefined,
+    android: icon?.type === 'drawableResource' ? icon : undefined,
+    shared:
+      icon?.type === 'image'
+        ? {
+            type: 'imageSource',
+            imageSource: icon.source,
+          }
+        : undefined,
+  } as const;
+}

package/src/unstable/NativeBottomTabView.tsx

@@ -0,0 +1,20 @@
+import {
+  type ParamListBase,
+  type TabNavigationState,
+} from '@react-navigation/native';
+
+import type {
+  NativeBottomTabDescriptorMap,
+  NativeBottomTabNavigationConfig,
+  NativeBottomTabNavigationHelpers,
+} from './types';
+
+type Props = NativeBottomTabNavigationConfig & {
+  state: TabNavigationState<ParamListBase>;
+  navigation: NativeBottomTabNavigationHelpers;
+  descriptors: NativeBottomTabDescriptorMap;
+};
+
+export function NativeBottomTabView(_: Props) {
+  throw new Error('Native Bottom Tabs are not supported on this platform.');
+}