@react-navigation/bottom-tabs 8.0.0-alpha.2 → 8.0.0-alpha.21

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,7 +15,13 @@ import {
   useTheme,
 } from '@react-navigation/native';
 import * as React from 'react';
-import { Animated, Platform, PlatformColor } from 'react-native';
+import {
+  Animated,
+  type ColorValue,
+  Platform,
+  PlatformColor,
+  StyleSheet,
+} from 'react-native';
 import {
   type PlatformIcon,
   Tabs,
@@ -24,7 +30,6 @@ import {
 
 import type {
   BottomTabDescriptorMap,
-  BottomTabIcon,
   BottomTabNavigationConfig,
   BottomTabNavigationHelpers,
 } from '../types';
@@ -57,6 +62,18 @@ export function BottomTabViewNative({
   const { dark, colors, fonts } = useTheme();
 
   const focusedRouteKey = state.routes[state.index].key;
+
+  const [loaded, setLoaded] = React.useState([focusedRouteKey]);
+
+  if (!loaded.includes(focusedRouteKey)) {
+    setLoaded([...loaded, focusedRouteKey]);
+  }
+
+  const [pendingNavigation, setPendingNavigation] = React.useState<{
+    from: string;
+    to: string;
+  } | null>(null);
+
   const previousRouteKeyRef = React.useRef(focusedRouteKey);
 
   React.useEffect(() => {
@@ -75,11 +92,26 @@ export function BottomTabViewNative({
           ...StackActions.popToTop(),
           target: prevRoute.state.key,
         };
+
         navigation.dispatch(popToTopAction);
       }
     }
 
     previousRouteKeyRef.current = focusedRouteKey;
+
+    // Delay clearing `isAnimating`
+    // This will give time for `popToAction` to get handled before pause
+    const timer = setTimeout(() => {
+      setPendingNavigation((pending) => {
+        if (pending?.to === focusedRouteKey) {
+          return null;
+        }
+
+        return pending;
+      });
+    }, 32);
+
+    return () => clearTimeout(timer);
   }, [descriptors, focusedRouteKey, navigation, state.index, state.routes]);
 
   const currentOptions = descriptors[state.routes[state.index].key]?.options;
@@ -95,18 +127,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,7 +241,7 @@ export function BottomTabViewNative({
         ? tabBarElement
         : null}
       <Tabs.Host
-        tabBarHidden={hasCustomTabBar}
+        tabBarHidden={hasCustomTabBar || shouldHideTabBar}
         bottomAccessory={
           bottomAccessory
             ? (environment) => bottomAccessory({ placement: environment })
@@ -174,16 +255,14 @@ export function BottomTabViewNative({
         tabBarTintColor={activeTintColor}
         tabBarItemIconColor={inactiveTintColor}
         tabBarItemIconColorActive={activeTintColor}
-        tabBarItemTitleFontColor={inactiveTintColor}
+        tabBarItemTitleFontColor={inactiveTintColor ?? fontColor}
         tabBarItemTitleFontColorActive={activeTintColor}
         tabBarItemTitleFontFamily={fontFamily}
         tabBarItemTitleFontWeight={fontWeight}
         tabBarItemTitleFontSize={fontSize}
         tabBarItemTitleFontSizeActive={fontSize}
         tabBarItemTitleFontStyle={fontStyle}
-        tabBarBackgroundColor={
-          currentOptions.tabBarStyle?.backgroundColor ?? colors.card
-        }
+        tabBarBackgroundColor={backgroundColor}
         tabBarItemActiveIndicatorColor={activeIndicatorColor}
         tabBarItemActiveIndicatorEnabled={
           currentOptions?.tabBarActiveIndicatorEnabled
@@ -213,6 +292,11 @@ export function BottomTabViewNative({
               state.routes.findIndex((r) => r.key === route.key);
 
             if (!isFocused) {
+              setPendingNavigation({
+                from: previousRouteKeyRef.current,
+                to: route.key,
+              });
+
               navigation.dispatch({
                 ...CommonActions.navigate(route.name, route.params),
                 target: state.key,
@@ -229,6 +313,7 @@ export function BottomTabViewNative({
           const {
             title,
             lazy = true,
+            inactiveBehavior = 'pause',
             tabBarLabel,
             tabBarBadgeStyle,
             tabBarIcon,
@@ -236,8 +321,11 @@ export function BottomTabViewNative({
             tabBarSystemItem,
             tabBarBlurEffect = dark ? 'systemMaterialDark' : 'systemMaterial',
             tabBarStyle,
+            tabBarAccessibilityLabel,
+            tabBarButtonTestID,
             sceneStyle,
             scrollEdgeEffects,
+            overrideScrollViewContentInsetAdjustmentBehavior,
           } = options;
 
           const {
@@ -252,19 +340,21 @@ export function BottomTabViewNative({
               ? tabBarLabel
               : getLabel({ label: tabBarLabel, title }, route.name);
 
+          const badgeBackgroundColor =
+            tabBarBadgeStyle?.backgroundColor ?? colors.notification;
+          const badgeTextColor =
+            tabBarBadgeStyle?.color ?? Color.foreground(badgeBackgroundColor);
+
           const tabItemAppearance: TabsScreenItemStateAppearance = {
             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 getIcon = (selected: boolean) => {
             if (typeof tabBarIcon === 'function') {
               const result = tabBarIcon({
@@ -298,6 +388,15 @@ export function BottomTabViewNative({
           const icon = getIcon(false);
           const selectedIcon = getIcon(true);
 
+          // For preloaded screens and if lazy is false,
+          // Keep them active so that the effects can run
+          const isActive =
+            inactiveBehavior === 'none' ||
+            isPreloaded ||
+            pendingNavigation?.from === route.key ||
+            pendingNavigation?.to === route.key ||
+            (lazy === false && !loaded.includes(route.key));
+
           return (
             <Tabs.Screen
               onWillAppear={() => onTransitionStart({ route })}
@@ -308,6 +407,8 @@ export function BottomTabViewNative({
               selectedIcon={selectedIcon?.ios ?? selectedIcon?.shared}
               tabBarItemBadgeBackgroundColor={badgeBackgroundColor}
               tabBarItemBadgeTextColor={badgeTextColor}
+              tabBarItemAccessibilityLabel={tabBarAccessibilityLabel}
+              tabBarItemTestID={tabBarButtonTestID}
               badgeValue={tabBarBadge?.toString()}
               systemItem={tabBarSystemItem}
               isFocused={isFocused}
@@ -330,9 +431,20 @@ export function BottomTabViewNative({
                     ? '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={{}}
+              scrollEdgeAppearance={{
+                tabBarBackgroundColor,
+                tabBarShadowColor,
+                tabBarBlurEffect,
+                stacked: {
+                  normal: tabItemAppearance,
+                },
+                inline: {
+                  normal: tabItemAppearance,
+                },
+                compactInline: {
+                  normal: tabItemAppearance,
+                },
+              }}
               standardAppearance={{
                 tabBarBackgroundColor,
                 tabBarShadowColor,
@@ -353,25 +465,43 @@ export function BottomTabViewNative({
                   scrollToTop: true,
                 },
               }}
+              overrideScrollViewContentInsetAdjustmentBehavior={
+                overrideScrollViewContentInsetAdjustmentBehavior
+              }
               experimental_userInterfaceStyle={dark ? 'dark' : 'light'}
             >
-              <Lazy enabled={lazy} visible={isFocused || isPreloaded}>
-                <ScreenContent
-                  isFocused={isFocused}
-                  route={route}
-                  navigation={navigation}
-                  options={options}
-                  style={sceneStyle}
+              {lazy &&
+              !loaded.includes(route.key) &&
+              !isFocused &&
+              !isPreloaded ? null : (
+                <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>
+              )}
             </Tabs.Screen>
           );
         })}
@@ -382,6 +512,7 @@ export function BottomTabViewNative({
     </SafeAreaProviderCompat>
   );
 }
+
 function AnimatedScreenContent({
   isFocused,
   children,
@@ -415,7 +546,7 @@ function AnimatedScreenContent({
   );
 }
 
-function getPlatformIcon(icon: BottomTabIcon): PlatformIcon {
+function getPlatformIcon(icon: Icon): PlatformIcon {
   switch (icon.type) {
     case 'sfSymbol':
       return {
@@ -430,6 +561,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,
@@ -452,12 +586,6 @@ function getPlatformIcon(icon: BottomTabIcon): PlatformIcon {
           imageSource: icon.source,
         },
       };
-    case 'drawableResource':
-      return {
-        ios: undefined,
-        android: icon,
-        shared: undefined,
-      };
     default: {
       const _exhaustiveCheck: never = icon;
 
@@ -465,3 +593,19 @@ function getPlatformIcon(icon: BottomTabIcon): PlatformIcon {
     }
   }
 }
+
+function getAndroidColorName(color: ColorValue) {
+  const value = color as unknown;
+
+  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;
+}

package/src/views/ScreenContent.tsx

@@ -2,7 +2,6 @@ import { getHeaderTitle, Header } from '@react-navigation/elements';
 import { Screen } from '@react-navigation/elements/internal';
 import type { ParamListBase, Route } from '@react-navigation/native';
 import * as React from 'react';
-import { type StyleProp, type ViewStyle } from 'react-native';
 
 import type {
   BottomTabNavigationOptions,
@@ -21,7 +20,7 @@ export function ScreenContent({
   route: Route<string>;
   navigation: BottomTabNavigationProp<ParamListBase>;
   options: BottomTabNavigationOptions;
-  style?: StyleProp<ViewStyle>;
+  style?: React.ComponentProps<typeof Screen>['style'];
   children: React.ReactNode;
 }) {
   const {

package/src/views/TabBarIcon.tsx

@@ -1,4 +1,4 @@
-import { Badge } from '@react-navigation/elements';
+import { Badge, type Icon } from '@react-navigation/elements';
 import { MissingIcon } from '@react-navigation/elements/internal';
 import { MaterialSymbol, type Route, SFSymbol } from '@react-navigation/native';
 import React from 'react';
@@ -12,26 +12,24 @@ import {
   type ViewStyle,
 } from 'react-native';
 
-import type { BottomTabIcon } from '../types';
-
 export type TabBarIconProps = {
   route: Route<string>;
   variant: 'uikit' | 'material';
   size: 'compact' | 'regular';
-  badge?: string | number;
-  badgeStyle?: StyleProp<TextStyle>;
+  badge?: string | number | undefined;
+  badgeStyle?: StyleProp<TextStyle> | undefined;
   activeOpacity: number;
   inactiveOpacity: number;
   activeTintColor: ColorValue;
   inactiveTintColor: ColorValue;
   icon:
-    | BottomTabIcon
+    | Icon
     | ((props: {
         focused: boolean;
         color: ColorValue;
         size: number;
-      }) => BottomTabIcon | React.ReactNode);
-  allowFontScaling?: boolean;
+      }) => Icon | React.ReactNode);
+  allowFontScaling?: boolean | undefined;
   style: StyleProp<ViewStyle>;
 };
 
@@ -43,8 +41,8 @@ const ICON_SIZE_WIDE = 31;
 const ICON_SIZE_WIDE_COMPACT = 23;
 const ICON_SIZE_TALL = 28;
 const ICON_SIZE_TALL_COMPACT = 20;
-const ICON_SIZE_ROUND = 25;
-const ICON_SIZE_ROUND_COMPACT = 18;
+const ICON_SIZE_SQUARE = 23;
+const ICON_SIZE_SQUARE_COMPACT = 17;
 const ICON_SIZE_MATERIAL = 24;
 
 export function TabBarIcon({
@@ -65,8 +63,8 @@ export function TabBarIcon({
     variant === 'material'
       ? ICON_SIZE_MATERIAL
       : size === 'compact'
-        ? ICON_SIZE_ROUND_COMPACT
-        : ICON_SIZE_ROUND;
+        ? ICON_SIZE_SQUARE_COMPACT
+        : ICON_SIZE_SQUARE;
 
   // We render the icon twice at the same position on top of each other:
   // active and inactive one, so we can fade between them.
@@ -153,22 +151,17 @@ function renderIcon({
             }}
           />
         );
-      case 'drawableResource':
-        return (
-          <Image
-            source={{ uri: iconValue.name }}
-            style={{
-              width: size,
-              height: size,
-              tintColor: iconValue.tinted === false ? undefined : color,
-            }}
-          />
-        );
       case 'sfSymbol':
         return <SFSymbol name={iconValue.name} size={size} color={color} />;
       case 'materialSymbol':
         return (
-          <MaterialSymbol name={iconValue.name} size={size} color={color} />
+          <MaterialSymbol
+            name={iconValue.name}
+            variant={iconValue.variant}
+            weight={iconValue.weight}
+            size={size}
+            color={color}
+          />
         );
       default: {
         const _exhaustiveCheck: never = iconValue;