@react-navigation/bottom-tabs 8.0.0-alpha.5 → 8.0.0-alpha.50

package/src/views/BottomTabViewNativeImpl.tsx

@@ -1,7 +1,7 @@
-import { getLabel } from '@react-navigation/elements';
+import { getLabel, type Icon } from '@react-navigation/elements';
 import {
+  ActivityView,
   Color,
-  Lazy,
   SafeAreaProviderCompat,
 } from '@react-navigation/elements/internal';
 import {
@@ -15,22 +15,36 @@ import {
   useTheme,
 } from '@react-navigation/native';
 import * as React from 'react';
-import { Animated, Platform, PlatformColor } from 'react-native';
 import {
-  type PlatformIcon,
+  Animated,
+  type ColorValue,
+  type NativeSyntheticEvent,
+  Platform,
+  PlatformColor,
+  StyleSheet,
+} from 'react-native';
+import {
+  type PlatformIconAndroid,
+  type PlatformIconIOS,
+  type PlatformIconShared,
   Tabs,
-  type TabsScreenItemStateAppearance,
+  type TabsBottomAccessoryEnvironment,
+  type TabSelectedEvent,
+  type TabSelectionRejectedEvent,
+  type TabsScreenItemStateAppearanceAndroid,
+  type TabsScreenItemStateAppearanceIOS,
 } from 'react-native-screens';
 
 import type {
   BottomTabDescriptorMap,
-  BottomTabIcon,
   BottomTabNavigationConfig,
   BottomTabNavigationHelpers,
+  BottomTabNavigationOptions,
 } from '../types';
 import { BottomTabAnimationContext } from '../utils/BottomTabAnimationContext';
 import { BottomTabBarHeightContext } from '../utils/BottomTabBarHeightContext';
 import { useTabBarPosition } from '../utils/useTabBarPosition';
+import { Deferred } from './Deferred';
 import { ScreenContent } from './ScreenContent';
 
 type Props = BottomTabNavigationConfig & {
@@ -39,6 +53,37 @@ type Props = BottomTabNavigationConfig & {
   descriptors: BottomTabDescriptorMap;
 };
 
+type TabSelectionPreventedEvent = {
+  selectedScreenKey: string;
+  provenance: number;
+  preventedScreenKey: string;
+};
+
+type PlatformIcon = {
+  ios?: PlatformIconIOS | undefined;
+  android?: PlatformIconAndroid | undefined;
+  shared?: PlatformIconShared | undefined;
+};
+
+type ConfirmedState = {
+  routeKey: string;
+  provenance: number;
+};
+
+type NativeState = {
+  lastTransition: { from: string; to: string } | null;
+  confirmed: ConfirmedState;
+};
+
+type NativeAction =
+  | { type: 'CLEAR_TRANSITION'; to: string }
+  | {
+      type: 'TRACK_TRANSITION';
+      confirmed: ConfirmedState;
+      lastTransition: NonNullable<NativeState['lastTransition']>;
+    }
+  | { type: 'CONFIRM_STATE'; confirmed: ConfirmedState };
+
 const ICON_SIZE = Platform.select({
   ios: 25,
   default: 24,
@@ -48,6 +93,32 @@ const meta = {
   type: 'native-tabs',
 };
 
+function reducer(state: NativeState, action: NativeAction): NativeState {
+  switch (action.type) {
+    case 'TRACK_TRANSITION':
+      return {
+        ...state,
+        lastTransition: action.lastTransition,
+        confirmed: action.confirmed,
+      };
+    case 'CLEAR_TRANSITION':
+      return state.lastTransition?.to === action.to
+        ? {
+            ...state,
+            lastTransition: null,
+          }
+        : state;
+    case 'CONFIRM_STATE':
+      return state.confirmed.routeKey === action.confirmed.routeKey &&
+        state.confirmed.provenance === action.confirmed.provenance
+        ? state
+        : {
+            ...state,
+            confirmed: action.confirmed,
+          };
+  }
+}
+
 export function BottomTabViewNative({
   state,
   navigation,
@@ -56,7 +127,28 @@ export function BottomTabViewNative({
 }: Props) {
   const { dark, colors, fonts } = useTheme();
 
-  const focusedRouteKey = state.routes[state.index].key;
+  const focusedRoute = state.routes[state.index];
+
+  if (focusedRoute == null) {
+    throw new Error(`Couldn't find a route at index ${state.index}.`);
+  }
+
+  const focusedRouteKey = focusedRoute.key;
+
+  const [loaded, setLoaded] = React.useState([focusedRouteKey]);
+
+  if (!loaded.includes(focusedRouteKey)) {
+    setLoaded([...loaded, focusedRouteKey]);
+  }
+
+  const [nativeState, dispatch] = React.useReducer(reducer, {
+    lastTransition: null,
+    confirmed: {
+      routeKey: focusedRouteKey,
+      provenance: 0,
+    },
+  });
+
   const previousRouteKeyRef = React.useRef(focusedRouteKey);
 
   React.useEffect(() => {
@@ -66,23 +158,164 @@ export function BottomTabViewNative({
       previousRouteKey !== focusedRouteKey &&
       descriptors[previousRouteKey]?.options.popToTopOnBlur
     ) {
-      const prevRoute = state.routes.find(
+      const currentState = navigation.getState();
+      const prevRoute = currentState.routes.find(
         (route) => route.key === previousRouteKey
       );
 
-      if (prevRoute?.state?.type === 'stack' && prevRoute.state.key) {
-        const popToTopAction = {
+      if (
+        prevRoute?.state?.type === 'stack' &&
+        prevRoute.state.key &&
+        ((prevRoute.state.index ?? prevRoute.state.routes.length - 1) > 0 ||
+          prevRoute.state.routes[0]?.history?.length)
+      ) {
+        navigation.dispatch({
           ...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;
+    // We dispatch `popToTop` for unfocused tabs when `popToTopOnBlur` is true
+    // So we delay clearing `lastTransition` to keep the screen active for longer
+    // This gives time for the action to be handled before the screen is paused,
+    const timer = setTimeout(() => {
+      dispatch({
+        type: 'CLEAR_TRANSITION',
+        to: focusedRouteKey,
+      });
+    }, 32);
+
+    return () => clearTimeout(timer);
+  }, [descriptors, focusedRouteKey, navigation]);
+
+  const navigate = (
+    route: (typeof state.routes)[number],
+    confirmed: ConfirmedState
+  ) => {
+    dispatch({
+      type: 'TRACK_TRANSITION',
+      confirmed,
+      lastTransition: {
+        from: previousRouteKeyRef.current,
+        to: route.key,
+      },
+    });
+
+    navigation.dispatch({
+      ...CommonActions.navigate(route.name, route.params),
+      target: state.key,
+    });
+  };
+
+  // Native tabs are the source of truth for the selected tab.
+  // JS sends a requested tab with the native provenance it was based on.
+  // Native replies with the selected tab and its new provenance.
+  const onTabSelected = (event: NativeSyntheticEvent<TabSelectedEvent>) => {
+    const { selectedScreenKey, provenance, actionOrigin } = event.nativeEvent;
+
+    const confirmed = {
+      routeKey: selectedScreenKey,
+      provenance,
+    };
+
+    const route = state.routes.find((route) => route.key === selectedScreenKey);
+
+    if (!route) {
+      console.error(
+        `Received 'tabSelected' for route that doesn't exist: ${selectedScreenKey}`
+      );
+
+      return;
+    }
+
+    if (actionOrigin === 'user') {
+      const event = navigation.emit({
+        type: 'tabPress',
+        target: route.key,
+        canPreventDefault: true,
+      });
+
+      if (event.defaultPrevented) {
+        throw new Error(
+          "Preventing default for 'tabPress' is not supported with native tab bar. Use the 'tabBarSelectionEnabled: false' option instead."
+        );
+      }
+    }
+
+    if (actionOrigin === 'programmatic-js' || focusedRouteKey === route.key) {
+      dispatch({
+        type: 'CONFIRM_STATE',
+        confirmed,
+      });
+
+      return;
+    }
+
+    navigate(route, confirmed);
+  };
+
+  // If native rejects a JS request, keep native as the source of truth
+  // and move JS back to the tab that native says is selected.
+  const onTabSelectionRejected = (
+    event: NativeSyntheticEvent<TabSelectionRejectedEvent>
+  ) => {
+    const { selectedScreenKey, provenance } = event.nativeEvent;
+
+    const confirmed = {
+      routeKey: selectedScreenKey,
+      provenance,
+    };
+
+    const route = state.routes.find((route) => route.key === selectedScreenKey);
+
+    if (!route) {
+      console.error(
+        `Received 'tabSelectionRejected' for route that doesn't exist: ${selectedScreenKey}`
+      );
+
+      return;
+    }
+
+    if (focusedRouteKey === route.key) {
+      dispatch({
+        type: 'CONFIRM_STATE',
+        confirmed,
+      });
+
+      return;
+    }
+
+    navigate(route, confirmed);
+  };
+
+  const onTabSelectionPrevented = (
+    event: NativeSyntheticEvent<TabSelectionPreventedEvent>
+  ) => {
+    const { selectedScreenKey, provenance, preventedScreenKey } =
+      event.nativeEvent;
+
+    const confirmed = {
+      routeKey: selectedScreenKey,
+      provenance,
+    };
+
+    dispatch({
+      type: 'CONFIRM_STATE',
+      confirmed,
+    });
+
+    navigation.emit({
+      type: 'tabPress',
+      target: preventedScreenKey,
+      canPreventDefault: true,
+    });
+  };
+
+  const currentOptions: BottomTabNavigationOptions =
+    descriptors[focusedRouteKey]?.options ?? {};
 
   const {
     fontFamily = Platform.select({
@@ -95,18 +328,67 @@ export function BottomTabViewNative({
     }),
     fontSize,
     fontStyle,
+    color: fontColor,
   } = currentOptions.tabBarLabelStyle || {};
 
-  const activeTintColor =
-    currentOptions.tabBarActiveTintColor ?? colors.primary;
+  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;
+
+  // 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;
+    }
+  }
 
-  const inactiveTintColor =
-    currentOptions.tabBarInactiveTintColor ??
+  inactiveTintColor =
+    inactiveTintColor ??
     Platform.select({ ios: PlatformColor('label'), default: colors.text });
 
-  const activeIndicatorColor =
-    currentOptions?.tabBarActiveIndicatorColor ??
-    Color(activeTintColor)?.alpha(0.1).string();
+  activeTintColor = activeTintColor ?? colors.primary;
+
+  activeIndicatorColor =
+    activeIndicatorColor ??
+    Platform.select({
+      android: Color(activeTintColor)?.alpha(0.075).string(),
+      default: undefined,
+    });
 
   const onTransitionStart = ({ route }: { route: Route<string> }) => {
     navigation.emit({
@@ -160,76 +442,46 @@ export function BottomTabViewNative({
         ? tabBarElement
         : null}
       <Tabs.Host
-        tabBarHidden={hasCustomTabBar}
-        bottomAccessory={
-          bottomAccessory
-            ? (environment) => bottomAccessory({ placement: environment })
-            : undefined
-        }
-        tabBarItemLabelVisibilityMode={
-          currentOptions?.tabBarLabelVisibilityMode
-        }
-        tabBarControllerMode={tabBarControllerMode}
-        tabBarMinimizeBehavior={tabBarMinimizeBehavior}
-        tabBarTintColor={activeTintColor}
-        tabBarItemIconColor={inactiveTintColor}
-        tabBarItemIconColorActive={activeTintColor}
-        tabBarItemTitleFontColor={inactiveTintColor}
-        tabBarItemTitleFontColorActive={activeTintColor}
-        tabBarItemTitleFontFamily={fontFamily}
-        tabBarItemTitleFontWeight={fontWeight}
-        tabBarItemTitleFontSize={fontSize}
-        tabBarItemTitleFontSizeActive={fontSize}
-        tabBarItemTitleFontStyle={fontStyle}
-        tabBarBackgroundColor={
-          currentOptions.tabBarStyle?.backgroundColor ?? colors.card
-        }
-        tabBarItemActiveIndicatorColor={activeIndicatorColor}
-        tabBarItemActiveIndicatorEnabled={
-          currentOptions?.tabBarActiveIndicatorEnabled
-        }
-        tabBarItemRippleColor={currentOptions?.tabBarRippleColor}
-        experimentalControlNavigationStateInJS={false}
-        onNativeFocusChange={(e) => {
-          const route = state.routes.find(
-            (route) => route.key === e.nativeEvent.tabKey
-          );
-
-          if (route) {
-            const event = navigation.emit({
-              type: 'tabPress',
-              target: route.key,
-              canPreventDefault: true,
-            });
-
-            if (event.defaultPrevented) {
-              throw new Error(
-                "Preventing default for 'tabPress' is not supported with native tab bar."
-              );
-            }
-
-            const isFocused =
-              state.index ===
-              state.routes.findIndex((r) => r.key === route.key);
-
-            if (!isFocused) {
-              navigation.dispatch({
-                ...CommonActions.navigate(route.name, route.params),
-                target: state.key,
-              });
-            }
-          }
+        navStateRequest={{
+          selectedScreenKey: focusedRouteKey,
+          baseProvenance: nativeState.confirmed.provenance,
+        }}
+        rejectStaleNavStateUpdates
+        onTabSelected={onTabSelected}
+        onTabSelectionRejected={onTabSelectionRejected}
+        onTabSelectionPrevented={onTabSelectionPrevented}
+        tabBarHidden={hasCustomTabBar || shouldHideTabBar}
+        colorScheme={dark ? 'dark' : 'light'}
+        nativeContainerStyle={{ backgroundColor: colors.background }}
+        ios={{
+          bottomAccessory: bottomAccessory
+            ? (environment: TabsBottomAccessoryEnvironment) =>
+                bottomAccessory({ placement: environment })
+            : undefined,
+          tabBarControllerMode,
+          tabBarMinimizeBehavior,
+          tabBarTintColor: activeTintColor,
         }}
       >
         {state.routes.map((route, index) => {
-          const { options, render, navigation } = descriptors[route.key];
+          const descriptor = descriptors[route.key];
+
+          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 = true,
+            lazy = false,
+            inactiveBehavior = 'pause',
             tabBarLabel,
+            tabBarSelectionEnabled,
             tabBarBadgeStyle,
             tabBarIcon,
             tabBarBadge,
@@ -239,7 +491,7 @@ export function BottomTabViewNative({
             tabBarAccessibilityLabel,
             tabBarButtonTestID,
             sceneStyle,
-            scrollEdgeEffects,
+            overrideScrollViewContentInsetAdjustmentBehavior,
           } = options;
 
           const {
@@ -254,18 +506,32 @@ export function BottomTabViewNative({
               ? tabBarLabel
               : getLabel({ label: tabBarLabel, title }, route.name);
 
-          const tabItemAppearance: TabsScreenItemStateAppearance = {
+          const badgeBackgroundColor =
+            tabBarBadgeStyle?.backgroundColor ?? colors.notification;
+          const badgeTextColor =
+            tabBarBadgeStyle?.color ?? Color.foreground(badgeBackgroundColor);
+
+          const tabItemAppearance: TabsScreenItemStateAppearanceIOS = {
             tabBarItemTitleFontFamily: fontFamily,
             tabBarItemTitleFontSize: fontSize,
             tabBarItemTitleFontWeight: fontWeight,
             tabBarItemTitleFontStyle: fontStyle,
+            tabBarItemTitleFontColor: inactiveTintColor ?? fontColor,
+            tabBarItemIconColor: inactiveTintColor,
+            tabBarItemBadgeBackgroundColor: badgeBackgroundColor,
           };
 
-          const badgeBackgroundColor =
-            tabBarBadgeStyle?.backgroundColor ?? colors.notification;
-          const badgeTextColor =
-            tabBarBadgeStyle?.color ??
-            (Color(badgeBackgroundColor)?.isLight() ? 'black' : 'white');
+          const normalTabItemAppearance: TabsScreenItemStateAppearanceAndroid =
+            {
+              tabBarItemTitleFontColor: inactiveTintColor ?? fontColor,
+              tabBarItemIconColor: inactiveTintColor,
+            };
+
+          const selectedTabItemAppearance: TabsScreenItemStateAppearanceAndroid =
+            {
+              tabBarItemTitleFontColor: activeTintColor,
+              tabBarItemIconColor: activeTintColor,
+            };
 
           const getIcon = (selected: boolean) => {
             if (typeof tabBarIcon === 'function') {
@@ -297,85 +563,128 @@ export function BottomTabViewNative({
             return undefined;
           };
 
-          const icon = getIcon(false);
-          const selectedIcon = getIcon(true);
+          // 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 ? undefined : getIcon(true);
+
+          // 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 (
             <Tabs.Screen
               onWillAppear={() => onTransitionStart({ route })}
               onDidAppear={() => onTransitionEnd({ route })}
               key={route.key}
-              tabKey={route.key}
-              icon={icon}
-              selectedIcon={selectedIcon?.ios ?? selectedIcon?.shared}
-              tabBarItemBadgeBackgroundColor={badgeBackgroundColor}
-              tabBarItemBadgeTextColor={badgeTextColor}
+              screenKey={route.key}
               tabBarItemAccessibilityLabel={tabBarAccessibilityLabel}
               tabBarItemTestID={tabBarButtonTestID}
+              preventNativeSelection={tabBarSelectionEnabled === false}
               badgeValue={tabBarBadge?.toString()}
-              systemItem={tabBarSystemItem}
-              isFocused={isFocused}
               title={tabTitle}
-              scrollEdgeEffects={{
-                top:
-                  scrollEdgeEffects?.top === 'auto'
-                    ? 'automatic'
-                    : scrollEdgeEffects?.top,
-                bottom:
-                  scrollEdgeEffects?.bottom === 'auto'
-                    ? 'automatic'
-                    : scrollEdgeEffects?.bottom,
-                left:
-                  scrollEdgeEffects?.left === 'auto'
-                    ? 'automatic'
-                    : scrollEdgeEffects?.left,
-                right:
-                  scrollEdgeEffects?.right === 'auto'
-                    ? 'automatic'
-                    : scrollEdgeEffects?.right,
-              }}
-              // FIXME: if this is not provided, ScrollView on lazy tabs glitches on iOS 18
-              // For now we provide an empty object before adding proper support
-              scrollEdgeAppearance={{}}
-              standardAppearance={{
-                tabBarBackgroundColor,
-                tabBarShadowColor,
-                tabBarBlurEffect,
-                stacked: {
-                  normal: tabItemAppearance,
-                },
-                inline: {
-                  normal: tabItemAppearance,
-                },
-                compactInline: {
-                  normal: tabItemAppearance,
-                },
-              }}
+              nativeContainerStyle={{ backgroundColor: colors.background }}
               specialEffects={{
                 repeatedTabSelection: {
                   popToRoot: true,
                   scrollToTop: true,
                 },
               }}
-              experimental_userInterfaceStyle={dark ? 'dark' : 'light'}
+              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,
+              }}
             >
-              <Lazy enabled={lazy} visible={isFocused || isPreloaded}>
-                <ScreenContent
-                  isFocused={isFocused}
-                  route={route}
-                  navigation={navigation}
-                  options={options}
-                  style={sceneStyle}
+              <Deferred
+                lazy={lazy}
+                visible={isFocused || isPreloaded || loaded.includes(route.key)}
+              >
+                <ActivityView
+                  key={route.key}
+                  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}
                 >
-                  <AnimatedScreenContent isFocused={isFocused}>
-                    <BottomTabBarHeightContext.Provider value={0}>
-                      <NavigationMetaContext.Provider value={meta}>
-                        {render()}
-                      </NavigationMetaContext.Provider>
-                    </BottomTabBarHeightContext.Provider>
-                  </AnimatedScreenContent>
-                </ScreenContent>
-              </Lazy>
+                  <ScreenContent
+                    isFocused={isFocused}
+                    route={route}
+                    navigation={navigation}
+                    options={options}
+                    style={sceneStyle}
+                  >
+                    <AnimatedScreenContent isFocused={isFocused}>
+                      <BottomTabBarHeightContext.Provider value={0}>
+                        <NavigationMetaContext.Provider value={meta}>
+                          {render()}
+                        </NavigationMetaContext.Provider>
+                      </BottomTabBarHeightContext.Provider>
+                    </AnimatedScreenContent>
+                  </ScreenContent>
+                </ActivityView>
+              </Deferred>
             </Tabs.Screen>
           );
         })}
@@ -386,6 +695,7 @@ export function BottomTabViewNative({
     </SafeAreaProviderCompat>
   );
 }
+
 function AnimatedScreenContent({
   isFocused,
   children,
@@ -419,7 +729,7 @@ function AnimatedScreenContent({
   );
 }
 
-function getPlatformIcon(icon: BottomTabIcon): PlatformIcon {
+function getPlatformIcon(icon: Icon): PlatformIcon {
   switch (icon.type) {
     case 'sfSymbol':
       return {
@@ -434,6 +744,9 @@ function getPlatformIcon(icon: BottomTabIcon): PlatformIcon {
           type: 'imageSource',
           imageSource: MaterialSymbol.getImageSource({
             name: icon.name,
+            variant: icon.variant,
+            weight: icon.weight,
+            size: ICON_SIZE,
           }),
         },
         shared: undefined,
@@ -456,16 +769,6 @@ function getPlatformIcon(icon: BottomTabIcon): PlatformIcon {
           imageSource: icon.source,
         },
       };
-    case 'resource':
-      return {
-        // TODO: support xcasset once new version of react-native-screens is released
-        ios: undefined,
-        android: {
-          type: 'drawableResource',
-          name: icon.name,
-        },
-        shared: undefined,
-      };
     default: {
       const _exhaustiveCheck: never = icon;
 
@@ -473,3 +776,19 @@ function getPlatformIcon(icon: BottomTabIcon): PlatformIcon {
     }
   }
 }
+
+function getAndroidColorName(color: ColorValue) {
+  const value: unknown = color;
+
+  if (
+    typeof value === 'object' &&
+    value != null &&
+    'resource_paths' in value &&
+    Array.isArray(value.resource_paths) &&
+    typeof value.resource_paths[0] === 'string'
+  ) {
+    return value.resource_paths[0].replace('@android:color/', '');
+  }
+
+  return null;
+}