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

package/lib/module/views/BottomTabViewNativeImpl.js

@@ -1,14 +1,15 @@
 "use strict";
 
 import { getLabel } from '@react-navigation/elements';
-import { Color, Lazy, SafeAreaProviderCompat } from '@react-navigation/elements/internal';
+import { ActivityView, Color, SafeAreaProviderCompat } from '@react-navigation/elements/internal';
 import { CommonActions, MaterialSymbol, NavigationMetaContext, StackActions, useTheme } from '@react-navigation/native';
 import * as React from 'react';
-import { Animated, Platform, PlatformColor } from 'react-native';
+import { Animated, Platform, PlatformColor, StyleSheet } from 'react-native';
 import { Tabs } from 'react-native-screens';
 import { BottomTabAnimationContext } from "../utils/BottomTabAnimationContext.js";
 import { BottomTabBarHeightContext } from "../utils/BottomTabBarHeightContext.js";
 import { useTabBarPosition } from "../utils/useTabBarPosition.js";
+import { Deferred } from "./Deferred.js";
 import { ScreenContent } from "./ScreenContent.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_SIZE = Platform.select({
@@ -18,6 +19,26 @@ const ICON_SIZE = Platform.select({
 const meta = {
   type: 'native-tabs'
 };
+function reducer(state, action) {
+  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,
@@ -29,23 +50,147 @@ export function BottomTabViewNative({
     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(() => {
     const previousRouteKey = previousRouteKeyRef.current;
     if (previousRouteKey !== focusedRouteKey && descriptors[previousRouteKey]?.options.popToTopOnBlur) {
-      const prevRoute = state.routes.find(route => route.key === previousRouteKey);
-      if (prevRoute?.state?.type === 'stack' && prevRoute.state.key) {
-        const popToTopAction = {
+      const currentState = navigation.getState();
+      const prevRoute = currentState.routes.find(route => route.key === previousRouteKey);
+      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, confirmed) => {
+    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 => {
+    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 => {
+    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 => {
+    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 = descriptors[focusedRouteKey]?.options ?? {};
   const {
     fontFamily = Platform.select({
       ios: fonts.medium.fontFamily,
@@ -56,14 +201,48 @@ export function BottomTabViewNative({
       default: fonts.regular.fontWeight
     }),
     fontSize,
-    fontStyle
+    fontStyle,
+    color: fontColor
   } = currentOptions.tabBarLabelStyle || {};
-  const activeTintColor = currentOptions.tabBarActiveTintColor ?? colors.primary;
-  const inactiveTintColor = currentOptions.tabBarInactiveTintColor ?? Platform.select({
+  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;
+    }
+  }
+  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
   }) => {
@@ -95,60 +274,45 @@ export function BottomTabViewNative({
       flexDirection: tabBarPosition === 'left' || tabBarPosition === 'right' ? 'row' : 'column'
     },
     children: [tabBarPosition === 'top' || tabBarPosition === 'left' ? tabBarElement : null, /*#__PURE__*/_jsx(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: true,
+      onTabSelected: onTabSelected,
+      onTabSelectionRejected: onTabSelectionRejected,
+      onTabSelectionPrevented: onTabSelectionPrevented,
+      tabBarHidden: hasCustomTabBar || shouldHideTabBar,
+      colorScheme: dark ? 'dark' : 'light',
+      nativeContainerStyle: {
+        backgroundColor: colors.background
+      },
+      ios: {
+        bottomAccessory: bottomAccessory ? environment => bottomAccessory({
+          placement: environment
+        }) : undefined,
+        tabBarControllerMode,
+        tabBarMinimizeBehavior,
+        tabBarTintColor: activeTintColor
       },
       children: state.routes.map((route, index) => {
+        const descriptor = descriptors[route.key];
+        if (descriptor == null) {
+          throw new Error(`Couldn't find a descriptor for route '${route.key}'.`);
+        }
         const {
           options,
           render,
           navigation
-        } = descriptors[route.key];
+        } = 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,
@@ -158,7 +322,7 @@ export function BottomTabViewNative({
           tabBarAccessibilityLabel,
           tabBarButtonTestID,
           sceneStyle,
-          scrollEdgeEffects
+          overrideScrollViewContentInsetAdjustmentBehavior
         } = options;
         const {
           backgroundColor: tabBarBackgroundColor,
@@ -171,14 +335,25 @@ export function BottomTabViewNative({
           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
+          tabBarItemTitleFontStyle: fontStyle,
+          tabBarItemTitleFontColor: inactiveTintColor ?? fontColor,
+          tabBarItemIconColor: inactiveTintColor,
+          tabBarItemBadgeBackgroundColor: badgeBackgroundColor
+        };
+        const normalTabItemAppearance = {
+          tabBarItemTitleFontColor: inactiveTintColor ?? fontColor,
+          tabBarItemIconColor: inactiveTintColor
+        };
+        const selectedTabItemAppearance = {
+          tabBarItemTitleFontColor: activeTintColor,
+          tabBarItemIconColor: activeTintColor
         };
-        const badgeBackgroundColor = tabBarBadgeStyle?.backgroundColor ?? colors.notification;
-        const badgeTextColor = tabBarBadgeStyle?.color ?? (Color(badgeBackgroundColor)?.isLight() ? 'black' : 'white');
         const getIcon = selected => {
           if (typeof tabBarIcon === 'function') {
             const result = tabBarIcon({
@@ -198,8 +373,15 @@ 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 /*#__PURE__*/_jsx(Tabs.Screen, {
           onWillAppear: () => onTransitionStart({
             route
@@ -207,40 +389,14 @@ export function BottomTabViewNative({
           onDidAppear: () => onTransitionEnd({
             route
           }),
-          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: {
@@ -248,27 +404,89 @@ export function BottomTabViewNative({
               scrollToTop: true
             }
           },
-          experimental_userInterfaceStyle: dark ? 'dark' : 'light',
-          children: /*#__PURE__*/_jsx(Lazy, {
-            enabled: lazy,
-            visible: isFocused || isPreloaded,
-            children: /*#__PURE__*/_jsx(ScreenContent, {
-              isFocused: isFocused,
-              route: route,
-              navigation: navigation,
-              options: options,
-              style: sceneStyle,
-              children: /*#__PURE__*/_jsx(AnimatedScreenContent, {
+          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,
-                children: /*#__PURE__*/_jsx(BottomTabBarHeightContext.Provider, {
-                  value: 0,
-                  children: /*#__PURE__*/_jsx(NavigationMetaContext.Provider, {
-                    value: meta,
-                    children: render()
+                route: route,
+                navigation: navigation,
+                options: options,
+                style: sceneStyle,
+                children: /*#__PURE__*/_jsx(AnimatedScreenContent, {
+                  isFocused: isFocused,
+                  children: /*#__PURE__*/_jsx(BottomTabBarHeightContext.Provider, {
+                    value: 0,
+                    children: /*#__PURE__*/_jsx(NavigationMetaContext.Provider, {
+                      value: meta,
+                      children: render()
+                    })
                   })
                 })
               })
-            })
+            }, route.key)
           })
         }, route.key);
       })
@@ -314,7 +532,10 @@ function getPlatformIcon(icon) {
         android: {
           type: 'imageSource',
           imageSource: MaterialSymbol.getImageSource({
-            name: icon.name
+            name: icon.name,
+            variant: icon.variant,
+            weight: icon.weight,
+            size: ICON_SIZE
           })
         },
         shared: undefined
@@ -334,16 +555,6 @@ function getPlatformIcon(icon) {
           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 = icon;
@@ -351,4 +562,11 @@ function getPlatformIcon(icon) {
       }
   }
 }
+function getAndroidColorName(color) {
+  const value = 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;
+}
 //# sourceMappingURL=BottomTabViewNativeImpl.js.map