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

package/src/views/BottomTabItem.tsx

@@ -1,7 +1,7 @@
 import { getLabel, Label, PlatformPressable } from '@react-navigation/elements';
 import { Color } from '@react-navigation/elements/internal';
 import { type Route, useTheme } from '@react-navigation/native';
-import React from 'react';
+import * as React from 'react';
 import {
   type ColorValue,
   type GestureResponderEvent,
@@ -29,7 +29,7 @@ type Props = {
   /**
    * The `href` to use for the anchor tag on web
    */
-  href?: string;
+  href?: string | undefined;
   /**
    * Whether the tab is focused.
    */
@@ -56,23 +56,23 @@ type Props = {
   /**
    * Text to show in a badge on the tab icon.
    */
-  badge?: number | string;
+  badge?: number | string | undefined;
   /**
    * Custom style for the badge.
    */
-  badgeStyle?: StyleProp<TextStyle>;
+  badgeStyle?: StyleProp<TextStyle> | undefined;
   /**
    * The button for the tab. Uses a `Pressable` by default.
    */
-  button?: (props: BottomTabBarButtonProps) => React.ReactNode;
+  button?: ((props: BottomTabBarButtonProps) => React.ReactNode) | undefined;
   /**
    * The accessibility label for the tab.
    */
-  accessibilityLabel?: string;
+  accessibilityLabel?: string | undefined;
   /**
    * An unique ID for testing for the tab.
    */
-  testID?: string;
+  testID?: string | undefined;
   /**
    * Function to execute on press in React Native.
    * On the web, this will use onClick.
@@ -105,44 +105,44 @@ type Props = {
   /**
    * Color for the icon and label when the item is active.
    */
-  activeTintColor?: ColorValue;
+  activeTintColor?: ColorValue | undefined;
   /**
    * Color for the icon and label when the item is inactive.
    */
-  inactiveTintColor?: ColorValue;
+  inactiveTintColor?: ColorValue | undefined;
   /**
    * Background color for item when its active.
    */
-  activeBackgroundColor?: ColorValue;
+  activeBackgroundColor?: ColorValue | undefined;
   /**
    * Background color for item when its inactive.
    */
-  inactiveBackgroundColor?: ColorValue;
+  inactiveBackgroundColor?: ColorValue | undefined;
   /**
    * Color of tab bar item's ripple effect.
    */
-  rippleColor?: ColorValue;
+  rippleColor?: ColorValue | undefined;
   /**
    * Label visibility mode for the tab bar item.
    */
-  labelVisibilityMode?: TabBarItemLabelVisibilityMode;
+  labelVisibilityMode?: TabBarItemLabelVisibilityMode | undefined;
   /**
    * Whether to allow scaling the font for the label for accessibility purposes.
    * Defaults to `false` on iOS 13+ where it uses `largeContentTitle`.
    */
-  allowFontScaling?: boolean;
+  allowFontScaling?: boolean | undefined;
   /**
    * Style object for the label element.
    */
-  labelStyle?: StyleProp<TextStyle>;
+  labelStyle?: StyleProp<TextStyle> | undefined;
   /**
    * Style object for the icon element.
    */
-  iconStyle?: StyleProp<ViewStyle>;
+  iconStyle?: StyleProp<ViewStyle> | undefined;
   /**
    * Style object for the wrapper element.
    */
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle> | undefined;
 };
 
 const renderButtonDefault = (props: BottomTabBarButtonProps) => (
@@ -189,9 +189,7 @@ export function BottomTabItem({
   const activeTintColor: ColorValue =
     customActiveTintColor ??
     (variant === 'uikit' && sidebar && horizontal
-      ? Color(colors.primary)?.isDark()
-        ? 'white'
-        : (Color(colors.primary)?.darken(0.71).string() ?? 'white')
+      ? Color.foreground(colors.primary)
       : colors.primary);
 
   const inactiveTintColor: ColorValue =
@@ -311,7 +309,7 @@ export function BottomTabItem({
     ? activeBackgroundColor
     : inactiveBackgroundColor;
 
-  const { flex } = StyleSheet.flatten(style || {});
+  const flex = StyleSheet.flatten(style)?.flex;
   const borderRadius =
     variant === 'material'
       ? horizontal

package/src/views/BottomTabViewCustom.tsx

@@ -1,10 +1,9 @@
 import {
+  ActivityView,
   Container,
-  Lazy,
   SafeAreaProviderCompat,
 } from '@react-navigation/elements/internal';
 import {
-  type NavigationAction,
   type ParamListBase,
   StackActions,
   type TabNavigationState,
@@ -17,7 +16,6 @@ import {
   StyleSheet,
   type ViewStyle,
 } from 'react-native';
-import { Screen, ScreenContainer } from 'react-native-screens';
 
 import {
   FadeTransition,
@@ -37,6 +35,7 @@ import { BottomTabBarHeightContext } from '../utils/BottomTabBarHeightContext';
 import { useAnimatedHashMap } from '../utils/useAnimatedHashMap';
 import { useTabBarPosition } from '../utils/useTabBarPosition';
 import { BottomTabBar, getTabBarHeight } from './BottomTabBar';
+import { Deferred } from './Deferred';
 import { ScreenContent } from './ScreenContent';
 
 type Props = BottomTabNavigationConfig & {
@@ -45,11 +44,6 @@ type Props = BottomTabNavigationConfig & {
   descriptors: BottomTabDescriptorMap;
 };
 
-const EPSILON = 1e-5;
-const STATE_INACTIVE = 0;
-const STATE_TRANSITIONING_OR_BELOW_TOP = 1;
-const STATE_ON_TOP = 2;
-
 const NAMED_TRANSITIONS_PRESETS = {
   fade: FadeTransition,
   shift: ShiftTransition,
@@ -83,36 +77,48 @@ export function BottomTabViewCustom({
   state,
   navigation,
   descriptors,
-  detachInactiveScreens = Platform.OS === 'web' ||
-    Platform.OS === 'android' ||
-    Platform.OS === 'ios',
 }: Props) {
   const { routes } = state;
-  const focusedRouteKey = routes[state.index].key;
+  const focusedRoute = routes[state.index];
+
+  if (focusedRoute == null) {
+    throw new Error(`Couldn't find a route at index ${state.index}.`);
+  }
+
+  const focusedRouteKey = focusedRoute.key;
+  const focusedOptions = descriptors[focusedRouteKey]?.options;
+
+  const [loaded, setLoaded] = React.useState([focusedRouteKey]);
+
+  if (!loaded.includes(focusedRouteKey)) {
+    setLoaded([...loaded, focusedRouteKey]);
+  }
+
+  const [lastUpdate, setLastUpdate] = React.useState<{
+    current: string;
+    previous?: string;
+    animating: boolean;
+  }>({
+    current: focusedRouteKey,
+    animating: false,
+  });
+
+  if (lastUpdate.current !== focusedRouteKey) {
+    setLastUpdate({
+      current: focusedRouteKey,
+      previous: lastUpdate.current,
+      animating: true,
+    });
+  }
 
-  const previousRouteKeyRef = React.useRef(focusedRouteKey);
   const tabAnims = useAnimatedHashMap(state);
 
+  const previousRouteKeyRef = React.useRef(focusedRouteKey);
+
   React.useEffect(() => {
     const previousRouteKey = previousRouteKeyRef.current;
 
-    let popToTopAction: NavigationAction | undefined;
-
-    if (
-      previousRouteKey !== focusedRouteKey &&
-      descriptors[previousRouteKey]?.options.popToTopOnBlur
-    ) {
-      const prevRoute = state.routes.find(
-        (route) => route.key === previousRouteKey
-      );
-
-      if (prevRoute?.state?.type === 'stack' && prevRoute.state.key) {
-        popToTopAction = {
-          ...StackActions.popToTop(),
-          target: prevRoute.state.key,
-        };
-      }
-    }
+    let timer: ReturnType<typeof setTimeout> | undefined;
 
     const animateToIndex = () => {
       if (previousRouteKey !== focusedRouteKey) {
@@ -122,42 +128,71 @@ export function BottomTabViewCustom({
         });
       }
 
-      Animated.parallel(
-        state.routes
-          .map((route, index) => {
-            const { options } = descriptors[route.key];
-            const {
-              animation = 'none',
-              transitionSpec = NAMED_TRANSITIONS_PRESETS[animation]
-                .transitionSpec,
-            } = options;
-
-            let spec = transitionSpec;
-
-            if (
-              route.key !== previousRouteKey &&
-              route.key !== focusedRouteKey
-            ) {
-              // Don't animate if the screen is not previous one or new one
-              // This will avoid flicker for screens not involved in the transition
-              spec = NAMED_TRANSITIONS_PRESETS.none.transitionSpec;
-            }
-
-            spec = spec ?? NAMED_TRANSITIONS_PRESETS.none.transitionSpec;
-
-            const toValue =
-              index === state.index ? 0 : index >= state.index ? 1 : -1;
-
-            return Animated[spec.animation](tabAnims[route.key], {
-              ...spec.config,
-              toValue,
-              useNativeDriver,
+      const animations = 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 } = descriptor;
+        const {
+          animation = 'none',
+          transitionSpec = NAMED_TRANSITIONS_PRESETS[animation].transitionSpec,
+        } = options;
+
+        let spec = transitionSpec;
+
+        if (route.key !== previousRouteKey && route.key !== focusedRouteKey) {
+          // Don't animate if the screen is not previous one or new one
+          // This will avoid flicker for screens not involved in the transition
+          spec = NAMED_TRANSITIONS_PRESETS.none.transitionSpec;
+        }
+
+        spec = spec ?? NAMED_TRANSITIONS_PRESETS.none.transitionSpec;
+
+        const toValue =
+          index === state.index ? 0 : index >= state.index ? 1 : -1;
+
+        const tabAnimation = tabAnims[route.key];
+
+        if (tabAnimation == null) {
+          throw new Error(
+            `Couldn't find an animation for route '${route.key}'.`
+          );
+        }
+
+        return Animated[spec.animation](tabAnimation, {
+          ...spec.config,
+          toValue,
+          useNativeDriver,
+        });
+      });
+
+      Animated.parallel(animations).start(({ finished }) => {
+        if (
+          previousRouteKey &&
+          previousRouteKey !== focusedRouteKey &&
+          descriptors[previousRouteKey]?.options.popToTopOnBlur
+        ) {
+          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,
             });
-          })
-          .filter(Boolean) as Animated.CompositeAnimation[]
-      ).start(({ finished }) => {
-        if (finished && popToTopAction) {
-          navigation.dispatch(popToTopAction);
+          }
         }
 
         if (previousRouteKey !== focusedRouteKey) {
@@ -166,12 +201,26 @@ export function BottomTabViewCustom({
             target: focusedRouteKey,
           });
         }
+
+        if (finished && animations.length) {
+          // Delay clearing `animating` state
+          // This will give time for `popToTop` to get handled before pause
+          timer = setTimeout(() => {
+            setLastUpdate((update) =>
+              update.animating ? { ...update, animating: false } : update
+            );
+          }, 32);
+        }
       });
     };
 
     animateToIndex();
 
     previousRouteKeyRef.current = focusedRouteKey;
+
+    return () => {
+      clearTimeout(timer);
+    };
   }, [
     descriptors,
     focusedRouteKey,
@@ -187,7 +236,7 @@ export function BottomTabViewCustom({
       descriptors,
       dimensions: SafeAreaProviderCompat.initialMetrics.frame,
       insets: SafeAreaProviderCompat.initialMetrics.insets,
-      style: descriptors[focusedRouteKey].options.tabBarStyle,
+      style: focusedOptions?.tabBarStyle,
     })
   );
 
@@ -204,14 +253,7 @@ export function BottomTabViewCustom({
     </BottomTabBarHeightCallbackContext.Provider>
   );
 
-  // If there is no animation, we only have 2 states: visible and invisible
-  const hasTwoStates = !routes.some((route) =>
-    hasAnimation(descriptors[route.key].options)
-  );
-
-  const tabBarPosition = useTabBarPosition(
-    descriptors[focusedRouteKey].options
-  );
+  const tabBarPosition = useTabBarPosition(focusedOptions ?? {});
 
   return (
     <SafeAreaProviderCompat
@@ -225,19 +267,21 @@ export function BottomTabViewCustom({
       {tabBarPosition === 'top' || tabBarPosition === 'left'
         ? tabBarElement
         : null}
-      <ScreenContainer
-        key="screens"
-        enabled={detachInactiveScreens}
-        hasTwoStates={hasTwoStates}
-        style={styles.screens}
-      >
+      <Container key="screens" style={styles.screens}>
         {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 { navigation, options, render } = descriptor;
 
           const {
             lazy = true,
+            inactiveBehavior = 'pause',
             animation = 'none',
             sceneStyleInterpolator = NAMED_TRANSITIONS_PRESETS[animation]
               .sceneStyleInterpolator,
@@ -248,85 +292,70 @@ export function BottomTabViewCustom({
           const isPreloaded = state.preloadedRouteKeys.includes(route.key);
 
           const animationEnabled = hasAnimation(descriptor.options);
+          const tabAnimation = tabAnims[route.key];
+
+          if (tabAnimation == null) {
+            throw new Error(
+              `Couldn't find an animation for route '${route.key}'.`
+            );
+          }
 
           const content = (
             <AnimatedScreenContent
-              progress={tabAnims[route.key]}
+              key={route.key}
+              progress={tabAnimation}
               animationEnabled={animationEnabled}
               sceneStyleInterpolator={sceneStyleInterpolator}
-              style={customSceneStyle}
+              style={[StyleSheet.absoluteFill, customSceneStyle]}
             >
-              <Lazy enabled={lazy} visible={isFocused || isPreloaded}>
-                <ScreenContent
-                  isFocused={isFocused}
-                  route={route}
-                  navigation={navigation}
-                  options={options}
+              <ScreenContent
+                isFocused={isFocused}
+                route={route}
+                navigation={navigation}
+                options={options}
+              >
+                <BottomTabBarHeightContext.Provider
+                  value={tabBarPosition === 'bottom' ? tabBarHeight : 0}
                 >
-                  <BottomTabBarHeightContext.Provider
-                    value={tabBarPosition === 'bottom' ? tabBarHeight : 0}
-                  >
-                    {render()}
-                  </BottomTabBarHeightContext.Provider>
-                </ScreenContent>
-              </Lazy>
+                  {render()}
+                </BottomTabBarHeightContext.Provider>
+              </ScreenContent>
             </AnimatedScreenContent>
           );
 
-          if (Platform.OS === 'web') {
-            /**
-             * Don't use react-native-screens on web:
-             * - It applies display: none as fallback, which triggers `onLayout` events
-             * - We still need to hide the view when screens is not enabled
-             * - We can use `inert` to handle a11y better for unfocused screens
-             */
-            return (
-              <Container
-                key={route.key}
-                inert={!isFocused}
-                style={{
-                  ...StyleSheet.absoluteFillObject,
-                  visibility: isFocused ? 'visible' : 'hidden',
-                }}
-              >
-                {content}
-              </Container>
-            );
-          }
+          const isAnimatingRoute =
+            lastUpdate.animating &&
+            (lastUpdate.previous === route.key ||
+              lastUpdate.current === route.key);
 
-          const activityState = isFocused
-            ? STATE_ON_TOP // the screen is on top after the transition
-            : animationEnabled // is animation is not enabled, immediately move to inactive state
-              ? tabAnims[route.key].interpolate({
-                  inputRange: [0, 1 - EPSILON, 1],
-                  outputRange: [
-                    STATE_TRANSITIONING_OR_BELOW_TOP, // screen visible during transition
-                    STATE_TRANSITIONING_OR_BELOW_TOP,
-                    STATE_INACTIVE, // the screen is detached after transition
-                  ],
-                  extrapolate: 'extend',
-                })
-              : STATE_INACTIVE;
+          // For preloaded screens and if lazy is false,
+          // Keep them active so that the effects can run
+          const isActive =
+            inactiveBehavior === 'none' ||
+            isAnimatingRoute ||
+            isPreloaded ||
+            (lazy === false && !loaded.includes(route.key));
 
           return (
-            <Screen
+            <Deferred
               key={route.key}
-              style={[
-                StyleSheet.absoluteFill,
-                {
-                  zIndex: isFocused ? 0 : -1,
-                  pointerEvents: isFocused ? 'auto' : 'none',
-                },
-              ]}
-              activityState={activityState}
-              enabled={detachInactiveScreens}
-              shouldFreeze={activityState === STATE_INACTIVE && !isPreloaded}
+              lazy={lazy}
+              visible={isFocused || isPreloaded || loaded.includes(route.key)}
             >
-              {content}
-            </Screen>
+              <ActivityView
+                mode={isFocused ? 'normal' : isActive ? 'inert' : 'paused'}
+                visible={isFocused || isAnimatingRoute}
+                style={{
+                  ...StyleSheet.absoluteFill,
+                  zIndex: isFocused ? 0 : -1,
+                }}
+              >
+                {content}
+              </ActivityView>
+            </Deferred>
           );
         })}
-      </ScreenContainer>
+      </Container>
       {tabBarPosition === 'bottom' || tabBarPosition === 'right'
         ? tabBarElement
         : null}
@@ -343,7 +372,7 @@ function AnimatedScreenContent({
 }: {
   progress: Animated.Value;
   animationEnabled: boolean;
-  sceneStyleInterpolator?: BottomTabSceneStyleInterpolator;
+  sceneStyleInterpolator?: BottomTabSceneStyleInterpolator | undefined;
   children: React.ReactNode;
   style: StyleProp<ViewStyle>;
 }) {