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

package/src/views/BottomTabView.tsx

@@ -9,19 +9,25 @@ import type {
   TabNavigationState,
 } from '@react-navigation/native';
 import * as React from 'react';
-import { Platform, StyleSheet } from 'react-native';
+import { Animated, Platform, StyleSheet } from 'react-native';
 import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 
+import {
+  FadeTransition,
+  ShiftTransition,
+} from '../TransitionConfigs/TransitionPresets';
 import type {
   BottomTabBarProps,
   BottomTabDescriptorMap,
   BottomTabHeaderProps,
   BottomTabNavigationConfig,
   BottomTabNavigationHelpers,
+  BottomTabNavigationOptions,
   BottomTabNavigationProp,
 } from '../types';
 import { BottomTabBarHeightCallbackContext } from '../utils/BottomTabBarHeightCallbackContext';
 import { BottomTabBarHeightContext } from '../utils/BottomTabBarHeightContext';
+import { useAnimatedHashMap } from '../utils/useAnimatedHashMap';
 import { BottomTabBar, getTabBarHeight } from './BottomTabBar';
 import { MaybeScreen, MaybeScreenContainer } from './ScreenFallback';
 
@@ -31,6 +37,33 @@ 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,
+  none: {
+    sceneStyleInterpolator: undefined,
+    transitionSpec: {
+      animation: 'timing',
+      config: { duration: 0 },
+    },
+  },
+} as const;
+
+const hasAnimation = (options: BottomTabNavigationOptions) => {
+  const { animation, transitionSpec } = options;
+
+  if (animation) {
+    return animation !== 'none';
+  }
+
+  return !transitionSpec;
+};
+
 export function BottomTabView(props: Props) {
   const {
     tabBar = (props: BottomTabBarProps) => <BottomTabBar {...props} />,
@@ -45,12 +78,65 @@ export function BottomTabView(props: Props) {
   } = props;
 
   const focusedRouteKey = state.routes[state.index].key;
+
+  /**
+   * List of loaded tabs, tabs will be loaded when navigated to.
+   */
   const [loaded, setLoaded] = React.useState([focusedRouteKey]);
 
   if (!loaded.includes(focusedRouteKey)) {
+    // Set the current tab to be loaded if it was not loaded before
     setLoaded([...loaded, focusedRouteKey]);
   }
 
+  const previousRouteKeyRef = React.useRef(focusedRouteKey);
+  const tabAnims = useAnimatedHashMap(state);
+
+  React.useEffect(() => {
+    const previousRouteKey = previousRouteKeyRef.current;
+
+    previousRouteKeyRef.current = focusedRouteKey;
+
+    const animateToIndex = () => {
+      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: true,
+            });
+          })
+          .filter(Boolean) as Animated.CompositeAnimation[]
+      ).start();
+    };
+
+    animateToIndex();
+  }, [descriptors, focusedRouteKey, state.index, state.routes, tabAnims]);
+
   const dimensions = SafeAreaProviderCompat.initialMetrics.frame;
   const [tabBarHeight, setTabBarHeight] = React.useState(() =>
     getTabBarHeight({
@@ -88,24 +174,55 @@ export function BottomTabView(props: Props) {
 
   const { routes } = state;
 
+  // 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 = 'bottom' } = descriptors[focusedRouteKey].options;
+
   return (
-    <SafeAreaProviderCompat>
+    <SafeAreaProviderCompat
+      style={
+        tabBarPosition === 'left'
+          ? styles.start
+          : tabBarPosition === 'right'
+            ? styles.end
+            : null
+      }
+    >
+      {tabBarPosition === 'top' ? (
+        <BottomTabBarHeightCallbackContext.Provider value={setTabBarHeight}>
+          {renderTabBar()}
+        </BottomTabBarHeightCallbackContext.Provider>
+      ) : null}
       <MaybeScreenContainer
         enabled={detachInactiveScreens}
-        hasTwoStates
-        style={styles.container}
+        hasTwoStates={hasTwoStates}
+        style={styles.screens}
       >
         {routes.map((route, index) => {
           const descriptor = descriptors[route.key];
-          const { lazy = true, unmountOnBlur } = descriptor.options;
+          const {
+            lazy = true,
+            unmountOnBlur,
+            animation = 'none',
+            sceneStyleInterpolator = NAMED_TRANSITIONS_PRESETS[animation]
+              .sceneStyleInterpolator,
+          } = descriptor.options;
           const isFocused = state.index === index;
 
           if (unmountOnBlur && !isFocused) {
             return null;
           }
 
-          if (lazy && !loaded.includes(route.key) && !isFocused) {
-            // Don't render a lazy screen if we've never navigated to it
+          if (
+            lazy &&
+            !loaded.includes(route.key) &&
+            !isFocused &&
+            !state.preloadedRouteKeys.includes(route.key)
+          ) {
+            // Don't render a lazy screen if we've never navigated to it or it wasn't preloaded
             return null;
           }
 
@@ -123,15 +240,39 @@ export function BottomTabView(props: Props) {
             headerTransparent,
           } = descriptor.options;
 
+          const { sceneStyle } =
+            sceneStyleInterpolator?.({
+              current: {
+                progress: tabAnims[route.key],
+              },
+            }) ?? {};
+
+          const animationEnabled = hasAnimation(descriptor.options);
+          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;
+
           return (
             <MaybeScreen
               key={route.key}
               style={[StyleSheet.absoluteFill, { zIndex: isFocused ? 0 : -1 }]}
-              visible={isFocused}
+              active={activityState}
               enabled={detachInactiveScreens}
               freezeOnBlur={freezeOnBlur}
             >
-              <BottomTabBarHeightContext.Provider value={tabBarHeight}>
+              <BottomTabBarHeightContext.Provider
+                value={tabBarPosition === 'bottom' ? tabBarHeight : 0}
+              >
                 <Screen
                   focused={isFocused}
                   route={descriptor.route}
@@ -146,7 +287,7 @@ export function BottomTabView(props: Props) {
                       descriptor.navigation as BottomTabNavigationProp<ParamListBase>,
                     options: descriptor.options,
                   })}
-                  style={sceneContainerStyle}
+                  style={[sceneContainerStyle, animationEnabled && sceneStyle]}
                 >
                   {descriptor.render()}
                 </Screen>
@@ -155,15 +296,23 @@ export function BottomTabView(props: Props) {
           );
         })}
       </MaybeScreenContainer>
-      <BottomTabBarHeightCallbackContext.Provider value={setTabBarHeight}>
-        {renderTabBar()}
-      </BottomTabBarHeightCallbackContext.Provider>
+      {tabBarPosition !== 'top' ? (
+        <BottomTabBarHeightCallbackContext.Provider value={setTabBarHeight}>
+          {renderTabBar()}
+        </BottomTabBarHeightCallbackContext.Provider>
+      ) : null}
     </SafeAreaProviderCompat>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
+  start: {
+    flexDirection: 'row-reverse',
+  },
+  end: {
+    flexDirection: 'row',
+  },
+  screens: {
     flex: 1,
     overflow: 'hidden',
   },

package/src/views/ScreenFallback.tsx

@@ -1,11 +1,16 @@
-import { ResourceSavingView } from '@react-navigation/elements';
 import * as React from 'react';
-import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+import {
+  Animated,
+  type StyleProp,
+  View,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
 
 type Props = {
-  visible: boolean;
-  children: React.ReactNode;
   enabled: boolean;
+  active: 0 | 1 | 2 | Animated.AnimatedInterpolation<0 | 1>;
+  children: React.ReactNode;
   freezeOnBlur?: boolean;
   style?: StyleProp<ViewStyle>;
 };
@@ -33,18 +38,12 @@ export const MaybeScreenContainer = ({
   return <View {...rest} />;
 };
 
-export function MaybeScreen({ visible, children, ...rest }: Props) {
+export function MaybeScreen({ enabled, active, ...rest }: ViewProps & Props) {
   if (Screens?.screensEnabled?.()) {
     return (
-      <Screens.Screen activityState={visible ? 2 : 0} {...rest}>
-        {children}
-      </Screens.Screen>
+      <Screens.Screen enabled={enabled} activityState={active} {...rest} />
     );
   }
 
-  return (
-    <ResourceSavingView visible={visible} {...rest}>
-      {children}
-    </ResourceSavingView>
-  );
+  return <View {...rest} />;
 }

package/src/views/TabBarIcon.tsx

@@ -1,11 +1,11 @@
 import type { Route } from '@react-navigation/native';
 import React from 'react';
 import {
-  StyleProp,
+  type StyleProp,
   StyleSheet,
-  TextStyle,
+  type TextStyle,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native';
 
 import { Badge } from './Badge';
@@ -27,6 +27,8 @@ type Props = {
   style: StyleProp<ViewStyle>;
 };
 
+const ICON_SIZE = 25;
+
 export function TabBarIcon({
   route: _,
   horizontal,
@@ -39,8 +41,6 @@ export function TabBarIcon({
   renderIcon,
   style,
 }: Props) {
-  const size = 25;
-
   // We render the icon twice at the same position on top of each other:
   // active and inactive one, so we can fade between them.
   return (
@@ -50,25 +50,21 @@ export function TabBarIcon({
       <View style={[styles.icon, { opacity: activeOpacity }]}>
         {renderIcon({
           focused: true,
-          size,
+          size: ICON_SIZE,
           color: activeTintColor,
         })}
       </View>
       <View style={[styles.icon, { opacity: inactiveOpacity }]}>
         {renderIcon({
           focused: false,
-          size,
+          size: ICON_SIZE,
           color: inactiveTintColor,
         })}
       </View>
       <Badge
         visible={badge != null}
-        style={[
-          styles.badge,
-          horizontal ? styles.badgeHorizontal : styles.badgeVertical,
-          badgeStyle,
-        ]}
-        size={(size * 3) / 4}
+        style={[styles.badge, badgeStyle]}
+        size={ICON_SIZE * 0.75}
       >
         {badge}
       </Badge>
@@ -88,23 +84,19 @@ const styles = StyleSheet.create({
     height: '100%',
     width: '100%',
     // Workaround for react-native >= 0.54 layout bug
-    minWidth: 25,
+    minWidth: ICON_SIZE,
   },
   iconVertical: {
-    flex: 1,
+    width: ICON_SIZE,
+    height: ICON_SIZE,
   },
   iconHorizontal: {
-    height: '100%',
-    marginTop: 3,
+    width: ICON_SIZE,
+    height: ICON_SIZE,
   },
   badge: {
     position: 'absolute',
-    left: 3,
-  },
-  badgeVertical: {
-    top: 3,
-  },
-  badgeHorizontal: {
-    top: 7,
+    end: -5,
+    top: -5,
   },
 });