@react-navigation/bottom-tabs 7.20.0 → 7.21.0

package/src/unstable/NativeBottomTabView.native.tsx

@@ -6,6 +6,7 @@ import {
 import {
   CommonActions,
   NavigationMetaContext,
+  type NavigationRoute,
   type ParamListBase,
   type Route,
   StackActions,
@@ -19,15 +20,16 @@ import {
   type NativeSyntheticEvent,
   Platform,
   PlatformColor,
+  type TextStyle,
 } from 'react-native';
 import {
-  type PlatformIconAndroid,
-  type PlatformIconIOS,
   type PlatformIconShared,
   Tabs,
   type TabsBottomAccessoryEnvironment,
   type TabSelectedEvent,
   type TabSelectionRejectedEvent,
+  type TabsScreenIconAndroid,
+  type TabsScreenIconIOS,
   type TabsScreenItemStateAppearanceAndroid,
   type TabsScreenItemStateAppearanceIOS,
 } from 'react-native-screens';
@@ -35,6 +37,7 @@ import {
 import { Deferred } from './Deferred';
 import { NativeScreen } from './NativeScreen/NativeScreen';
 import type {
+  NativeBottomTabDescriptor,
   NativeBottomTabDescriptorMap,
   NativeBottomTabIcon,
   NativeBottomTabNavigationConfig,
@@ -50,8 +53,8 @@ type Props = NativeBottomTabNavigationConfig & {
 };
 
 type PlatformIcon = {
-  ios?: PlatformIconIOS;
-  android?: PlatformIconAndroid;
+  ios?: TabsScreenIconIOS;
+  android?: TabsScreenIconAndroid;
   shared?: PlatformIconShared;
 };
 
@@ -76,6 +79,9 @@ const meta = {
   type: 'native-tabs',
 };
 
+const SUPPORTS_PROMINENT_TAB =
+  Platform.OS === 'ios' && parseInt(Platform.Version, 10) >= 27;
+
 function reducer(state: NativeState, action: NativeAction): NativeState {
   switch (action.type) {
     case 'CONFIRM_STATE':
@@ -274,49 +280,32 @@ export function NativeBottomTabView({ state, navigation, descriptors }: Props) {
     color: fontColor,
   } = currentOptions.tabBarLabelStyle || {};
 
-  const activeTintColor =
-    currentOptions.tabBarActiveTintColor ?? colors.primary;
+  const { activeIndicatorColor, activeTintColor, inactiveTintColor } =
+    React.useMemo(() => {
+      const activeTintColor =
+        currentOptions.tabBarActiveTintColor ?? colors.primary;
 
-  const inactiveTintColor =
-    currentOptions.tabBarInactiveTintColor ??
-    Platform.select<ColorValue | string>({
-      ios: PlatformColor('label'),
-      default: colors.text,
-    });
+      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,
-    });
-  };
+      const activeIndicatorColor =
+        currentOptions?.tabBarActiveIndicatorColor ??
+        (typeof activeTintColor === 'string'
+          ? Color(activeTintColor)?.alpha(0.1).string()
+          : undefined);
+
+      return { activeIndicatorColor, activeTintColor, inactiveTintColor };
+    }, [
+      currentOptions?.tabBarActiveIndicatorColor,
+      currentOptions.tabBarActiveTintColor,
+      currentOptions.tabBarInactiveTintColor,
+      colors.primary,
+      colors.text,
+    ]);
 
   const tabBarControllerMode =
     currentOptions.tabBarControllerMode === 'auto'
@@ -330,6 +319,17 @@ export function NativeBottomTabView({ state, navigation, descriptors }: Props) {
         ? 'never'
         : currentOptions.tabBarMinimizeBehavior;
 
+  const tabBarSidebarPreferredPlacement =
+    currentOptions.tabBarSidebarPreferredPlacement === 'auto'
+      ? 'automatic'
+      : currentOptions.tabBarSidebarPreferredPlacement;
+
+  const prominentScreenKey = SUPPORTS_PROMINENT_TAB
+    ? state.routes.find(
+        (route) => descriptors[route.key]?.options.tabBarRole === 'prominent'
+      )?.key
+    : undefined;
+
   const shouldHideTabBar = currentOptions.tabBarStyle?.display === 'none';
 
   const bottomAccessory = currentOptions.bottomAccessory;
@@ -349,182 +349,49 @@ export function NativeBottomTabView({ state, navigation, descriptors }: Props) {
         colorScheme={dark ? 'dark' : 'light'}
         nativeContainerStyle={{ backgroundColor: colors.background }}
         ios={{
+          prominentScreenKey,
           bottomAccessory: bottomAccessory
             ? (environment: TabsBottomAccessoryEnvironment) =>
                 bottomAccessory({ placement: environment })
             : undefined,
+          tabBarHiddenAnimationEnabled:
+            currentOptions.tabBarVisibilityAnimationEnabled,
           tabBarControllerMode,
+          tabBarSidebarPreferredPlacement,
           tabBarMinimizeBehavior,
           tabBarTintColor: activeTintColor,
         }}
       >
         {state.routes.map((route, index) => {
-          const { options, render, navigation } = descriptors[route.key];
+          const descriptor = descriptors[route.key];
           const isFocused = state.index === index;
           const isPreloaded = state.preloadedRouteKeys.includes(route.key);
 
-          const {
-            title,
-            lazy = false,
-            tabBarLabel,
-            tabBarSelectionEnabled,
-            tabBarRepeatedPressBehavior,
-            tabBarBadgeStyle,
-            tabBarIcon,
-            tabBarBadge,
-            tabBarSystemItem,
-            tabBarBlurEffect = dark ? 'systemMaterialDark' : 'systemMaterial',
-            tabBarStyle,
-            overrideScrollViewContentInsetAdjustmentBehavior,
-          } = options;
-
-          const {
-            backgroundColor: tabBarBackgroundColor,
-            shadowColor: tabBarShadowColor,
-          } = tabBarStyle || {};
-
-          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 badgeBackgroundColor =
-            tabBarBadgeStyle?.backgroundColor ?? colors.notification;
-          const badgeTextColor =
-            tabBarBadgeStyle?.color ??
-            (typeof badgeBackgroundColor === 'string'
-              ? Color(badgeBackgroundColor).isLight()
-                ? 'black'
-                : 'white'
-              : undefined);
-
-          const tabItemAppearance: TabsScreenItemStateAppearanceIOS = {
-            tabBarItemTitleFontFamily: fontFamily,
-            tabBarItemTitleFontSize: fontSize,
-            tabBarItemTitleFontWeight: fontWeight,
-            tabBarItemTitleFontStyle: fontStyle,
-            tabBarItemTitleFontColor: inactiveTintColor ?? fontColor,
-            tabBarItemIconColor: inactiveTintColor,
-            tabBarItemBadgeBackgroundColor: badgeBackgroundColor,
-          };
-
-          const normalTabItemAppearance: TabsScreenItemStateAppearanceAndroid =
-            {
-              tabBarItemTitleFontColor: inactiveTintColor ?? fontColor,
-              tabBarItemIconColor: inactiveTintColor,
-            };
-
-          const selectedTabItemAppearance: TabsScreenItemStateAppearanceAndroid =
-            {
-              tabBarItemTitleFontColor: activeTintColor,
-              tabBarItemIconColor: activeTintColor,
-            };
-
-          const icon =
-            typeof tabBarIcon === 'function'
-              ? getPlatformIcon(tabBarIcon({ focused: false }))
-              : tabBarIcon != null
-                ? getPlatformIcon(tabBarIcon)
-                : undefined;
-
-          const selectedIcon =
-            typeof tabBarIcon === 'function'
-              ? getPlatformIcon(tabBarIcon({ focused: true }))
-              : undefined;
+          const { lazy = false } = descriptor.options;
 
           return (
-            <Tabs.Screen
-              onWillDisappear={() =>
-                onTransitionStart({ closing: true, route })
-              }
-              onWillAppear={() => onTransitionStart({ closing: false, route })}
-              onDidAppear={() => onTransitionEnd({ closing: false, route })}
-              onDidDisappear={() => onTransitionEnd({ closing: true, route })}
+            <TabScene
               key={route.key}
-              screenKey={route.key}
-              preventNativeSelection={tabBarSelectionEnabled === false}
-              badgeValue={tabBarBadge?.toString()}
-              title={tabTitle}
-              nativeContainerStyle={{ backgroundColor: colors.background }}
-              specialEffects={{
-                repeatedTabSelection: {
-                  popToRoot: tabBarRepeatedPressBehavior?.popToTop !== false,
-                  scrollToTop:
-                    tabBarRepeatedPressBehavior?.scrollToTop !== false,
-                },
-              }}
-              android={{
-                icon: icon?.android ?? icon?.shared,
-                selectedIcon: selectedIcon?.android ?? selectedIcon?.shared,
-                standardAppearance: {
-                  tabBarBackgroundColor: tabBarBackgroundColor ?? colors.card,
-                  tabBarItemRippleColor: currentOptions?.tabBarRippleColor,
-                  tabBarItemLabelVisibilityMode:
-                    currentOptions?.tabBarLabelVisibilityMode,
-                  normal: normalTabItemAppearance,
-                  selected: selectedTabItemAppearance,
-                  tabBarItemActiveIndicatorColor: activeIndicatorColor,
-                  tabBarItemActiveIndicatorEnabled:
-                    currentOptions?.tabBarActiveIndicatorEnabled,
-                  tabBarItemTitleFontFamily: fontFamily,
-                  tabBarItemTitleFontWeight: fontWeight,
-                  tabBarItemTitleSmallLabelFontSize: fontSize,
-                  tabBarItemTitleLargeLabelFontSize: fontSize,
-                  tabBarItemTitleFontStyle: fontStyle,
-                  tabBarItemBadgeBackgroundColor: badgeBackgroundColor,
-                  tabBarItemBadgeTextColor: badgeTextColor,
-                },
-              }}
-              ios={{
-                icon: icon?.ios ?? icon?.shared,
-                selectedIcon: selectedIcon?.ios ?? selectedIcon?.shared,
-                systemItem: tabBarSystemItem,
-                scrollEdgeAppearance: {
-                  tabBarBackgroundColor,
-                  tabBarShadowColor,
-                  tabBarBlurEffect,
-                  stacked: {
-                    normal: tabItemAppearance,
-                  },
-                  inline: {
-                    normal: tabItemAppearance,
-                  },
-                  compactInline: {
-                    normal: tabItemAppearance,
-                  },
-                },
-                standardAppearance: {
-                  tabBarBackgroundColor,
-                  tabBarShadowColor,
-                  tabBarBlurEffect,
-                  stacked: {
-                    normal: tabItemAppearance,
-                  },
-                  inline: {
-                    normal: tabItemAppearance,
-                  },
-                  compactInline: {
-                    normal: tabItemAppearance,
-                  },
-                },
-                overrideScrollViewContentInsetAdjustmentBehavior,
-              }}
-            >
-              <Deferred lazy={lazy} visible={isFocused || isPreloaded}>
-                <ScreenWithHeader
-                  isFocused={isFocused}
-                  route={route}
-                  navigation={navigation}
-                  options={options}
-                >
-                  <NavigationMetaContext.Provider value={meta}>
-                    {render()}
-                  </NavigationMetaContext.Provider>
-                </ScreenWithHeader>
-              </Deferred>
-            </Tabs.Screen>
+              route={route}
+              descriptor={descriptor}
+              navigation={navigation}
+              isFocused={isFocused}
+              lazy={lazy}
+              visible={isFocused || isPreloaded}
+              fontFamily={fontFamily}
+              fontWeight={fontWeight}
+              fontSize={fontSize}
+              fontStyle={fontStyle}
+              fontColor={fontColor}
+              activeTintColor={activeTintColor}
+              inactiveTintColor={inactiveTintColor}
+              activeIndicatorColor={activeIndicatorColor}
+              rippleColor={currentOptions.tabBarRippleColor}
+              labelVisibilityMode={currentOptions.tabBarLabelVisibilityMode}
+              activeIndicatorEnabled={
+                currentOptions.tabBarActiveIndicatorEnabled
+              }
+            />
           );
         })}
       </Tabs.Host>
@@ -532,6 +399,258 @@ export function NativeBottomTabView({ state, navigation, descriptors }: Props) {
   );
 }
 
+type TabSceneProps = {
+  route: NavigationRoute<ParamListBase, string>;
+  descriptor: NativeBottomTabDescriptor;
+  navigation: NativeBottomTabNavigationHelpers;
+  isFocused: boolean;
+  lazy: boolean;
+  visible: boolean;
+  fontFamily: TextStyle['fontFamily'];
+  fontWeight: TextStyle['fontWeight'];
+  fontSize: TextStyle['fontSize'];
+  fontStyle: TextStyle['fontStyle'];
+  fontColor: TextStyle['color'];
+  activeTintColor: ColorValue;
+  inactiveTintColor: ColorValue;
+  activeIndicatorColor: ColorValue | undefined;
+  rippleColor: ColorValue | undefined;
+  labelVisibilityMode: NativeBottomTabNavigationOptions['tabBarLabelVisibilityMode'];
+  activeIndicatorEnabled: boolean | undefined;
+};
+
+const TabScene = React.memo(function TabScene({
+  route,
+  descriptor,
+  navigation,
+  isFocused,
+  lazy,
+  visible,
+  fontFamily,
+  fontWeight,
+  fontSize,
+  fontStyle,
+  fontColor,
+  activeTintColor,
+  inactiveTintColor,
+  activeIndicatorColor,
+  rippleColor,
+  labelVisibilityMode,
+  activeIndicatorEnabled,
+}: TabSceneProps) {
+  const { dark, colors } = useTheme();
+
+  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,
+    });
+  };
+
+  const { options, render } = descriptor;
+
+  const {
+    title,
+    tabBarLabel,
+    tabBarLabelPositionAdjustment,
+    tabBarSelectionEnabled,
+    tabBarRepeatedPressBehavior,
+    tabBarBadgeStyle,
+    tabBarIcon,
+    tabBarIconSize,
+    tabBarActiveIndicatorWidth,
+    tabBarActiveIndicatorHeight,
+    tabBarBadge,
+    tabBarSystemItem,
+    tabBarRole,
+    tabBarSearchAutoFocus,
+    tabBarBlurEffect = dark ? 'systemMaterialDark' : 'systemMaterial',
+    tabBarStyle,
+    overrideScrollViewContentInsetAdjustmentBehavior,
+  } = options;
+
+  const systemItem =
+    tabBarSystemItem ??
+    // Setting the `role` to 'search' doesn't add title and icon automatically
+    // So we also set `tabBarSystemItem` to 'search' to match SwiftUI's behavior
+    (tabBarRole === 'search' ? 'search' : undefined);
+
+  const {
+    backgroundColor: tabBarBackgroundColor,
+    shadowColor: tabBarShadowColor,
+  } = tabBarStyle || {};
+
+  const tabTitle =
+    // On iOS, `systemItem` already provides a localized label
+    // So we should only use `tabBarLabel` if explicitly provided
+    Platform.OS === 'ios' && systemItem != null
+      ? tabBarLabel
+      : getLabel({ label: tabBarLabel, title }, route.name);
+
+  const badgeBackgroundColor =
+    tabBarBadgeStyle?.backgroundColor ?? colors.notification;
+  const badgeTextColor =
+    tabBarBadgeStyle?.color ??
+    (typeof badgeBackgroundColor === 'string'
+      ? Color(badgeBackgroundColor).isLight()
+        ? 'black'
+        : 'white'
+      : undefined);
+
+  const tabItemAppearance: TabsScreenItemStateAppearanceIOS = {
+    tabBarItemTitleFontFamily: fontFamily,
+    tabBarItemTitleFontSize: fontSize,
+    tabBarItemTitleFontWeight: fontWeight,
+    tabBarItemTitleFontStyle: fontStyle,
+    tabBarItemTitleFontColor: inactiveTintColor ?? fontColor,
+    tabBarItemIconColor: inactiveTintColor,
+    tabBarItemBadgeBackgroundColor: badgeBackgroundColor,
+  };
+
+  const tabItemLayoutAppearance = {
+    stacked: {
+      normal: {
+        ...tabItemAppearance,
+        tabBarItemTitlePositionAdjustment:
+          tabBarLabelPositionAdjustment?.stacked,
+      },
+    },
+    inline: {
+      normal: {
+        ...tabItemAppearance,
+        tabBarItemTitlePositionAdjustment:
+          tabBarLabelPositionAdjustment?.inline,
+      },
+    },
+    compactInline: {
+      normal: {
+        ...tabItemAppearance,
+        tabBarItemTitlePositionAdjustment:
+          tabBarLabelPositionAdjustment?.compactInline,
+      },
+    },
+  };
+
+  const normalTabItemAppearance: TabsScreenItemStateAppearanceAndroid = {
+    tabBarItemTitleFontColor: inactiveTintColor ?? fontColor,
+    tabBarItemIconColor: inactiveTintColor,
+  };
+
+  const selectedTabItemAppearance: TabsScreenItemStateAppearanceAndroid = {
+    tabBarItemTitleFontColor: activeTintColor,
+    tabBarItemIconColor: activeTintColor,
+  };
+
+  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 (
+    <Tabs.Screen
+      onWillDisappear={() => onTransitionStart({ closing: true, route })}
+      onWillAppear={() => onTransitionStart({ closing: false, route })}
+      onDidAppear={() => onTransitionEnd({ closing: false, route })}
+      onDidDisappear={() => onTransitionEnd({ closing: true, route })}
+      screenKey={route.key}
+      preventNativeSelection={tabBarSelectionEnabled === false}
+      badgeValue={tabBarBadge?.toString()}
+      title={tabTitle}
+      style={{ backgroundColor: colors.background }}
+      specialEffects={{
+        repeatedTabSelection: {
+          popToRoot: tabBarRepeatedPressBehavior?.popToTop !== false,
+          scrollToTop: tabBarRepeatedPressBehavior?.scrollToTop !== false,
+        },
+      }}
+      android={{
+        icon: icon?.android ?? icon?.shared,
+        selectedIcon: selectedIcon?.android ?? selectedIcon?.shared,
+        standardAppearance: {
+          tabBarBackgroundColor: tabBarBackgroundColor ?? colors.card,
+          tabBarItemRippleColor: rippleColor,
+          tabBarItemLabelVisibilityMode: labelVisibilityMode,
+          normal: normalTabItemAppearance,
+          selected: selectedTabItemAppearance,
+          tabBarItemIconSize: tabBarIconSize,
+          tabBarItemActiveIndicatorColor: activeIndicatorColor,
+          tabBarItemActiveIndicatorEnabled: activeIndicatorEnabled,
+          tabBarItemActiveIndicatorWidth: tabBarActiveIndicatorWidth,
+          tabBarItemActiveIndicatorHeight: tabBarActiveIndicatorHeight,
+          tabBarItemTitleFontFamily: fontFamily,
+          tabBarItemTitleFontWeight: fontWeight,
+          tabBarItemTitleSmallLabelFontSize: fontSize,
+          tabBarItemTitleLargeLabelFontSize: fontSize,
+          tabBarItemTitleFontStyle: fontStyle,
+          tabBarItemBadgeBackgroundColor: badgeBackgroundColor,
+          tabBarItemBadgeTextColor: badgeTextColor,
+        },
+      }}
+      ios={{
+        icon: icon?.ios ?? icon?.shared,
+        selectedIcon: selectedIcon?.ios ?? selectedIcon?.shared,
+        systemItem,
+        role: tabBarRole === 'search' ? tabBarRole : undefined,
+        automaticallyActivatesSearch: tabBarSearchAutoFocus,
+        scrollEdgeAppearance: {
+          tabBarBackgroundColor,
+          tabBarShadowColor,
+          tabBarBlurEffect,
+          ...tabItemLayoutAppearance,
+        },
+        standardAppearance: {
+          tabBarBackgroundColor,
+          tabBarShadowColor,
+          tabBarBlurEffect,
+          ...tabItemLayoutAppearance,
+        },
+        overrideScrollViewContentInsetAdjustmentBehavior,
+      }}
+    >
+      <Deferred lazy={lazy} visible={visible}>
+        <ScreenWithHeader
+          isFocused={isFocused}
+          route={route}
+          navigation={descriptor.navigation}
+          options={options}
+        >
+          <NavigationMetaContext.Provider value={meta}>
+            {render()}
+          </NavigationMetaContext.Provider>
+        </ScreenWithHeader>
+      </Deferred>
+    </Tabs.Screen>
+  );
+});
+
 function ScreenWithHeader({
   isFocused,
   route,
@@ -593,28 +712,47 @@ function getPlatformIcon(icon: NativeBottomTabIcon): PlatformIcon {
   switch (icon.type) {
     case 'sfSymbol':
       return {
-        ios: icon,
+        ios: {
+          type: 'sfSymbol',
+          name: icon.name,
+          renderingMode:
+            icon.renderingMode === 'multicolor'
+              ? 'original'
+              : icon.renderingMode,
+        },
         android: undefined,
         shared: undefined,
       };
-    case 'image':
+    case 'image': {
+      // A `{ uri: 'name' }` source maps to an Android drawable by name.
+      const drawableName =
+        typeof icon.source === 'object' &&
+        'uri' in icon.source &&
+        icon.source.uri?.includes(':') === false
+          ? icon.source.uri
+          : undefined;
+
       return {
-        ios:
-          icon.tinted === false
+        ios: {
+          type: 'imageSource',
+          imageSource: icon.source,
+          renderingMode: icon.tinted === false ? 'original' : 'template',
+        },
+        android:
+          drawableName != null
             ? {
-                type: 'imageSource',
-                imageSource: icon.source,
+                type: 'drawableResource',
+                name: drawableName,
+                tinting: icon.tinted === false ? 'original' : 'tinted',
               }
             : {
-                type: 'templateSource',
-                templateSource: icon.source,
+                type: 'imageSource',
+                imageSource: icon.source,
+                tinting: icon.tinted === false ? 'original' : 'tinted',
               },
-        android: undefined,
-        shared: {
-          type: 'imageSource',
-          imageSource: icon.source,
-        },
+        shared: undefined,
       };
+    }
     default: {
       const _exhaustiveCheck: never = icon;