@react-navigation/bottom-tabs 7.9.0 → 8.0.0-alpha.0

package/src/utils/BottomTabAnimationContext.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+import type { BottomTabSceneInterpolationProps } from '../types';
+
+export const BottomTabAnimationContext = React.createContext<
+  BottomTabSceneInterpolationProps | undefined
+>(undefined);

package/src/utils/useBottomTabAnimation.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { BottomTabAnimationContext } from './BottomTabAnimationContext';
+
+export function useBottomTabAnimation() {
+  const animation = React.useContext(BottomTabAnimationContext);
+
+  if (animation === undefined) {
+    throw new Error(
+      "Couldn't find values for tab animation. Are you inside a screen in a Bottom Tab navigator?"
+    );
+  }
+
+  return animation;
+}

package/src/utils/useTabBarPosition.tsx

@@ -0,0 +1,41 @@
+import { useLocale } from '@react-navigation/native';
+
+import type { BottomTabNavigationOptions } from '../types';
+
+export function useTabBarPosition({
+  tabBarPosition: customTabBarPosition,
+  tabBarControllerMode,
+}: BottomTabNavigationOptions) {
+  const { direction } = useLocale();
+
+  let tabBarPosition: 'left' | 'right' | 'top' | 'bottom';
+
+  if (tabBarControllerMode != null) {
+    if (tabBarControllerMode === 'tabSidebar') {
+      if (customTabBarPosition === 'left' || customTabBarPosition === 'right') {
+        tabBarPosition = customTabBarPosition;
+      } else {
+        tabBarPosition = direction === 'rtl' ? 'right' : 'left';
+      }
+    } else {
+      if (customTabBarPosition === 'top' || customTabBarPosition === 'bottom') {
+        tabBarPosition = customTabBarPosition;
+      } else {
+        tabBarPosition = 'bottom';
+      }
+    }
+
+    if (
+      customTabBarPosition != null &&
+      customTabBarPosition !== tabBarPosition
+    ) {
+      throw new Error(
+        `The '${customTabBarPosition}' position for the tab bar is not supported when 'tabBarControllerMode' is set to '${tabBarControllerMode}'.`
+      );
+    }
+  } else {
+    tabBarPosition = customTabBarPosition ?? 'bottom';
+  }
+
+  return tabBarPosition;
+}

package/src/views/BottomTabBar.tsx

