@react-navigation/bottom-tabs 7.0.0-alpha.1 → 7.0.0-alpha.10

package/src/views/BottomTabBar.tsx

@@ -1,24 +1,30 @@
-import { MissingIcon } from '@react-navigation/elements';
+import {
+  getDefaultSidebarWidth,
+  getLabel,
+  MissingIcon,
+} from '@react-navigation/elements';
 import {
   CommonActions,
   NavigationContext,
   NavigationRouteContext,
-  ParamListBase,
-  TabNavigationState,
-  useLinkTools,
+  type ParamListBase,
+  type TabNavigationState,
+  useLinkBuilder,
   useTheme,
 } from '@react-navigation/native';
+import Color from 'color';
 import React from 'react';
 import {
   Animated,
-  LayoutChangeEvent,
+  type LayoutChangeEvent,
   Platform,
-  StyleProp,
+  type StyleProp,
   StyleSheet,
+  useWindowDimensions,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native';
-import { EdgeInsets, useSafeAreaFrame } from 'react-native-safe-area-context';
+import type { EdgeInsets } from 'react-native-safe-area-context';
 
 import type { BottomTabBarProps, BottomTabDescriptorMap } from '../types';
 import { BottomTabBarHeightCallbackContext } from '../utils/BottomTabBarHeightCallbackContext';
@@ -32,6 +38,7 @@ type Props = BottomTabBarProps & {
 const DEFAULT_TABBAR_HEIGHT = 49;
 const COMPACT_TABBAR_HEIGHT = 32;
 const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
+const SPACING = 5;
 
 const useNativeDriver = Platform.OS !== 'web';
 
@@ -97,8 +104,11 @@ export const getTabBarHeight = ({
   insets: EdgeInsets;
   style: Animated.WithAnimatedValue<StyleProp<ViewStyle>> | undefined;
 }) => {
-  // @ts-ignore
-  const customHeight = StyleSheet.flatten(style)?.height;
+  const flattenedStyle = StyleSheet.flatten(style);
+  const customHeight =
+    flattenedStyle && 'height' in flattenedStyle
+      ? flattenedStyle.height
+      : undefined;
 
   if (typeof customHeight === 'number') {
     return customHeight;
@@ -133,13 +143,14 @@ export function BottomTabBar({
   style,
 }: Props) {
   const { colors } = useTheme();
-  const { buildHref } = useLinkTools();
+  const { buildHref } = useLinkBuilder();
 
   const focusedRoute = state.routes[state.index];
   const focusedDescriptor = descriptors[focusedRoute.key];
   const focusedOptions = focusedDescriptor.options;
 
   const {
+    tabBarPosition = 'bottom',
     tabBarShowLabel,
     tabBarHideOnKeyboard = false,
     tabBarVisibilityAnimationConfig,
@@ -147,11 +158,18 @@ export function BottomTabBar({
     tabBarBackground,
     tabBarActiveTintColor,
     tabBarInactiveTintColor,
-    tabBarActiveBackgroundColor,
+    tabBarActiveBackgroundColor = tabBarPosition !== 'bottom' &&
+    tabBarPosition !== 'top'
+      ? Color(tabBarActiveTintColor ?? colors.primary)
+          .alpha(0.12)
+          .rgb()
+          .string()
+      : undefined,
     tabBarInactiveBackgroundColor,
   } = focusedOptions;
 
-  const dimensions = useSafeAreaFrame();
+  // FIXME: useSafeAreaFrame doesn't update values when window is resized on Web
+  const dimensions = useWindowDimensions();
   const isKeyboardShown = useIsKeyboardShown();
 
   const onHeightChange = React.useContext(BottomTabBarHeightCallbackContext);
@@ -253,45 +271,69 @@ export function BottomTabBar({
 
   const tabBarBackgroundElement = tabBarBackground?.();
 
+  const tabBarIsHorizontal =
+    tabBarPosition === 'bottom' || tabBarPosition === 'top';
+
   return (
     <Animated.View
       style={[
-        styles.tabBar,
+        tabBarPosition === 'left'
+          ? styles.left
+          : tabBarPosition === 'right'
+            ? styles.right
+            : styles.bottom,
         {
           backgroundColor:
             tabBarBackgroundElement != null ? 'transparent' : colors.card,
-          borderTopColor: colors.border,
+          borderColor: colors.border,
         },
-        {
-          transform: [
-            {
-              translateY: visible.interpolate({
-                inputRange: [0, 1],
-                outputRange: [
-                  layout.height + paddingBottom + StyleSheet.hairlineWidth,
-                  0,
+        tabBarIsHorizontal
+          ? [
+              {
+                transform: [
+                  {
+                    translateY: visible.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [
+                        layout.height +
+                          paddingBottom +
+                          StyleSheet.hairlineWidth,
+                        0,
+                      ],
+                    }),
+                  },
                 ],
-              }),
+                // Absolutely position the tab bar so that the content is below it
+                // This is needed to avoid gap at bottom when the tab bar is hidden
+                position: isTabBarHidden ? 'absolute' : undefined,
+              },
+              {
+                height: tabBarHeight,
+                paddingBottom,
+                paddingHorizontal: Math.max(insets.left, insets.right),
+              },
+            ]
+          : {
+              paddingTop: insets.top,
+              paddingBottom: insets.bottom,
+              paddingLeft: tabBarPosition === 'left' ? insets.left : 0,
+              paddingRight: tabBarPosition === 'right' ? insets.right : 0,
+              minWidth: hasHorizontalLabels
+                ? getDefaultSidebarWidth(dimensions)
+                : 0,
             },
-          ],
-          // Absolutely position the tab bar so that the content is below it
-          // This is needed to avoid gap at bottom when the tab bar is hidden
-          position: isTabBarHidden ? 'absolute' : (null as any),
-        },
-        {
-          height: tabBarHeight,
-          paddingBottom,
-          paddingHorizontal: Math.max(insets.left, insets.right),
-        },
         tabBarStyle,
       ]}
       pointerEvents={isTabBarHidden ? 'none' : 'auto'}
-      onLayout={handleLayout}
+      onLayout={tabBarIsHorizontal ? handleLayout : undefined}
     >
       <View pointerEvents="none" style={StyleSheet.absoluteFill}>
         {tabBarBackgroundElement}
       </View>
-      <View accessibilityRole="tablist" style={styles.content}>
+      <View
+        accessibilityRole="tablist"
+        style={tabBarIsHorizontal ? styles.bottomContent : styles.sideContent}
+      >
         {routes.map((route, index) => {
           const focused = index === state.index;
           const { options } = descriptors[route.key];
@@ -319,18 +361,19 @@ export function BottomTabBar({
           };
 
           const label =
-            options.tabBarLabel !== undefined
+            typeof options.tabBarLabel === 'function'
               ? options.tabBarLabel
-              : options.title !== undefined
-              ? options.title
-              : route.name;
+              : getLabel(
+                  { label: options.tabBarLabel, title: options.title },
+                  route.name
+                );
 
           const accessibilityLabel =
             options.tabBarAccessibilityLabel !== undefined
               ? options.tabBarAccessibilityLabel
               : typeof label === 'string' && Platform.OS === 'ios'
-              ? `${label}, tab, ${index + 1} of ${routes.length}`
-              : undefined;
+                ? `${label}, tab, ${index + 1} of ${routes.length}`
+                : undefined;
 
           return (
             <NavigationContext.Provider
@@ -366,7 +409,17 @@ export function BottomTabBar({
                   showLabel={tabBarShowLabel}
                   labelStyle={options.tabBarLabelStyle}
                   iconStyle={options.tabBarIconStyle}
-                  style={options.tabBarItemStyle}
+                  style={[
+                    tabBarIsHorizontal
+                      ? styles.bottomItem
+                      : [
+                          styles.sideItem,
+                          hasHorizontalLabels
+                            ? { justifyContent: 'flex-start' }
+                            : null,
+                        ],
+                    options.tabBarItemStyle,
+                  ]}
                 />
               </NavigationRouteContext.Provider>
             </NavigationContext.Provider>
@@ -378,15 +431,40 @@ export function BottomTabBar({
 }
 
 const styles = StyleSheet.create({
-  tabBar: {
+  left: {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    borderRightWidth: StyleSheet.hairlineWidth,
+  },
+  right: {
+    top: 0,
+    bottom: 0,
+    right: 0,
+    borderLeftWidth: StyleSheet.hairlineWidth,
+  },
+  bottom: {
     left: 0,
     right: 0,
     bottom: 0,
     borderTopWidth: StyleSheet.hairlineWidth,
     elevation: 8,
   },
-  content: {
+  bottomContent: {
     flex: 1,
     flexDirection: 'row',
   },
+  sideContent: {
+    flex: 1,
+    flexDirection: 'column',
+    padding: SPACING,
+  },
+  bottomItem: {
+    flex: 1,
+  },
+  sideItem: {
+    margin: SPACING,
+    padding: SPACING * 2,
+    borderRadius: 4,
+  },
 });

package/src/views/BottomTabItem.tsx

@@ -1,15 +1,14 @@
-import { CommonActions, Link, Route, useTheme } from '@react-navigation/native';
+import { getLabel, Label, PlatformPressable } from '@react-navigation/elements';
+import { type Route, useTheme } from '@react-navigation/native';
 import Color from 'color';
 import React from 'react';
 import {
-  GestureResponderEvent,
+  type GestureResponderEvent,
   Platform,
-  Pressable,
-  StyleProp,
+  type StyleProp,
   StyleSheet,
-  Text,
-  TextStyle,
-  ViewStyle,
+  type TextStyle,
+  type ViewStyle,
 } from 'react-native';
 
 import type {
@@ -64,7 +63,7 @@ type Props = {
    */
   badgeStyle?: StyleProp<TextStyle>;
   /**
-   * The button for the tab. Uses a `TouchableWithoutFeedback` by default.
+   * The button for the tab. Uses a `Pressable` by default.
    */
   button?: (props: BottomTabBarButtonProps) => React.ReactNode;
   /**
@@ -145,40 +144,19 @@ export function BottomTabItem({
     accessibilityRole,
     ...rest
   }: BottomTabBarButtonProps) => {
-    if (Platform.OS === 'web') {
-      // React Native Web doesn't forward `onClick` if we use `TouchableWithoutFeedback`.
-      // We need to use `onClick` to be able to prevent default browser handling of links.
-      return (
-        <Link
-          {...rest}
-          href={href}
-          action={CommonActions.navigate(route.name, route.params)}
-          style={[styles.button, style]}
-          onPress={(e: any) => {
-            if (
-              !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys
-              (e.button == null || e.button === 0) // ignore everything but left clicks
-            ) {
-              e.preventDefault();
-              onPress?.(e);
-            }
-          }}
-        >
-          {children}
-        </Link>
-      );
-    } else {
-      return (
-        <Pressable
-          {...rest}
-          accessibilityRole={accessibilityRole}
-          onPress={onPress}
-          style={style}
-        >
-          {children}
-        </Pressable>
-      );
-    }
+    return (
+      <PlatformPressable
+        {...rest}
+        android_ripple={{ borderless: true }}
+        pressOpacity={1}
+        href={href}
+        accessibilityRole={accessibilityRole}
+        onPress={onPress}
+        style={style}
+      >
+        {children}
+      </PlatformPressable>
+    );
   },
   accessibilityLabel,
   testID,
@@ -195,7 +173,7 @@ export function BottomTabItem({
   iconStyle,
   style,
 }: Props) {
-  const { colors, fonts } = useTheme();
+  const { colors } = useTheme();
 
   const activeTintColor =
     customActiveTintColor === undefined
@@ -214,38 +192,39 @@ export function BottomTabItem({
 
     const color = focused ? activeTintColor : inactiveTintColor;
 
-    if (typeof label === 'string') {
-      return (
-        <Text
-          numberOfLines={1}
-          style={[
-            { color },
-            fonts.regular,
-            styles.label,
-            horizontal ? styles.labelBeside : styles.labelBeneath,
-            labelStyle,
-          ]}
-          allowFontScaling={allowFontScaling}
-        >
-          {label}
-        </Text>
+    if (typeof label !== 'string') {
+      const { options } = descriptor;
+      const children = getLabel(
+        {
+          label:
+            typeof options.tabBarLabel === 'string'
+              ? options.tabBarLabel
+              : undefined,
+          title: options.title,
+        },
+        route.name
       );
-    }
 
-    const { options } = descriptor;
-    const children =
-      typeof options.tabBarLabel === 'string'
-        ? options.tabBarLabel
-        : options.title !== undefined
-        ? options.title
-        : route.name;
+      return label({
+        focused,
+        color,
+        position: horizontal ? 'beside-icon' : 'below-icon',
+        children,
+      });
+    }
 
-    return label({
-      focused,
-      color,
-      position: horizontal ? 'beside-icon' : 'below-icon',
-      children,
-    });
+    return (
+      <Label
+        style={[
+          horizontal ? styles.labelBeside : styles.labelBeneath,
+          labelStyle,
+        ]}
+        allowFontScaling={allowFontScaling}
+        tintColor={color}
+      >
+        {label}
+      </Label>
+    );
   };
 
   const renderIcon = ({ focused }: { focused: boolean }) => {
@@ -306,7 +285,6 @@ export function BottomTabItem({
 
 const styles = StyleSheet.create({
   tab: {
-    flex: 1,
     alignItems: 'center',
   },
   tabPortrait: {
@@ -317,19 +295,11 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexDirection: 'row',
   },
-  label: {
-    textAlign: 'center',
-    backgroundColor: 'transparent',
-  },
   labelBeneath: {
     fontSize: 10,
   },
   labelBeside: {
     fontSize: 13,
     marginLeft: 20,
-    marginTop: 3,
-  },
-  button: {
-    display: 'flex',
   },
 });

package/src/views/BottomTabView.tsx

@@ -9,7 +9,7 @@ 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 type {
@@ -18,10 +18,12 @@ import type {
   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 +33,21 @@ 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 hasAnimation = (options: BottomTabNavigationOptions) => {
+  const { animationEnabled, transitionSpec } = options;
+
+  if (animationEnabled === false || !transitionSpec) {
+    return false;
+  }
+
+  return true;
+};
+
 export function BottomTabView(props: Props) {
   const {
     tabBar = (props: BottomTabBarProps) => <BottomTabBar {...props} />,
@@ -45,12 +62,53 @@ 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 tabAnims = useAnimatedHashMap(state);
+
+  React.useEffect(() => {
+    const animateToIndex = () => {
+      Animated.parallel(
+        state.routes
+          .map((route, index) => {
+            const { options } = descriptors[route.key];
+            const { transitionSpec } = options;
+
+            const animationEnabled = hasAnimation(options);
+
+            const toValue =
+              index === state.index ? 0 : index >= state.index ? 1 : -1;
+
+            if (!animationEnabled || !transitionSpec) {
+              return Animated.timing(tabAnims[route.key], {
+                toValue,
+                duration: 0,
+                useNativeDriver: true,
+              });
+            }
+
+            return Animated[transitionSpec.animation](tabAnims[route.key], {
+              ...transitionSpec.config,
+              toValue,
+              useNativeDriver: true,
+            });
+          })
+          .filter(Boolean) as Animated.CompositeAnimation[]
+      ).start();
+    };
+
+    animateToIndex();
+  }, [descriptors, state.index, state.routes, tabAnims]);
+
   const dimensions = SafeAreaProviderCompat.initialMetrics.frame;
   const [tabBarHeight, setTabBarHeight] = React.useState(() =>
     getTabBarHeight({
@@ -88,24 +146,53 @@ 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.left
+          : tabBarPosition === 'right'
+            ? styles.right
+            : 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,
+            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 +210,37 @@ export function BottomTabView(props: Props) {
             headerTransparent,
           } = descriptor.options;
 
+          const { sceneStyle } =
+            sceneStyleInterpolator?.({
+              current: 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 +255,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 +264,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: {
+  left: {
+    flexDirection: 'row-reverse',
+  },
+  right: {
+    flexDirection: 'row',
+  },
+  screens: {
     flex: 1,
     overflow: 'hidden',
   },