@react-navigation/bottom-tabs 8.0.0-alpha.55 → 8.0.0-alpha.57

package/lib/module/views/BottomTabViewNativeImpl.js

@@ -2,7 +2,7 @@
 
 import { getLabel } from '@react-navigation/elements';
 import { ActivityView, Color, SafeAreaProviderCompat } from '@react-navigation/elements/internal';
-import { CommonActions, MaterialSymbol, StackActions, useTheme } from '@react-navigation/native';
+import { CommonActions, MaterialSymbol, StackActions, useLocale, useTheme } from '@react-navigation/native';
 import * as React from 'react';
 import { Animated, Platform, PlatformColor, StyleSheet } from 'react-native';
 import { Tabs } from 'react-native-screens';
@@ -16,6 +16,7 @@ const ICON_SIZE = Platform.select({
   ios: 25,
   default: 24
 });
+const SUPPORTS_PROMINENT_TAB = Platform.OS === 'ios' && parseInt(Platform.Version, 10) >= 27;
 function reducer(state, action) {
   switch (action.type) {
     case 'TRACK_TRANSITION':
@@ -221,59 +222,54 @@ export function BottomTabViewNative({
   } = currentOptions.tabBarLabelStyle || {};
   const backgroundColor = currentOptions.tabBarStyle?.backgroundColor ?? colors.background;
   const shouldHideTabBar = currentOptions.tabBarStyle?.display === 'none';
-  let activeIndicatorColor = currentOptions?.tabBarActiveIndicatorColor;
-  let activeTintColor = currentOptions.tabBarActiveTintColor;
-  let inactiveTintColor = currentOptions.tabBarInactiveTintColor;
+  const {
+    activeIndicatorColor,
+    activeTintColor,
+    inactiveTintColor
+  } = React.useMemo(() => {
+    let activeIndicatorColor = currentOptions?.tabBarActiveIndicatorColor;
+    let activeTintColor = currentOptions.tabBarActiveTintColor;
+    let inactiveTintColor = currentOptions.tabBarInactiveTintColor;
 
-  // Derive colors based on Material Design guidelines
-  // https://m3.material.io/components/navigation-bar/specs
-  if (Platform.OS === 'android') {
-    switch (getAndroidColorName(backgroundColor)) {
-      case 'system_surface_container_light':
-      case 'system_surface_container_high_light':
-      case 'system_surface_container_highest_light':
-      case 'system_surface_container_low_light':
-      case 'system_surface_container_lowest_light':
-        inactiveTintColor = inactiveTintColor ?? PlatformColor('@android:color/system_on_surface_variant_light');
-        activeTintColor = activeTintColor ?? PlatformColor('@android:color/system_on_secondary_container_light');
-        activeIndicatorColor = activeIndicatorColor ?? PlatformColor('@android:color/system_secondary_container_light');
-        break;
-      case 'system_surface_container_dark':
-      case 'system_surface_container_high_dark':
-      case 'system_surface_container_highest_dark':
-      case 'system_surface_container_low_dark':
-      case 'system_surface_container_lowest_dark':
-        inactiveTintColor = inactiveTintColor ?? PlatformColor('@android:color/system_on_surface_variant_dark');
-        activeTintColor = activeTintColor ?? PlatformColor('@android:color/system_on_secondary_container_dark');
-        activeIndicatorColor = activeIndicatorColor ?? PlatformColor('@android:color/system_secondary_container_dark');
-        break;
+    // Derive colors based on Material Design guidelines
+    // https://m3.material.io/components/navigation-bar/specs
+    if (Platform.OS === 'android') {
+      switch (getAndroidColorName(backgroundColor)) {
+        case 'system_surface_container_light':
+        case 'system_surface_container_high_light':
+        case 'system_surface_container_highest_light':
+        case 'system_surface_container_low_light':
+        case 'system_surface_container_lowest_light':
+          inactiveTintColor = inactiveTintColor ?? PlatformColor('@android:color/system_on_surface_variant_light');
+          activeTintColor = activeTintColor ?? PlatformColor('@android:color/system_on_secondary_container_light');
+          activeIndicatorColor = activeIndicatorColor ?? PlatformColor('@android:color/system_secondary_container_light');
+          break;
+        case 'system_surface_container_dark':
+        case 'system_surface_container_high_dark':
+        case 'system_surface_container_highest_dark':
+        case 'system_surface_container_low_dark':
+        case 'system_surface_container_lowest_dark':
+          inactiveTintColor = inactiveTintColor ?? PlatformColor('@android:color/system_on_surface_variant_dark');
+          activeTintColor = activeTintColor ?? PlatformColor('@android:color/system_on_secondary_container_dark');
+          activeIndicatorColor = activeIndicatorColor ?? PlatformColor('@android:color/system_secondary_container_dark');
+          break;
+      }
     }
-  }
-  inactiveTintColor = inactiveTintColor ?? Platform.select({
-    ios: PlatformColor('label'),
-    default: colors.text
-  });
-  activeTintColor = activeTintColor ?? colors.primary;
-  activeIndicatorColor = activeIndicatorColor ?? Platform.select({
-    android: Color(activeTintColor)?.alpha(0.075).string(),
-    default: undefined
-  });
-  const onTransitionStart = ({
-    route
-  }) => {
-    navigation.emit({
-      type: 'transitionStart',
-      target: route.key
+    inactiveTintColor = inactiveTintColor ?? Platform.select({
+      ios: PlatformColor('label'),
+      default: colors.text
     });
-  };
-  const onTransitionEnd = ({
-    route
-  }) => {
-    navigation.emit({
-      type: 'transitionEnd',
-      target: route.key
+    activeTintColor = activeTintColor ?? colors.primary;
+    activeIndicatorColor = activeIndicatorColor ?? Platform.select({
+      android: Color(activeTintColor)?.alpha(0.075).string(),
+      default: undefined
     });
-  };
+    return {
+      activeIndicatorColor,
+      activeTintColor,
+      inactiveTintColor
+    };
+  }, [currentOptions?.tabBarActiveIndicatorColor, currentOptions.tabBarActiveTintColor, currentOptions.tabBarInactiveTintColor, backgroundColor, colors.primary, colors.text]);
   const tabBarPosition = useTabBarPosition(currentOptions);
   const hasCustomTabBar = tabBar != null;
   const tabBarElement = tabBar ? tabBar({
@@ -283,6 +279,8 @@ export function BottomTabViewNative({
   }) : null;
   const tabBarControllerMode = currentOptions.tabBarControllerMode === 'auto' ? 'automatic' : currentOptions.tabBarControllerMode;
   const tabBarMinimizeBehavior = currentOptions.tabBarMinimizeBehavior === 'auto' ? 'automatic' : currentOptions.tabBarMinimizeBehavior === 'none' ? '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 bottomAccessory = currentOptions.bottomAccessory;
   return /*#__PURE__*/_jsxs(SafeAreaProviderCompat, {
     style: {
@@ -303,10 +301,13 @@ export function BottomTabViewNative({
         backgroundColor: colors.background
       },
       ios: {
+        prominentScreenKey,
         bottomAccessory: bottomAccessory ? environment => bottomAccessory({
           placement: environment
         }) : undefined,
+        tabBarHiddenAnimationEnabled: currentOptions.tabBarVisibilityAnimationEnabled,
         tabBarControllerMode,
+        tabBarSidebarPreferredPlacement,
         tabBarMinimizeBehavior,
         tabBarTintColor: activeTintColor
       },
@@ -315,197 +316,286 @@ export function BottomTabViewNative({
         if (descriptor == null) {
           throw new Error(`Couldn't find a descriptor for route '${route.key}'.`);
         }
-        const {
-          options,
-          render,
-          navigation
-        } = descriptor;
         const isFocused = state.index === index;
         const isPreloaded = state.preloadedRouteKeys.includes(route.key);
         const {
-          title,
           lazy = false,
-          inactiveBehavior = 'pause',
-          tabBarLabel,
-          tabBarSelectionEnabled,
-          tabBarRepeatedPressBehavior,
-          tabBarBadgeStyle,
-          tabBarIcon,
-          tabBarBadge,
-          tabBarSystemItem,
-          tabBarBlurEffect = dark ? 'systemMaterialDark' : 'systemMaterial',
-          tabBarStyle,
-          tabBarAccessibilityLabel,
-          tabBarButtonTestID,
-          sceneStyle,
-          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 ?? Color.foreground(badgeBackgroundColor);
-        const tabItemAppearance = {
-          tabBarItemTitleFontFamily: fontFamily,
-          tabBarItemTitleFontSize: fontSize,
-          tabBarItemTitleFontWeight: fontWeight,
-          tabBarItemTitleFontStyle: fontStyle,
-          tabBarItemTitleFontColor: inactiveTintColor ?? fontColor,
-          tabBarItemIconColor: inactiveTintColor,
-          tabBarItemBadgeBackgroundColor: badgeBackgroundColor
-        };
-        const normalTabItemAppearance = {
-          tabBarItemTitleFontColor: inactiveTintColor ?? fontColor,
-          tabBarItemIconColor: inactiveTintColor
-        };
-        const selectedTabItemAppearance = {
-          tabBarItemTitleFontColor: activeTintColor,
-          tabBarItemIconColor: activeTintColor
-        };
-        const getIcon = selected => {
-          if (typeof tabBarIcon === 'function') {
-            const result = tabBarIcon({
-              focused: selected,
-              size: ICON_SIZE,
-              color: selected ? activeTintColor : inactiveTintColor
-            });
-            if (/*#__PURE__*/React.isValidElement(result)) {
-              throw new Error(`Returning a React element from 'tabBarIcon' is not supported with native tab bar.`);
-            } else if (result && typeof result === 'object' && 'type' in result) {
-              return getPlatformIcon(result);
-            } else {
-              throw new Error(`The 'tabBarIcon' function must return an icon object (got ${typeof result}).`);
-            }
-          } else if (tabBarIcon != null) {
-            return getPlatformIcon(tabBarIcon);
-          }
-          return undefined;
-        };
-
-        // An error is thrown for React Elements in `getIcon`
-        // So we only call it when we actually render a native tab bar
-        const icon = hasCustomTabBar ? undefined : getIcon(false);
-        const selectedIcon = !hasCustomTabBar && typeof tabBarIcon === 'function' ? getIcon(true) : icon;
+          inactiveBehavior = 'pause'
+        } = descriptor.options;
 
         // For preloaded screens and if lazy is false,
         // Keep them active so that the effects can run
         const isActive = inactiveBehavior === 'none' || isPreloaded || nativeState.lastTransition?.from === route.key || nativeState.lastTransition?.to === route.key || lazy === false && !loaded.includes(route.key);
-        return /*#__PURE__*/_jsx(Tabs.Screen, {
-          onWillAppear: () => onTransitionStart({
-            route
-          }),
-          onDidAppear: () => onTransitionEnd({
-            route
-          }),
-          screenKey: route.key,
-          tabBarItemAccessibilityLabel: tabBarAccessibilityLabel,
-          tabBarItemTestID: tabBarButtonTestID,
-          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 ?? backgroundColor,
-              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
-          },
-          children: /*#__PURE__*/_jsx(Deferred, {
-            lazy: lazy,
-            visible: isFocused || isPreloaded || loaded.includes(route.key),
-            children: /*#__PURE__*/_jsx(ActivityView, {
-              mode: isFocused ? 'normal' : isActive ? 'inert' : 'paused',
-              visible:
-              // We don't need to hide the content since it's handled natively
-              // Hiding may also cause flash due to lag after native tab switch
-              // So we leave it always visible
-              true,
-              style: StyleSheet.absoluteFill,
-              children: /*#__PURE__*/_jsx(ScreenContent, {
-                isFocused: isFocused,
-                route: route,
-                navigation: navigation,
-                options: options,
-                style: sceneStyle,
-                children: /*#__PURE__*/_jsx(AnimatedScreenContent, {
-                  isFocused: isFocused,
-                  children: /*#__PURE__*/_jsx(BottomTabBarHeightContext.Provider, {
-                    value: 0,
-                    children: render()
-                  })
-                })
-              })
-            }, route.key)
-          })
+        return /*#__PURE__*/_jsx(TabScene, {
+          route: route,
+          descriptor: descriptor,
+          navigation: navigation,
+          isFocused: isFocused,
+          isActive: isActive,
+          lazy: lazy,
+          visible: isFocused || isPreloaded || loaded.includes(route.key),
+          hasCustomTabBar: hasCustomTabBar,
+          fontFamily: fontFamily,
+          fontWeight: fontWeight,
+          fontSize: fontSize,
+          fontStyle: fontStyle,
+          fontColor: fontColor,
+          backgroundColor: backgroundColor,
+          activeTintColor: activeTintColor,
+          inactiveTintColor: inactiveTintColor,
+          activeIndicatorColor: activeIndicatorColor,
+          rippleColor: currentOptions.tabBarRippleColor,
+          labelVisibilityMode: currentOptions.tabBarLabelVisibilityMode,
+          activeIndicatorEnabled: currentOptions.tabBarActiveIndicatorEnabled
         }, route.key);
       })
     }), tabBarPosition === 'bottom' || tabBarPosition === 'right' ? tabBarElement : null]
   });
 }
+const TabScene = /*#__PURE__*/React.memo(function TabScene({
+  route,
+  descriptor,
+  navigation,
+  isFocused,
+  isActive,
+  lazy,
+  visible,
+  hasCustomTabBar,
+  fontFamily,
+  fontWeight,
+  fontSize,
+  fontStyle,
+  fontColor,
+  backgroundColor,
+  activeTintColor,
+  inactiveTintColor,
+  activeIndicatorColor,
+  rippleColor,
+  labelVisibilityMode,
+  activeIndicatorEnabled
+}) {
+  const {
+    dark,
+    colors
+  } = useTheme();
+  const {
+    direction
+  } = useLocale();
+  const onTransitionStart = ({
+    route
+  }) => {
+    navigation.emit({
+      type: 'transitionStart',
+      target: route.key
+    });
+  };
+  const onTransitionEnd = ({
+    route
+  }) => {
+    navigation.emit({
+      type: 'transitionEnd',
+      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,
+    tabBarAccessibilityLabel,
+    tabBarButtonTestID,
+    sceneStyle,
+    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 ?? Color.foreground(badgeBackgroundColor);
+  const tabItemAppearance = {
+    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 = {
+    tabBarItemTitleFontColor: inactiveTintColor ?? fontColor,
+    tabBarItemIconColor: inactiveTintColor
+  };
+  const selectedTabItemAppearance = {
+    tabBarItemTitleFontColor: activeTintColor,
+    tabBarItemIconColor: activeTintColor
+  };
+  const iconSize = Platform.OS === 'android' ? tabBarIconSize ?? ICON_SIZE : ICON_SIZE;
+  const getIcon = selected => {
+    if (typeof tabBarIcon === 'function') {
+      const result = tabBarIcon({
+        focused: selected,
+        size: iconSize,
+        color: selected ? activeTintColor : inactiveTintColor
+      });
+      if (/*#__PURE__*/React.isValidElement(result)) {
+        throw new Error(`Returning a React element from 'tabBarIcon' is not supported with native tab bar.`);
+      } else if (result && typeof result === 'object' && 'type' in result) {
+        return getPlatformIcon(result, direction, iconSize);
+      } else {
+        throw new Error(`The 'tabBarIcon' function must return an icon object (got ${typeof result}).`);
+      }
+    } else if (tabBarIcon != null) {
+      return getPlatformIcon(tabBarIcon, direction, iconSize);
+    }
+    return undefined;
+  };
+
+  // An error is thrown for React Elements in `getIcon`
+  // So we only call it when we actually render a native tab bar
+  const icon = hasCustomTabBar ? undefined : getIcon(false);
+  const selectedIcon = !hasCustomTabBar && typeof tabBarIcon === 'function' ? getIcon(true) : icon;
+  return /*#__PURE__*/_jsx(Tabs.Screen, {
+    onWillAppear: () => onTransitionStart({
+      route
+    }),
+    onDidAppear: () => onTransitionEnd({
+      route
+    }),
+    screenKey: route.key,
+    tabBarItemAccessibilityLabel: tabBarAccessibilityLabel,
+    tabBarItemTestID: tabBarButtonTestID,
+    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 ?? backgroundColor,
+        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
+    },
+    children: /*#__PURE__*/_jsx(Deferred, {
+      lazy: lazy,
+      visible: visible,
+      children: /*#__PURE__*/_jsx(ActivityView, {
+        mode: isFocused ? 'normal' : isActive ? 'inert' : 'paused',
+        visible:
+        // We don't need to hide the content since it's handled natively
+        // Hiding may also cause flash due to lag after native tab switch
+        // So we leave it always visible
+        true,
+        style: StyleSheet.absoluteFill,
+        children: /*#__PURE__*/_jsx(ScreenContent, {
+          isFocused: isFocused,
+          route: route,
+          navigation: descriptor.navigation,
+          options: options,
+          style: sceneStyle,
+          children: /*#__PURE__*/_jsx(AnimatedScreenContent, {
+            isFocused: isFocused,
+            children: /*#__PURE__*/_jsx(BottomTabBarHeightContext.Provider, {
+              value: 0,
+              children: render()
+            })
+          })
+        })
+      }, route.key)
+    })
+  });
+});
 function AnimatedScreenContent({
   isFocused,
   children
@@ -531,11 +621,15 @@ function AnimatedScreenContent({
     children: children
   });
 }
-function getPlatformIcon(icon) {
+function getPlatformIcon(icon, direction, size) {
   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
       };
@@ -548,26 +642,35 @@ function getPlatformIcon(icon) {
             name: icon.name,
             variant: icon.variant,
             weight: icon.weight,
-            size: ICON_SIZE
+            fill: icon.fill,
+            size,
+            direction
           })
         },
         shared: undefined
       };
     case 'image':
-      return {
-        ios: icon.tinted === false ? {
-          type: 'imageSource',
-          imageSource: icon.source
-        } : {
-          type: 'templateSource',
-          templateSource: icon.source
-        },
-        android: undefined,
-        shared: {
-          type: 'imageSource',
-          imageSource: icon.source
-        }
-      };
+      {
+        // 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: {
+            type: 'imageSource',
+            imageSource: icon.source,
+            renderingMode: icon.tinted === false ? 'original' : 'template'
+          },
+          android: drawableName != null ? {
+            type: 'drawableResource',
+            name: drawableName,
+            tinting: icon.tinted === false ? 'original' : 'tinted'
+          } : {
+            type: 'imageSource',
+            imageSource: icon.source,
+            tinting: icon.tinted === false ? 'original' : 'tinted'
+          },
+          shared: undefined
+        };
+      }
     default:
       {
         const _exhaustiveCheck = icon;