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

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 = 5;
 
 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();
 
@@ -249,7 +282,6 @@ export function BottomTabBar({
 
   const { routes } = state;
 
-  const paddingBottom = getPaddingBottom(insets);
   const tabBarHeight = getTabBarHeight({
     state,
     descriptors,
@@ -264,7 +296,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,14 +333,16 @@ export function BottomTabBar({
             tabBarBackgroundElement != null ? 'transparent' : colors.card,
           borderColor: colors.border,
         },
-        isSidebar
+        sidebar
           ? {
-              paddingTop: SPACING + insets.top,
-              paddingBottom: SPACING + insets.bottom,
+              paddingTop:
+                (hasHorizontalLabels ? spacing : spacing / 2) + insets.top,
+              paddingBottom:
+                (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,
@@ -318,7 +355,7 @@ export function BottomTabBar({
                       inputRange: [0, 1],
                       outputRange: [
                         layout.height +
-                          paddingBottom +
+                          insets[tabBarPosition === 'top' ? 'top' : 'bottom'] +
                           StyleSheet.hairlineWidth,
                         0,
                       ],
@@ -331,21 +368,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;
@@ -400,7 +438,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}
@@ -424,13 +464,14 @@ export function BottomTabBar({
                   labelStyle={options.tabBarLabelStyle}
                   iconStyle={options.tabBarIconStyle}
                   style={[
-                    isSidebar
-                      ? [
-                          styles.sideItem,
-                          hasHorizontalLabels
-                            ? styles.sideItemHorizontal
-                            : styles.sideItemVertical,
-                        ]
+                    sidebar
+                      ? {
+                          marginVertical: hasHorizontalLabels
+                            ? tabBarVariant === 'material'
+                              ? 0
+                              : 1
+                            : spacing / 2,
+                        }
                       : styles.bottomItem,
                     options.tabBarItemStyle,
                   ]}
@@ -472,15 +513,4 @@ const styles = StyleSheet.create({
   bottomItem: {
     flex: 1,
   },
-  sideItem: {
-    margin: SPACING,
-    padding: SPACING * 2,
-  },
-  sideItemHorizontal: {
-    borderRadius: 56,
-    justifyContent: 'flex-start',
-  },
-  sideItemVertical: {
-    borderRadius: 16,
-  },
 });

package/src/views/BottomTabItem.tsx

@@ -8,6 +8,7 @@ import {
   type StyleProp,
   StyleSheet,
   type TextStyle,
+  View,
   type ViewStyle,
 } from 'react-native';
 
@@ -89,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
@@ -142,37 +151,18 @@ export function BottomTabItem({
   icon,
   badge,
   badgeStyle,
-  button = ({
-    href,
-    children,
-    style,
-    onPress,
-    accessibilityRole,
-    ...rest
-  }: BottomTabBarButtonProps) => {
-    return (
-      <PlatformPressable
-        {...rest}
-        android_ripple={{ borderless: true }}
-        pressOpacity={1}
-        href={href}
-        accessibilityRole={accessibilityRole}
-        onPress={onPress}
-        style={style}
-      >
-        {children}
-      </PlatformPressable>
-    );
-  },
+  button = (props: BottomTabBarButtonProps) => <PlatformPressable {...props} />,
   accessibilityLabel,
   testID,
   onPress,
   onLongPress,
   horizontal,
+  compact,
+  sidebar,
   variant,
   activeTintColor: customActiveTintColor,
   inactiveTintColor: customInactiveTintColor,
-  activeBackgroundColor = 'transparent',
+  activeBackgroundColor: customActiveBackgroundColor,
   inactiveBackgroundColor = 'transparent',
   showLabel = true,
   allowFontScaling,
@@ -183,21 +173,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;
@@ -226,11 +242,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}
@@ -252,13 +276,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}
       />
@@ -271,30 +296,70 @@ export function BottomTabItem({
     ? activeBackgroundColor
     : inactiveBackgroundColor;
 
-  return button({
-    href,
-    onPress,
-    onLongPress,
-    testID,
-    accessibilityLabel,
-    // FIXME: accessibilityRole: 'tab' doesn't seem to work as expected on iOS
-    accessibilityRole: Platform.select({ ios: 'button', default: 'tab' }),
-    accessibilityState: { selected: focused },
-    // @ts-expect-error: keep for compatibility with older React Native versions
-    accessibilityStates: focused ? ['selected'] : [],
-    style: [
-      styles.tab,
-      { backgroundColor },
-      horizontal ? styles.tabLandscape : styles.tabPortrait,
-      style,
-    ],
-    children: (
-      <React.Fragment>
-        {renderIcon(scene)}
-        {renderLabel(scene)}
-      </React.Fragment>
-    ),
-  }) as React.ReactElement;
+  const { flex } = StyleSheet.flatten(style || {});
+  const borderRadius =
+    variant === 'material'
+      ? horizontal
+        ? 56
+        : 16
+      : sidebar && horizontal
+        ? 10
+        : 0;
+
+  return (
+    <View
+      style={[
+        // Clip ripple effect on Android
+        {
+          borderRadius,
+          overflow: variant === 'material' ? 'hidden' : 'visible',
+        },
+        style,
+      ]}
+    >
+      {button({
+        href,
+        onPress,
+        onLongPress,
+        testID,
+        accessibilityLabel,
+        // FIXME: accessibilityRole: 'tab' doesn't seem to work as expected on iOS
+        accessibilityRole: Platform.select({ ios: 'button', default: 'tab' }),
+        accessibilityState: { selected: focused },
+        // @ts-expect-error: keep for compatibility with older React Native versions
+        accessibilityStates: focused ? ['selected'] : [],
+        android_ripple: { borderless: true },
+        hoverEffect:
+          variant === 'material' || (sidebar && horizontal)
+            ? { color: colors.text }
+            : undefined,
+        pressOpacity: 1,
+        style: [
+          styles.tab,
+          { flex, backgroundColor, borderRadius },
+          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>
+            {renderIcon(scene)}
+            {renderLabel(scene)}
+          </React.Fragment>
+        ),
+      })}
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
@@ -303,27 +368,55 @@ const styles = StyleSheet.create({
     // Roundness for iPad hover effect
     borderRadius: 10,
   },
-  tabPortrait: {
-    justifyContent: 'flex-end',
+  tabVerticalUiKit: {
+    justifyContent: 'flex-start',
     flexDirection: 'column',
+    padding: 5,
   },
-  tabLandscape: {
+  tabVerticalMaterial: {
+    padding: 10,
+  },
+  tabHorizontalUiKit: {
     justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    padding: 5,
+  },
+  tabBarSidebarUiKit: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
     flexDirection: 'row',
-    paddingVertical: 12,
+    paddingVertical: 7,
+    paddingHorizontal: 5,
+  },
+  tabBarSidebarMaterial: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingVertical: 15,
     paddingStart: 16,
     paddingEnd: 24,
   },
+  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,
   },
 });