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

package/src/views/BottomTabViewCustom.tsx

@@ -1,6 +1,6 @@
 import {
+  ActivityView,
   Container,
-  Lazy,
   SafeAreaProviderCompat,
 } from '@react-navigation/elements/internal';
 import {
@@ -17,7 +17,6 @@ import {
   StyleSheet,
   type ViewStyle,
 } from 'react-native';
-import { Screen, ScreenContainer } from 'react-native-screens';
 
 import {
   FadeTransition,
@@ -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,22 +77,43 @@ 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 previousRouteKeyRef = React.useRef(focusedRouteKey);
+  const [loaded, setLoaded] = React.useState([focusedRouteKey]);
+
+  if (!loaded.includes(focusedRouteKey)) {
+    setLoaded([...loaded, focusedRouteKey]);
+  }
+
+  const [lastUpdate, setLastUpdate] = React.useState<{
+    current: string;
+    previous?: string;
+  }>({
+    current: focusedRouteKey,
+  });
+
+  if (lastUpdate.current !== focusedRouteKey) {
+    setLastUpdate({
+      current: focusedRouteKey,
+      previous: lastUpdate.current,
+    });
+  }
+
   const tabAnims = useAnimatedHashMap(state);
 
+  const [isAnimating, setIsAnimating] = React.useState(false);
+
+  const previousRouteKeyRef = React.useRef(focusedRouteKey);
+
   React.useEffect(() => {
     const previousRouteKey = previousRouteKeyRef.current;
 
     let popToTopAction: NavigationAction | undefined;
 
     if (
+      previousRouteKey &&
       previousRouteKey !== focusedRouteKey &&
       descriptors[previousRouteKey]?.options.popToTopOnBlur
     ) {
@@ -114,6 +129,8 @@ export function BottomTabViewCustom({
       }
     }
 
+    let timer: ReturnType<typeof setTimeout>;
+
     const animateToIndex = () => {
       if (previousRouteKey !== focusedRouteKey) {
         navigation.emit({
@@ -122,40 +139,42 @@ 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,
-            });
-          })
-          .filter(Boolean) as Animated.CompositeAnimation[]
-      ).start(({ finished }) => {
+      const animations = 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,
+          });
+        })
+        .filter((anim) => anim != null);
+
+      if (animations.length) {
+        // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+        setIsAnimating(true);
+      }
+
+      Animated.parallel(animations).start(({ finished }) => {
         if (finished && popToTopAction) {
           navigation.dispatch(popToTopAction);
         }
@@ -166,12 +185,24 @@ export function BottomTabViewCustom({
             target: focusedRouteKey,
           });
         }
+
+        if (finished && animations.length) {
+          // Delay clearing `isAnimating`
+          // This will give time for `popToAction` to get handled before pause
+          timer = setTimeout(() => {
+            setIsAnimating(false);
+          }, 32);
+        }
       });
     };
 
     animateToIndex();
 
     previousRouteKeyRef.current = focusedRouteKey;
+
+    return () => {
+      clearTimeout(timer);
+    };
   }, [
     descriptors,
     focusedRouteKey,
@@ -204,11 +235,6 @@ 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
   );
@@ -225,12 +251,7 @@ 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];
 
@@ -238,6 +259,7 @@ export function BottomTabViewCustom({
 
           const {
             lazy = true,
+            inactiveBehavior = 'pause',
             animation = 'none',
             sceneStyleInterpolator = NAMED_TRANSITIONS_PRESETS[animation]
               .sceneStyleInterpolator,
@@ -247,86 +269,66 @@ export function BottomTabViewCustom({
           const isFocused = state.index === index;
           const isPreloaded = state.preloadedRouteKeys.includes(route.key);
 
+          if (
+            lazy &&
+            !loaded.includes(route.key) &&
+            !isFocused &&
+            !isPreloaded
+          ) {
+            // Don't render a lazy screen if we've never navigated to it or it wasn't preloaded
+            return null;
+          }
+
           const animationEnabled = hasAnimation(descriptor.options);
 
           const content = (
             <AnimatedScreenContent
+              key={route.key}
               progress={tabAnims[route.key]}
               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 =
+            isAnimating &&
+            (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
+            <ActivityView
               key={route.key}
-              style={[
-                StyleSheet.absoluteFill,
-                {
-                  zIndex: isFocused ? 0 : -1,
-                  pointerEvents: isFocused ? 'auto' : 'none',
-                },
-              ]}
-              activityState={activityState}
-              enabled={detachInactiveScreens}
-              shouldFreeze={activityState === STATE_INACTIVE && !isPreloaded}
+              mode={isFocused ? 'normal' : isActive ? 'inert' : 'paused'}
+              visible={isFocused || isAnimatingRoute}
+              style={{ ...StyleSheet.absoluteFill, zIndex: isFocused ? 0 : -1 }}
             >
               {content}
-            </Screen>
+            </ActivityView>
           );
         })}
-      </ScreenContainer>
+      </Container>
       {tabBarPosition === 'bottom' || tabBarPosition === 'right'
         ? tabBarElement
         : null}
@@ -343,7 +345,7 @@ function AnimatedScreenContent({
 }: {
   progress: Animated.Value;
   animationEnabled: boolean;
-  sceneStyleInterpolator?: BottomTabSceneStyleInterpolator;
+  sceneStyleInterpolator?: BottomTabSceneStyleInterpolator | undefined;
   children: React.ReactNode;
   style: StyleProp<ViewStyle>;
 }) {