@react-navigation/bottom-tabs 8.0.0-alpha.4 → 8.0.0-alpha.40

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,
@@ -37,6 +36,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 +45,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 +78,51 @@ 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 &&
       previousRouteKey !== focusedRouteKey &&
       descriptors[previousRouteKey]?.options.popToTopOnBlur
     ) {
@@ -114,6 +138,8 @@ export function BottomTabViewCustom({
       }
     }
 
+    let timer: ReturnType<typeof setTimeout> | undefined;
+
     const animateToIndex = () => {
       if (previousRouteKey !== focusedRouteKey) {
         navigation.emit({
@@ -122,41 +148,51 @@ 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 }) => {
-        if (finished && popToTopAction) {
+      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 (popToTopAction) {
           navigation.dispatch(popToTopAction);
         }
 
@@ -166,12 +202,26 @@ export function BottomTabViewCustom({
             target: focusedRouteKey,
           });
         }
+
+        if (finished && animations.length) {
+          // Delay clearing `animating` state
+          // This will give time for `popToAction` 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 +237,7 @@ export function BottomTabViewCustom({
       descriptors,
       dimensions: SafeAreaProviderCompat.initialMetrics.frame,
       insets: SafeAreaProviderCompat.initialMetrics.insets,
-      style: descriptors[focusedRouteKey].options.tabBarStyle,
+      style: focusedOptions?.tabBarStyle,
     })
   );
 
@@ -204,14 +254,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 +268,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 +293,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 +373,7 @@ function AnimatedScreenContent({
 }: {
   progress: Animated.Value;
   animationEnabled: boolean;
-  sceneStyleInterpolator?: BottomTabSceneStyleInterpolator;
+  sceneStyleInterpolator?: BottomTabSceneStyleInterpolator | undefined;
   children: React.ReactNode;
   style: StyleProp<ViewStyle>;
 }) {