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

package/src/views/BottomTabBar.tsx

@@ -13,7 +13,6 @@ import {
   useLocale,
   useTheme,
 } from '@react-navigation/native';
-import Color from 'color';
 import React from 'react';
 import {
   Animated,
@@ -38,10 +37,11 @@ type Props = BottomTabBarProps & {
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 };
 
-const DEFAULT_TABBAR_HEIGHT = 49;
-const COMPACT_TABBAR_HEIGHT = 32;
+const TABBAR_HEIGHT_UIKIT = 49;
+const TABBAR_HEIGHT_UIKIT_COMPACT = 32;
+const SPACING_UIKIT = 15;
+const SPACING_MATERIAL = 12;
 const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
-const SPACING = 12;
 
 const useNativeDriver = Platform.OS !== 'web';
 
@@ -91,8 +91,36 @@ const shouldUseHorizontalLabels = ({
   }
 };
 
-const getPaddingBottom = (insets: EdgeInsets) =>
-  Math.max(insets.bottom - Platform.select({ ios: 4, default: 0 }), 0);
+const isCompact = ({ state, descriptors, dimensions }: Options): boolean => {
+  const { tabBarPosition, tabBarVariant } =
+    descriptors[state.routes[state.index].key].options;
+
+  if (
+    tabBarPosition === 'left' ||
+    tabBarPosition === 'right' ||
+    tabBarVariant === 'material'
+  ) {
+    return false;
+  }
+
+  const isLandscape = dimensions.width > dimensions.height;
+  const horizontalLabels = shouldUseHorizontalLabels({
+    state,
+    descriptors,
+    dimensions,
+  });
+
+  if (
+    Platform.OS === 'ios' &&
+    !Platform.isPad &&
+    isLandscape &&
+    horizontalLabels
+  ) {
+    return true;
+  }
+
+  return false;
+};
 
 export const getTabBarHeight = ({
   state,
@@ -100,11 +128,12 @@ export const getTabBarHeight = ({
   dimensions,
   insets,
   style,
-  ...rest
 }: Options & {
   insets: EdgeInsets;
   style: Animated.WithAnimatedValue<StyleProp<ViewStyle>> | undefined;
 }) => {
+  const { tabBarPosition } = descriptors[state.routes[state.index].key].options;
+
   const flattenedStyle = StyleSheet.flatten(style);
   const customHeight =
     flattenedStyle && 'height' in flattenedStyle
@@ -115,25 +144,13 @@ export const getTabBarHeight = ({
     return customHeight;
   }
 
-  const isLandscape = dimensions.width > dimensions.height;
-  const horizontalLabels = shouldUseHorizontalLabels({
-    state,
-    descriptors,
-    dimensions,
-    ...rest,
-  });
-  const paddingBottom = getPaddingBottom(insets);
+  const inset = insets[tabBarPosition === 'top' ? 'top' : 'bottom'];
 
-  if (
-    Platform.OS === 'ios' &&
-    !Platform.isPad &&
-    isLandscape &&
-    horizontalLabels
-  ) {
-    return COMPACT_TABBAR_HEIGHT + paddingBottom;
+  if (isCompact({ state, descriptors, dimensions })) {
+    return TABBAR_HEIGHT_UIKIT_COMPACT + inset;
   }
 
-  return DEFAULT_TABBAR_HEIGHT + paddingBottom;
+  return TABBAR_HEIGHT_UIKIT + inset;
 };
 
 export function BottomTabBar({
@@ -154,22 +171,38 @@ export function BottomTabBar({
   const {
     tabBarPosition = 'bottom',
     tabBarShowLabel,
+    tabBarLabelPosition,
     tabBarHideOnKeyboard = false,
     tabBarVisibilityAnimationConfig,
+    tabBarVariant = 'uikit',
     tabBarStyle,
     tabBarBackground,
     tabBarActiveTintColor,
     tabBarInactiveTintColor,
-    tabBarActiveBackgroundColor = tabBarPosition !== 'bottom' &&
-    tabBarPosition !== 'top'
-      ? Color(tabBarActiveTintColor ?? colors.primary)
-          .alpha(0.12)
-          .rgb()
-          .string()
-      : undefined,
+    tabBarActiveBackgroundColor,
     tabBarInactiveBackgroundColor,
   } = focusedOptions;
 
+  if (
+    tabBarVariant === 'material' &&
+    tabBarPosition !== 'left' &&
+    tabBarPosition !== 'right'
+  ) {
+    throw new Error(
+      "The 'material' variant for tab bar is only supported when 'tabBarPosition' is set to 'left' or 'right'."
+    );
+  }
+
+  if (
+    tabBarLabelPosition === 'below-icon' &&
+    tabBarVariant === 'uikit' &&
+    (tabBarPosition === 'left' || tabBarPosition === 'right')
+  ) {
+    throw new Error(
+      "The 'below-icon' label position for tab bar is only supported when 'tabBarPosition' is set to 'top' or 'bottom' when using the 'uikit' variant."
+    );
+  }
+
   const dimensions = useSafeAreaFrame();
   const isKeyboardShown = useIsKeyboardShown();
 
@@ -211,6 +244,7 @@ export function BottomTabBar({
         }
       });
     } else {
+      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
       setIsTabBarHidden(true);
 
       const animation =
@@ -249,7 +283,6 @@ export function BottomTabBar({
 
   const { routes } = state;
 
-  const paddingBottom = getPaddingBottom(insets);
   const tabBarHeight = getTabBarHeight({
     state,
     descriptors,
@@ -264,7 +297,10 @@ export function BottomTabBar({
     dimensions,
   });
 
-  const isSidebar = tabBarPosition === 'left' || tabBarPosition === 'right';
+  const compact = isCompact({ state, descriptors, dimensions });
+  const sidebar = tabBarPosition === 'left' || tabBarPosition === 'right';
+  const spacing =
+    tabBarVariant === 'material' ? SPACING_MATERIAL : SPACING_UIKIT;
 
   const tabBarBackgroundElement = tabBarBackground?.();
 
@@ -298,16 +334,16 @@ export function BottomTabBar({
             tabBarBackgroundElement != null ? 'transparent' : colors.card,
           borderColor: colors.border,
         },
-        isSidebar
+        sidebar
           ? {
               paddingTop:
-                (hasHorizontalLabels ? SPACING : SPACING / 2) + insets.top,
+                (hasHorizontalLabels ? spacing : spacing / 2) + insets.top,
               paddingBottom:
-                (hasHorizontalLabels ? SPACING : SPACING / 2) + insets.bottom,
+                (hasHorizontalLabels ? spacing : spacing / 2) + insets.bottom,
               paddingStart:
-                SPACING + (tabBarPosition === 'left' ? insets.left : 0),
+                spacing + (tabBarPosition === 'left' ? insets.left : 0),
               paddingEnd:
-                SPACING + (tabBarPosition === 'right' ? insets.right : 0),
+                spacing + (tabBarPosition === 'right' ? insets.right : 0),
               minWidth: hasHorizontalLabels
                 ? getDefaultSidebarWidth(dimensions)
                 : 0,
@@ -320,7 +356,7 @@ export function BottomTabBar({
                       inputRange: [0, 1],
                       outputRange: [
                         layout.height +
-                          paddingBottom +
+                          insets[tabBarPosition === 'top' ? 'top' : 'bottom'] +
                           StyleSheet.hairlineWidth,
                         0,
                       ],
@@ -333,21 +369,22 @@ export function BottomTabBar({
               },
               {
                 height: tabBarHeight,
-                paddingBottom,
+                paddingBottom: tabBarPosition === 'bottom' ? insets.bottom : 0,
+                paddingTop: tabBarPosition === 'top' ? insets.top : 0,
                 paddingHorizontal: Math.max(insets.left, insets.right),
               },
             ],
         tabBarStyle,
       ]}
       pointerEvents={isTabBarHidden ? 'none' : 'auto'}
-      onLayout={isSidebar ? undefined : handleLayout}
+      onLayout={sidebar ? undefined : handleLayout}
     >
       <View pointerEvents="none" style={StyleSheet.absoluteFill}>
         {tabBarBackgroundElement}
       </View>
       <View
         accessibilityRole="tablist"
-        style={isSidebar ? styles.sideContent : styles.bottomContent}
+        style={sidebar ? styles.sideContent : styles.bottomContent}
       >
         {routes.map((route, index) => {
           const focused = index === state.index;
@@ -402,7 +439,9 @@ export function BottomTabBar({
                   descriptor={descriptors[route.key]}
                   focused={focused}
                   horizontal={hasHorizontalLabels}
-                  variant={isSidebar ? 'material' : 'uikit'}
+                  compact={compact}
+                  sidebar={sidebar}
+                  variant={tabBarVariant}
                   onPress={onPress}
                   onLongPress={onLongPress}
                   accessibilityLabel={accessibilityLabel}
@@ -426,8 +465,14 @@ export function BottomTabBar({
                   labelStyle={options.tabBarLabelStyle}
                   iconStyle={options.tabBarIconStyle}
                   style={[
-                    isSidebar
-                      ? !hasHorizontalLabels && styles.sideItemVertical
+                    sidebar
+                      ? {
+                          marginVertical: hasHorizontalLabels
+                            ? tabBarVariant === 'material'
+                              ? 0
+                              : 1
+                            : spacing / 2,
+                        }
                       : styles.bottomItem,
                     options.tabBarItemStyle,
                   ]}
@@ -469,7 +514,4 @@ const styles = StyleSheet.create({
   bottomItem: {
     flex: 1,
   },
-  sideItemVertical: {
-    marginVertical: SPACING / 2,
-  },
 });

package/src/views/BottomTabItem.tsx

@@ -90,6 +90,14 @@ type Props = {
    * Whether the label should be aligned with the icon horizontally.
    */
   horizontal: boolean;
+  /**
+   * Whether to render the icon and label in compact mode.
+   */
+  compact: boolean;
+  /**
+   * Whether the tab is an item in a side bar.
+   */
+  sidebar: boolean;
   /**
    * Variant of navigation bar styling
    * - `uikit`: iOS UIKit style
@@ -134,6 +142,10 @@ type Props = {
   style?: StyleProp<ViewStyle>;
 };
 
+const renderButtonDefault = (props: BottomTabBarButtonProps) => (
+  <PlatformPressable {...props} />
+);
+
 export function BottomTabItem({
   route,
   href,
@@ -143,16 +155,18 @@ export function BottomTabItem({
   icon,
   badge,
   badgeStyle,
-  button = (props: BottomTabBarButtonProps) => <PlatformPressable {...props} />,
+  button = renderButtonDefault,
   accessibilityLabel,
   testID,
   onPress,
   onLongPress,
   horizontal,
+  compact,
+  sidebar,
   variant,
   activeTintColor: customActiveTintColor,
   inactiveTintColor: customInactiveTintColor,
-  activeBackgroundColor = 'transparent',
+  activeBackgroundColor: customActiveBackgroundColor,
   inactiveBackgroundColor = 'transparent',
   showLabel = true,
   allowFontScaling,
@@ -163,21 +177,47 @@ export function BottomTabItem({
   const { colors, fonts } = useTheme();
 
   const activeTintColor =
-    customActiveTintColor === undefined
-      ? colors.primary
-      : customActiveTintColor;
+    customActiveTintColor ??
+    (variant === 'uikit' && sidebar && horizontal
+      ? Color(colors.primary).isDark()
+        ? 'white'
+        : Color(colors.primary).darken(0.71).string()
+      : colors.primary);
 
   const inactiveTintColor =
     customInactiveTintColor === undefined
-      ? Color(colors.text).mix(Color(colors.card), 0.5).hex()
+      ? variant === 'material'
+        ? Color(colors.text).alpha(0.68).rgb().string()
+        : Color(colors.text).mix(Color(colors.card), 0.5).hex()
       : customInactiveTintColor;
 
+  const activeBackgroundColor =
+    customActiveBackgroundColor ??
+    (variant === 'material'
+      ? Color(activeTintColor).alpha(0.12).rgb().string()
+      : sidebar && horizontal
+        ? colors.primary
+        : 'transparent');
+
+  let labelInactiveTintColor = inactiveTintColor;
+  let iconInactiveTintColor = inactiveTintColor;
+
+  if (
+    variant === 'uikit' &&
+    sidebar &&
+    horizontal &&
+    customInactiveTintColor === undefined
+  ) {
+    iconInactiveTintColor = colors.primary;
+    labelInactiveTintColor = colors.text;
+  }
+
   const renderLabel = ({ focused }: { focused: boolean }) => {
     if (showLabel === false) {
       return null;
     }
 
-    const color = focused ? activeTintColor : inactiveTintColor;
+    const color = focused ? activeTintColor : labelInactiveTintColor;
 
     if (typeof label !== 'string') {
       const { options } = descriptor;
@@ -206,11 +246,19 @@ export function BottomTabItem({
           horizontal
             ? [
                 styles.labelBeside,
-                { marginStart: icon !== undefined ? 16 : 0 },
-                variant === 'uikit' && styles.labelBesideUikit,
+                variant === 'material'
+                  ? styles.labelSidebarMaterial
+                  : sidebar
+                    ? styles.labelSidebarUiKit
+                    : compact
+                      ? styles.labelBesideUikitCompact
+                      : styles.labelBesideUikit,
+                icon == null && { marginStart: 0 },
               ]
             : styles.labelBeneath,
-          variant === 'material' && fonts.medium,
+          compact || (variant === 'uikit' && sidebar && horizontal)
+            ? fonts.regular
+            : fonts.medium,
           labelStyle,
         ]}
         allowFontScaling={allowFontScaling}
@@ -232,13 +280,14 @@ export function BottomTabItem({
     return (
       <TabBarIcon
         route={route}
-        horizontal={horizontal}
+        variant={variant}
+        size={compact ? 'compact' : 'regular'}
         badge={badge}
         badgeStyle={badgeStyle}
         activeOpacity={activeOpacity}
         inactiveOpacity={inactiveOpacity}
         activeTintColor={activeTintColor}
-        inactiveTintColor={inactiveTintColor}
+        inactiveTintColor={iconInactiveTintColor}
         renderIcon={icon}
         style={iconStyle}
       />
@@ -252,7 +301,14 @@ export function BottomTabItem({
     : inactiveBackgroundColor;
 
   const { flex } = StyleSheet.flatten(style || {});
-  const borderRadius = variant === 'material' ? (horizontal ? 56 : 16) : 0;
+  const borderRadius =
+    variant === 'material'
+      ? horizontal
+        ? 56
+        : 16
+      : sidebar && horizontal
+        ? 10
+        : 0;
 
   return (
     <View
@@ -278,20 +334,26 @@ export function BottomTabItem({
         accessibilityStates: focused ? ['selected'] : [],
         android_ripple: { borderless: true },
         hoverEffect:
-          variant === 'material' ? { color: colors.text } : undefined,
+          variant === 'material' || (sidebar && horizontal)
+            ? { color: colors.text }
+            : undefined,
         pressOpacity: 1,
         style: [
           styles.tab,
           { flex, backgroundColor, borderRadius },
-          horizontal
-            ? [
-                styles.tabHorizontal,
-                variant === 'material' && styles.tabHorizontalMaterial,
-              ]
-            : [
-                styles.tabVertical,
-                variant === 'material' && styles.tabVerticalMaterial,
-              ],
+          sidebar
+            ? variant === 'material'
+              ? horizontal
+                ? styles.tabBarSidebarMaterial
+                : styles.tabVerticalMaterial
+              : horizontal
+                ? styles.tabBarSidebarUiKit
+                : styles.tabVerticalUiKit
+            : variant === 'material'
+              ? styles.tabVerticalMaterial
+              : horizontal
+                ? styles.tabHorizontalUiKit
+                : styles.tabVerticalUiKit,
         ],
         children: (
           <React.Fragment>
@@ -310,33 +372,55 @@ const styles = StyleSheet.create({
     // Roundness for iPad hover effect
     borderRadius: 10,
   },
-  tabVertical: {
-    justifyContent: 'flex-end',
+  tabVerticalUiKit: {
+    justifyContent: 'flex-start',
     flexDirection: 'column',
+    padding: 5,
   },
   tabVerticalMaterial: {
     padding: 10,
   },
-  tabHorizontal: {
+  tabHorizontalUiKit: {
     justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    padding: 5,
+  },
+  tabBarSidebarUiKit: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingVertical: 7,
+    paddingHorizontal: 5,
+  },
+  tabBarSidebarMaterial: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
     flexDirection: 'row',
-    paddingVertical: 11,
+    paddingVertical: 15,
     paddingStart: 16,
     paddingEnd: 24,
   },
-  tabHorizontalMaterial: {
-    justifyContent: 'flex-start',
+  labelSidebarMaterial: {
+    marginStart: 12,
+  },
+  labelSidebarUiKit: {
+    fontSize: 17,
+    marginStart: 10,
   },
   labelBeneath: {
     fontSize: 10,
   },
   labelBeside: {
     marginEnd: 12,
-    marginVertical: 4,
     lineHeight: 24,
-    marginStart: 20,
   },
   labelBesideUikit: {
     fontSize: 13,
+    marginStart: 5,
+  },
+  labelBesideUikitCompact: {
+    fontSize: 12,
+    marginStart: 5,
   },
 });

package/src/views/BottomTabView.tsx

@@ -64,12 +64,16 @@ const hasAnimation = (options: BottomTabNavigationOptions) => {
     return animation !== 'none';
   }
 
-  return !transitionSpec;
+  return Boolean(transitionSpec);
 };
 
+const renderTabBarDefault = (props: BottomTabBarProps) => (
+  <BottomTabBar {...props} />
+);
+
 export function BottomTabView(props: Props) {
   const {
-    tabBar = (props: BottomTabBarProps) => <BottomTabBar {...props} />,
+    tabBar = renderTabBarDefault,
     state,
     navigation,
     descriptors,
@@ -77,7 +81,6 @@ export function BottomTabView(props: Props) {
     detachInactiveScreens = Platform.OS === 'web' ||
       Platform.OS === 'android' ||
       Platform.OS === 'ios',
-    sceneContainerStyle,
   } = props;
 
   const focusedRouteKey = state.routes[state.index].key;
@@ -119,6 +122,13 @@ export function BottomTabView(props: Props) {
     }
 
     const animateToIndex = () => {
+      if (previousRouteKey !== focusedRouteKey) {
+        navigation.emit({
+          type: 'transitionStart',
+          target: focusedRouteKey,
+        });
+      }
+
       Animated.parallel(
         state.routes
           .map((route, index) => {
@@ -156,6 +166,13 @@ export function BottomTabView(props: Props) {
         if (finished && popToTopAction) {
           navigation.dispatch(popToTopAction);
         }
+
+        if (previousRouteKey !== focusedRouteKey) {
+          navigation.emit({
+            type: 'transitionEnd',
+            target: focusedRouteKey,
+          });
+        }
       });
     };
 
@@ -268,6 +285,7 @@ export function BottomTabView(props: Props) {
             headerShown,
             headerStatusBarHeight,
             headerTransparent,
+            sceneStyle: customSceneStyle,
           } = descriptor.options;
 
           const { sceneStyle } =
@@ -317,7 +335,7 @@ export function BottomTabView(props: Props) {
                       descriptor.navigation as BottomTabNavigationProp<ParamListBase>,
                     options: descriptor.options,
                   })}
-                  style={[sceneContainerStyle, animationEnabled && sceneStyle]}
+                  style={[customSceneStyle, animationEnabled && sceneStyle]}
                 >
                   {descriptor.render()}
                 </Screen>