@react-navigation/bottom-tabs 7.0.0-alpha.8 → 7.0.0-rc.0

package/src/views/BottomTabBar.tsx

@@ -10,6 +10,7 @@ import {
   type ParamListBase,
   type TabNavigationState,
   useLinkBuilder,
+  useLocale,
   useTheme,
 } from '@react-navigation/native';
 import Color from 'color';
@@ -20,11 +21,13 @@ import {
   Platform,
   type StyleProp,
   StyleSheet,
-  useWindowDimensions,
   View,
   type ViewStyle,
 } from 'react-native';
-import type { EdgeInsets } from 'react-native-safe-area-context';
+import {
+  type EdgeInsets,
+  useSafeAreaFrame,
+} from 'react-native-safe-area-context';
 
 import type { BottomTabBarProps, BottomTabDescriptorMap } from '../types';
 import { BottomTabBarHeightCallbackContext } from '../utils/BottomTabBarHeightCallbackContext';
@@ -45,14 +48,12 @@ const useNativeDriver = Platform.OS !== 'web';
 type Options = {
   state: TabNavigationState<ParamListBase>;
   descriptors: BottomTabDescriptorMap;
-  layout: { height: number; width: number };
   dimensions: { height: number; width: number };
 };
 
 const shouldUseHorizontalLabels = ({
   state,
   descriptors,
-  layout,
   dimensions,
 }: Options) => {
   const { tabBarLabelPosition } =
@@ -67,7 +68,7 @@ const shouldUseHorizontalLabels = ({
     }
   }
 
-  if (layout.width >= 768) {
+  if (dimensions.width >= 768) {
     // Screen size matches a tablet
     const maxTabWidth = state.routes.reduce((acc, route) => {
       const { tabBarItemStyle } = descriptors[route.key].options;
@@ -84,7 +85,7 @@ const shouldUseHorizontalLabels = ({
       return acc + DEFAULT_MAX_TAB_ITEM_WIDTH;
     }, 0);
 
-    return maxTabWidth <= layout.width;
+    return maxTabWidth <= dimensions.width;
   } else {
     return dimensions.width > dimensions.height;
   }
@@ -143,6 +144,7 @@ export function BottomTabBar({
   style,
 }: Props) {
   const { colors } = useTheme();
+  const { direction } = useLocale();
   const { buildHref } = useLinkBuilder();
 
   const focusedRoute = state.routes[state.index];
@@ -158,7 +160,8 @@ export function BottomTabBar({
     tabBarBackground,
     tabBarActiveTintColor,
     tabBarInactiveTintColor,
-    tabBarActiveBackgroundColor = tabBarPosition !== 'bottom'
+    tabBarActiveBackgroundColor = tabBarPosition !== 'bottom' &&
+    tabBarPosition !== 'top'
       ? Color(tabBarActiveTintColor ?? colors.primary)
           .alpha(0.12)
           .rgb()
@@ -167,8 +170,7 @@ export function BottomTabBar({
     tabBarInactiveBackgroundColor,
   } = focusedOptions;
 
-  // FIXME: useSafeAreaFrame doesn't update values when window is resized on Web
-  const dimensions = useWindowDimensions();
+  const dimensions = useSafeAreaFrame();
   const isKeyboardShown = useIsKeyboardShown();
 
   const onHeightChange = React.useContext(BottomTabBarHeightCallbackContext);
@@ -229,22 +231,18 @@ export function BottomTabBar({
 
   const [layout, setLayout] = React.useState({
     height: 0,
-    width: dimensions.width,
   });
 
   const handleLayout = (e: LayoutChangeEvent) => {
-    const { height, width } = e.nativeEvent.layout;
+    const { height } = e.nativeEvent.layout;
 
     onHeightChange?.(height);
 
     setLayout((layout) => {
-      if (height === layout.height && width === layout.width) {
+      if (height === layout.height) {
         return layout;
       } else {
-        return {
-          height,
-          width,
-        };
+        return { height };
       }
     });
   };
@@ -257,7 +255,6 @@ export function BottomTabBar({
     descriptors,
     insets,
     dimensions,
-    layout,
     style: [tabBarStyle, style],
   });
 
@@ -265,26 +262,55 @@ export function BottomTabBar({
     state,
     descriptors,
     dimensions,
-    layout,
   });
 
+  const isSidebar = tabBarPosition === 'left' || tabBarPosition === 'right';
+
   const tabBarBackgroundElement = tabBarBackground?.();
 
   return (
     <Animated.View
       style={[
         tabBarPosition === 'left'
-          ? styles.left
+          ? styles.start
           : tabBarPosition === 'right'
-          ? styles.right
-          : styles.bottom,
+            ? styles.end
+            : styles.bottom,
+        (
+          Platform.OS === 'web'
+            ? tabBarPosition === 'right'
+            : (direction === 'rtl' && tabBarPosition === 'left') ||
+              (direction !== 'rtl' && tabBarPosition === 'right')
+        )
+          ? { borderLeftWidth: StyleSheet.hairlineWidth }
+          : (
+                Platform.OS === 'web'
+                  ? tabBarPosition === 'left'
+                  : (direction === 'rtl' && tabBarPosition === 'right') ||
+                    (direction !== 'rtl' && tabBarPosition === 'left')
+              )
+            ? { borderRightWidth: StyleSheet.hairlineWidth }
+            : tabBarPosition === 'top'
+              ? { borderBottomWidth: StyleSheet.hairlineWidth }
+              : { borderTopWidth: StyleSheet.hairlineWidth },
         {
           backgroundColor:
             tabBarBackgroundElement != null ? 'transparent' : colors.card,
           borderColor: colors.border,
         },
-        tabBarPosition === 'bottom'
-          ? [
+        isSidebar
+          ? {
+              paddingTop: SPACING + insets.top,
+              paddingBottom: SPACING + insets.bottom,
+              paddingStart:
+                SPACING + (tabBarPosition === 'left' ? insets.left : 0),
+              paddingEnd:
+                SPACING + (tabBarPosition === 'right' ? insets.right : 0),
+              minWidth: hasHorizontalLabels
+                ? getDefaultSidebarWidth(dimensions)
+                : 0,
+            }
+          : [
               {
                 transform: [
                   {
@@ -308,31 +334,18 @@ export function BottomTabBar({
                 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,
-            },
+            ],
         tabBarStyle,
       ]}
       pointerEvents={isTabBarHidden ? 'none' : 'auto'}
-      onLayout={tabBarPosition === 'bottom' ? handleLayout : undefined}
+      onLayout={isSidebar ? undefined : handleLayout}
     >
       <View pointerEvents="none" style={StyleSheet.absoluteFill}>
         {tabBarBackgroundElement}
       </View>
       <View
         accessibilityRole="tablist"
-        style={
-          tabBarPosition === 'bottom'
-            ? styles.bottomContent
-            : styles.sideContent
-        }
+        style={isSidebar ? styles.sideContent : styles.bottomContent}
       >
         {routes.map((route, index) => {
           const focused = index === state.index;
@@ -372,8 +385,8 @@ export function BottomTabBar({
             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
@@ -387,6 +400,7 @@ export function BottomTabBar({
                   descriptor={descriptors[route.key]}
                   focused={focused}
                   horizontal={hasHorizontalLabels}
+                  variant={isSidebar ? 'material' : 'uikit'}
                   onPress={onPress}
                   onLongPress={onLongPress}
                   accessibilityLabel={accessibilityLabel}
@@ -410,14 +424,14 @@ export function BottomTabBar({
                   labelStyle={options.tabBarLabelStyle}
                   iconStyle={options.tabBarIconStyle}
                   style={[
-                    tabBarPosition === 'bottom'
-                      ? styles.bottomItem
-                      : [
+                    isSidebar
+                      ? [
                           styles.sideItem,
                           hasHorizontalLabels
-                            ? { justifyContent: 'flex-start' }
-                            : null,
-                        ],
+                            ? styles.sideItemHorizontal
+                            : styles.sideItemVertical,
+                        ]
+                      : styles.bottomItem,
                     options.tabBarItemStyle,
                   ]}
                 />
@@ -431,23 +445,20 @@ export function BottomTabBar({
 }
 
 const styles = StyleSheet.create({
-  left: {
+  start: {
     top: 0,
     bottom: 0,
-    left: 0,
-    borderRightWidth: StyleSheet.hairlineWidth,
+    start: 0,
   },
-  right: {
+  end: {
     top: 0,
     bottom: 0,
-    right: 0,
-    borderLeftWidth: StyleSheet.hairlineWidth,
+    end: 0,
   },
   bottom: {
-    left: 0,
-    right: 0,
+    start: 0,
+    end: 0,
     bottom: 0,
-    borderTopWidth: StyleSheet.hairlineWidth,
     elevation: 8,
   },
   bottomContent: {
@@ -457,7 +468,6 @@ const styles = StyleSheet.create({
   sideContent: {
     flex: 1,
     flexDirection: 'column',
-    padding: SPACING,
   },
   bottomItem: {
     flex: 1,
@@ -465,6 +475,12 @@ const styles = StyleSheet.create({
   sideItem: {
     margin: SPACING,
     padding: SPACING * 2,
-    borderRadius: 4,
+  },
+  sideItemHorizontal: {
+    borderRadius: 56,
+    justifyContent: 'flex-start',
+  },
+  sideItemVertical: {
+    borderRadius: 16,
   },
 });

package/src/views/BottomTabItem.tsx

@@ -89,6 +89,12 @@ type Props = {
    * Whether the label should be aligned with the icon horizontally.
    */
   horizontal: boolean;
+  /**
+   * Variant of navigation bar styling
+   * - `uikit`: iOS UIKit style
+   * - `material`: Material Design style
+   */
+  variant: 'uikit' | 'material';
   /**
    * Color for the icon and label when the item is active.
    */
@@ -163,6 +169,7 @@ export function BottomTabItem({
   onPress,
   onLongPress,
   horizontal,
+  variant,
   activeTintColor: customActiveTintColor,
   inactiveTintColor: customInactiveTintColor,
   activeBackgroundColor = 'transparent',
@@ -173,7 +180,7 @@ export function BottomTabItem({
   iconStyle,
   style,
 }: Props) {
-  const { colors } = useTheme();
+  const { colors, fonts } = useTheme();
 
   const activeTintColor =
     customActiveTintColor === undefined
@@ -216,7 +223,14 @@ export function BottomTabItem({
     return (
       <Label
         style={[
-          horizontal ? styles.labelBeside : styles.labelBeneath,
+          horizontal
+            ? [
+                styles.labelBeside,
+                { marginStart: icon !== undefined ? 16 : 0 },
+                variant === 'uikit' && styles.labelBesideUikit,
+              ]
+            : styles.labelBeneath,
+          variant === 'material' && fonts.medium,
           labelStyle,
         ]}
         allowFontScaling={allowFontScaling}
@@ -286,6 +300,8 @@ export function BottomTabItem({
 const styles = StyleSheet.create({
   tab: {
     alignItems: 'center',
+    // Roundness for iPad hover effect
+    borderRadius: 10,
   },
   tabPortrait: {
     justifyContent: 'flex-end',
@@ -294,12 +310,20 @@ const styles = StyleSheet.create({
   tabLandscape: {
     justifyContent: 'center',
     flexDirection: 'row',
+    paddingVertical: 12,
+    paddingStart: 16,
+    paddingEnd: 24,
   },
   labelBeneath: {
     fontSize: 10,
   },
   labelBeside: {
+    marginEnd: 12,
+    marginVertical: 4,
+    lineHeight: 24,
+    marginStart: 20,
+  },
+  labelBesideUikit: {
     fontSize: 13,
-    marginLeft: 20,
   },
 });

package/src/views/BottomTabView.tsx

@@ -4,14 +4,21 @@ import {
   SafeAreaProviderCompat,
   Screen,
 } from '@react-navigation/elements';
-import type {
-  ParamListBase,
-  TabNavigationState,
+import {
+  type NavigationAction,
+  type ParamListBase,
+  StackActions,
+  type TabNavigationState,
+  useLocale,
 } from '@react-navigation/native';
 import * as React from 'react';
 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,
@@ -38,14 +45,26 @@ 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 { animationEnabled, transitionSpec } = options;
+  const { animation, transitionSpec } = options;
 
-  if (animationEnabled === false || !transitionSpec) {
-    return false;
+  if (animation) {
+    return animation !== 'none';
   }
 
-  return true;
+  return !transitionSpec;
 };
 
 export function BottomTabView(props: Props) {
@@ -63,6 +82,8 @@ export function BottomTabView(props: Props) {
 
   const focusedRouteKey = state.routes[state.index].key;
 
+  const { direction } = useLocale();
+
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
    */
@@ -73,41 +94,82 @@ export function BottomTabView(props: Props) {
     setLoaded([...loaded, focusedRouteKey]);
   }
 
+  const previousRouteKeyRef = React.useRef(focusedRouteKey);
   const tabAnims = useAnimatedHashMap(state);
 
   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,
+        };
+      }
+    }
+
     const animateToIndex = () => {
       Animated.parallel(
         state.routes
           .map((route, index) => {
             const { options } = descriptors[route.key];
-            const { transitionSpec } = options;
+            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;
+            }
 
-            const animationEnabled = hasAnimation(options);
+            spec = spec ?? NAMED_TRANSITIONS_PRESETS.none.transitionSpec;
 
             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,
+            return Animated[spec.animation](tabAnims[route.key], {
+              ...spec.config,
               toValue,
               useNativeDriver: true,
             });
           })
           .filter(Boolean) as Animated.CompositeAnimation[]
-      ).start();
+      ).start(({ finished }) => {
+        if (finished && popToTopAction) {
+          navigation.dispatch(popToTopAction);
+        }
+      });
     };
 
     animateToIndex();
-  }, [descriptors, state.index, state.routes, tabAnims]);
+
+    previousRouteKeyRef.current = focusedRouteKey;
+  }, [
+    descriptors,
+    focusedRouteKey,
+    navigation,
+    state.index,
+    state.routes,
+    tabAnims,
+  ]);
 
   const dimensions = SafeAreaProviderCompat.initialMetrics.frame;
   const [tabBarHeight, setTabBarHeight] = React.useState(() =>
@@ -115,7 +177,6 @@ export function BottomTabView(props: Props) {
       state,
       descriptors,
       dimensions,
-      layout: { width: dimensions.width, height: 0 },
       insets: {
         ...SafeAreaProviderCompat.initialMetrics.insets,
         ...props.safeAreaInsets,
@@ -155,14 +216,19 @@ export function BottomTabView(props: Props) {
 
   return (
     <SafeAreaProviderCompat
-      style={
-        tabBarPosition === 'left'
-          ? styles.left
-          : tabBarPosition === 'right'
-          ? styles.right
-          : null
-      }
+      style={{
+        flexDirection:
+          (tabBarPosition === 'left' && direction === 'ltr') ||
+          (tabBarPosition === 'right' && direction === 'rtl')
+            ? 'row-reverse'
+            : 'row',
+      }}
     >
+      {tabBarPosition === 'top' ? (
+        <BottomTabBarHeightCallbackContext.Provider value={setTabBarHeight}>
+          {renderTabBar()}
+        </BottomTabBarHeightCallbackContext.Provider>
+      ) : null}
       <MaybeScreenContainer
         enabled={detachInactiveScreens}
         hasTwoStates={hasTwoStates}
@@ -172,15 +238,12 @@ export function BottomTabView(props: Props) {
           const descriptor = descriptors[route.key];
           const {
             lazy = true,
-            unmountOnBlur,
-            sceneStyleInterpolator,
+            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) &&
@@ -207,23 +270,25 @@ export function BottomTabView(props: Props) {
 
           const { sceneStyle } =
             sceneStyleInterpolator?.({
-              current: tabAnims[route.key],
+              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;
+              ? 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
@@ -259,20 +324,16 @@ 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({
-  left: {
-    flexDirection: 'row-reverse',
-  },
-  right: {
-    flexDirection: 'row',
-  },
   screens: {
     flex: 1,
     overflow: 'hidden',

package/src/views/TabBarIcon.tsx

@@ -96,7 +96,7 @@ const styles = StyleSheet.create({
   },
   badge: {
     position: 'absolute',
-    right: -5,
+    end: -5,
     top: -5,
   },
 });