@@ -1,13 +1,11 @@
 import {
   getDefaultSidebarWidth,
   getLabel,
-  MissingIcon,
   useFrameSize,
 } from '@react-navigation/elements';
 import {
   CommonActions,
-  NavigationContext,
-  NavigationRouteContext,
+  NavigationProvider,
   type ParamListBase,
   type TabNavigationState,
   useLinkBuilder,
@@ -24,11 +22,15 @@ import {
   View,
   type ViewStyle,
 } from 'react-native';
-import { type EdgeInsets } from 'react-native-safe-area-context';
+import {
+  type EdgeInsets,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 import type { BottomTabBarProps, BottomTabDescriptorMap } from '../types';
 import { BottomTabBarHeightCallbackContext } from '../utils/BottomTabBarHeightCallbackContext';
 import { useIsKeyboardShown } from '../utils/useIsKeyboardShown';
+import { useTabBarPosition } from '../utils/useTabBarPosition';
 import { BottomTabItem } from './BottomTabItem';
 
 type Props = BottomTabBarProps & {
@@ -46,14 +48,15 @@ const useNativeDriver = Platform.OS !== 'web';
 type Options = {
   state: TabNavigationState<ParamListBase>;
   descriptors: BottomTabDescriptorMap;
-  dimensions: { height: number; width: number };
 };
 
 const shouldUseHorizontalLabels = ({
   state,
   descriptors,
   dimensions,
-}: Options) => {
+}: Options & {
+  dimensions: { height: number; width: number };
+}) => {
   const { tabBarLabelPosition } =
     descriptors[state.routes[state.index].key].options;
 
@@ -89,7 +92,11 @@ const shouldUseHorizontalLabels = ({
   }
 };
 
-const isCompact = ({ state, descriptors, dimensions }: Options): boolean => {
+const isCompact = ({
+  state,
+  descriptors,
+  dimensions,
+}: Options & { dimensions: { height: number; width: number } }): boolean => {
   const { tabBarPosition, tabBarVariant } =
     descriptors[state.routes[state.index].key].options;
 
@@ -128,6 +135,7 @@ export const getTabBarHeight = ({
   style,
 }: Options & {
   insets: EdgeInsets;
+  dimensions: { height: number; width: number };
   style: Animated.WithAnimatedValue<StyleProp<ViewStyle>> | undefined;
 }) => {
   const { tabBarPosition } = descriptors[state.routes[state.index].key].options;
@@ -151,13 +159,7 @@ export const getTabBarHeight = ({
   return TABBAR_HEIGHT_UIKIT + inset;
 };
 
-export function BottomTabBar({
-  state,
-  navigation,
-  descriptors,
-  insets,
-  style,
-}: Props) {
+export function BottomTabBar({ state, navigation, descriptors, style }: Props) {
   const { colors } = useTheme();
   const { direction } = useLocale();
   const { buildHref } = useLinkBuilder();
@@ -167,9 +169,8 @@ export function BottomTabBar({
   const focusedOptions = focusedDescriptor.options;
 
   const {
-    tabBarPosition = 'bottom',
-    tabBarShowLabel,
     tabBarLabelPosition,
+    tabBarLabelVisibilityMode,
     tabBarHideOnKeyboard = false,
     tabBarVisibilityAnimationConfig,
     tabBarVariant = 'uikit',
@@ -181,6 +182,8 @@ export function BottomTabBar({
     tabBarInactiveBackgroundColor,
   } = focusedOptions;
 
+  const tabBarPosition = useTabBarPosition(focusedOptions);
+
   if (
     tabBarVariant === 'material' &&
     tabBarPosition !== 'left' &&
@@ -201,6 +204,7 @@ export function BottomTabBar({
     );
   }
 
+  const insets = useSafeAreaInsets();
   const isKeyboardShown = useIsKeyboardShown();
 
   const onHeightChange = React.useContext(BottomTabBarHeightCallbackContext);
@@ -380,12 +384,14 @@ export function BottomTabBar({
                 paddingHorizontal: Math.max(insets.left, insets.right),
               },
             ],
+        {
+          pointerEvents: isTabBarHidden ? 'none' : 'auto',
+        },
         tabBarStyle,
       ]}
-      pointerEvents={isTabBarHidden ? 'none' : 'auto'}
       onLayout={sidebar ? undefined : handleLayout}
     >
-      <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+      <View style={[StyleSheet.absoluteFill, { pointerEvents: 'none' }]}>
         {tabBarBackgroundElement}
       </View>
       <View
@@ -434,57 +440,52 @@ export function BottomTabBar({
                 : undefined;
 
           return (
-            <NavigationContext.Provider
+            <NavigationProvider
               key={route.key}
-              value={descriptors[route.key].navigation}
+              navigation={descriptors[route.key].navigation}
+              route={route}
             >
-              <NavigationRouteContext.Provider value={route}>
-                <BottomTabItem
-                  href={buildHref(route.name, route.params)}
-                  route={route}
-                  descriptor={descriptors[route.key]}
-                  focused={focused}
-                  horizontal={hasHorizontalLabels}
-                  compact={compact}
-                  sidebar={sidebar}
-                  variant={tabBarVariant}
-                  onPress={onPress}
-                  onLongPress={onLongPress}
-                  accessibilityLabel={accessibilityLabel}
-                  testID={options.tabBarButtonTestID}
-                  allowFontScaling={options.tabBarAllowFontScaling}
-                  activeTintColor={tabBarActiveTintColor}
-                  inactiveTintColor={tabBarInactiveTintColor}
-                  activeBackgroundColor={tabBarActiveBackgroundColor}
-                  inactiveBackgroundColor={tabBarInactiveBackgroundColor}
-                  button={options.tabBarButton}
-                  icon={
-                    options.tabBarIcon ??
-                    (({ color, size }) => (
-                      <MissingIcon color={color} size={size} />
-                    ))
-                  }
-                  badge={options.tabBarBadge}
-                  badgeStyle={options.tabBarBadgeStyle}
-                  label={label}
-                  showLabel={tabBarShowLabel}
-                  labelStyle={options.tabBarLabelStyle}
-                  iconStyle={options.tabBarIconStyle}
-                  style={[
-                    sidebar
-                      ? {
-                          marginVertical: hasHorizontalLabels
-                            ? tabBarVariant === 'material'
-                              ? 0
-                              : 1
-                            : spacing / 2,
-                        }
-                      : styles.bottomItem,
-                    options.tabBarItemStyle,
-                  ]}
-                />
-              </NavigationRouteContext.Provider>
-            </NavigationContext.Provider>
+              <BottomTabItem
+                href={buildHref(route.name, route.params)}
+                route={route}
+                descriptor={descriptors[route.key]}
+                focused={focused}
+                horizontal={hasHorizontalLabels}
+                compact={compact}
+                sidebar={sidebar}
+                variant={tabBarVariant}
+                onPress={onPress}
+                onLongPress={onLongPress}
+                accessibilityLabel={accessibilityLabel}
+                testID={options.tabBarButtonTestID}
+                allowFontScaling={options.tabBarAllowFontScaling}
+                activeTintColor={tabBarActiveTintColor}
+                inactiveTintColor={tabBarInactiveTintColor}
+                activeBackgroundColor={tabBarActiveBackgroundColor}
+                inactiveBackgroundColor={tabBarInactiveBackgroundColor}
+                rippleColor={options.tabBarRippleColor}
+                button={options.tabBarButton}
+                icon={options.tabBarIcon}
+                badge={options.tabBarBadge}
+                badgeStyle={options.tabBarBadgeStyle}
+                label={label}
+                labelVisibilityMode={tabBarLabelVisibilityMode}
+                labelStyle={options.tabBarLabelStyle}
+                iconStyle={options.tabBarIconStyle}
+                style={[
+                  sidebar
+                    ? {
+                        marginVertical: hasHorizontalLabels
+                          ? tabBarVariant === 'material'
+                            ? 0
+                            : 1
+                          : spacing / 2,
+                      }
+                    : styles.bottomItem,
+                  options.tabBarItemStyle,
+                ]}
+              />
+            </NavigationProvider>
           );
         })}
       </View>

package/src/views/BottomTabItem.tsx

@@ -1,8 +1,9 @@
 import { getLabel, Label, PlatformPressable } from '@react-navigation/elements';
+import { Color } from '@react-navigation/elements/internal';
 import { type Route, useTheme } from '@react-navigation/native';
-import Color from 'color';
 import React from 'react';
 import {
+  type ColorValue,
   type GestureResponderEvent,
   Platform,
   type StyleProp,
@@ -11,13 +12,14 @@ import {
   View,
   type ViewStyle,
 } from 'react-native';
+import type { TabBarItemLabelVisibilityMode } from 'react-native-screens';
 
 import type {
   BottomTabBarButtonProps,
   BottomTabDescriptor,
   LabelPosition,
 } from '../types';
-import { TabBarIcon } from './TabBarIcon';
+import { TabBarIcon, type TabBarIconProps } from './TabBarIcon';
 
 type Props = {
   /**
@@ -43,18 +45,14 @@ type Props = {
     | string
     | ((props: {
         focused: boolean;
-        color: string;
+        color: ColorValue;
         position: LabelPosition;
         children: string;
       }) => React.ReactNode);
   /**
    * Icon to display for the tab.
    */
-  icon: (props: {
-    focused: boolean;
-    size: number;
-    color: string;
-  }) => React.ReactNode;
+  icon: TabBarIconProps['icon'] | undefined;
   /**
    * Text to show in a badge on the tab icon.
    */
@@ -107,23 +105,27 @@ type Props = {
   /**
    * Color for the icon and label when the item is active.
    */
-  activeTintColor?: string;
+  activeTintColor?: ColorValue;
   /**
    * Color for the icon and label when the item is inactive.
    */
-  inactiveTintColor?: string;
+  inactiveTintColor?: ColorValue;
   /**
    * Background color for item when its active.
    */
-  activeBackgroundColor?: string;
+  activeBackgroundColor?: ColorValue;
   /**
    * Background color for item when its inactive.
    */
-  inactiveBackgroundColor?: string;
+  inactiveBackgroundColor?: ColorValue;
   /**
-   * Whether to show the label text for the tab.
+   * Color of tab bar item's ripple effect.
    */
-  showLabel?: boolean;
+  rippleColor?: ColorValue;
+  /**
+   * Label visibility mode for the tab bar item.
+   */
+  labelVisibilityMode?: TabBarItemLabelVisibilityMode;
   /**
    * Whether to allow scaling the font for the label for accessibility purposes.
    * Defaults to `false` on iOS 13+ where it uses `largeContentTitle`.
@@ -172,7 +174,8 @@ export function BottomTabItem({
   inactiveTintColor: customInactiveTintColor,
   activeBackgroundColor: customActiveBackgroundColor,
   inactiveBackgroundColor = 'transparent',
-  showLabel = true,
+  rippleColor,
+  labelVisibilityMode,
   // On iOS 13+, we use `largeContentTitle` for accessibility
   // So we don't need the font to scale up
   // https://developer.apple.com/documentation/uikit/uiview/3183939-largecontenttitle
@@ -183,25 +186,25 @@ export function BottomTabItem({
 }: Props) {
   const { colors, fonts } = useTheme();
 
-  const activeTintColor =
+  const activeTintColor: ColorValue =
     customActiveTintColor ??
     (variant === 'uikit' && sidebar && horizontal
-      ? Color(colors.primary).isDark()
+      ? Color(colors.primary)?.isDark()
         ? 'white'
-        : Color(colors.primary).darken(0.71).string()
+        : (Color(colors.primary)?.darken(0.71).string() ?? 'white')
       : colors.primary);
 
-  const inactiveTintColor =
+  const inactiveTintColor: ColorValue =
     customInactiveTintColor === undefined
       ? variant === 'material'
-        ? Color(colors.text).alpha(0.68).rgb().string()
-        : Color(colors.text).mix(Color(colors.card), 0.5).hex()
+        ? (Color(colors.text)?.alpha(0.68).string() ?? 'rgba(0, 0, 0, 0.68)')
+        : (Color(colors.text)?.alpha(0.5).string() ?? 'rgba(0, 0, 0, 0.5)')
       : customInactiveTintColor;
 
-  const activeBackgroundColor =
+  const activeBackgroundColor: ColorValue =
     customActiveBackgroundColor ??
     (variant === 'material'
-      ? Color(activeTintColor).alpha(0.12).rgb().string()
+      ? (Color(activeTintColor)?.alpha(0.12).string() ?? 'rgba(0, 0, 0, 0.06)')
       : sidebar && horizontal
         ? colors.primary
         : 'transparent');
@@ -232,7 +235,7 @@ export function BottomTabItem({
   }
 
   const renderLabel = ({ focused }: { focused: boolean }) => {
-    if (showLabel === false) {
+    if (labelVisibilityMode === 'unlabeled') {
       return null;
     }
 
@@ -296,7 +299,7 @@ export function BottomTabItem({
         inactiveOpacity={inactiveOpacity}
         activeTintColor={activeTintColor}
         inactiveTintColor={iconInactiveTintColor}
-        renderIcon={icon}
+        icon={icon}
         style={iconStyle}
       />
     );
@@ -335,18 +338,20 @@ export function BottomTabItem({
         onLongPress,
         testID,
         'aria-label': accessibilityLabel,
-        'accessibilityLargeContentTitle': labelString,
-        'accessibilityShowsLargeContentViewer': true,
+        accessibilityLargeContentTitle: labelString,
+        accessibilityShowsLargeContentViewer: true,
         // FIXME: role: 'tab' doesn't seem to work as expected on iOS
-        'role': Platform.select({ ios: 'button', default: 'tab' }),
+        role: Platform.select({ ios: 'button', default: 'tab' }),
         'aria-selected': focused,
-        'android_ripple': { borderless: true },
-        'hoverEffect':
-          variant === 'material' || (sidebar && horizontal)
+        android_ripple: { borderless: true },
+        pressColor: rippleColor,
+        hoverEffect:
+          (variant === 'material' || (sidebar && horizontal)) &&
+          typeof colors.text === 'string'
             ? { color: colors.text }
             : undefined,
-        'pressOpacity': 1,
-        'style': [
+        pressOpacity: 1,
+        style: [
           styles.tab,
           { flex, backgroundColor, borderRadius },
           sidebar
@@ -363,7 +368,7 @@ export function BottomTabItem({
                 ? styles.tabHorizontalUiKit
                 : styles.tabVerticalUiKit,
         ],
-        'children': (
+        children: (
           <React.Fragment>
             {renderIcon(scene)}
             {renderLabel(scene)}

package/src/views/BottomTabViewCommon.tsx

@@ -0,0 +1,26 @@
+import type {
+  ParamListBase,
+  TabNavigationState,
+} from '@react-navigation/native';
+
+import type {
+  BottomTabDescriptorMap,
+  BottomTabNavigationConfig,
+  BottomTabNavigationHelpers,
+} from '../types';
+import { BottomTabViewCustom } from './BottomTabViewCustom';
+import { BottomTabViewNative } from './BottomTabViewNative';
+
+type Props = BottomTabNavigationConfig & {
+  state: TabNavigationState<ParamListBase>;
+  navigation: BottomTabNavigationHelpers;
+  descriptors: BottomTabDescriptorMap;
+};
+
+export function BottomTabView(props: Props) {
+  if (props.implementation === 'custom') {
+    return <BottomTabViewCustom {...props} />;
+  }
+
+  return <BottomTabViewNative {...props} />;
+}