@react-navigation/bottom-tabs 8.0.0-alpha.5 → 8.0.0-alpha.50

package/src/utils/useBottomTabBarHeight.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { BottomTabBarHeightContext } from './BottomTabBarHeightContext';
 
 export function useBottomTabBarHeight() {
-  const height = React.useContext(BottomTabBarHeightContext);
+  const height = React.use(BottomTabBarHeightContext);
 
   if (height === undefined) {
     throw new Error(

package/src/utils/useIsKeyboardShown.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type EmitterSubscription, Keyboard, Platform } from 'react-native';
+import { Keyboard, Platform } from 'react-native';
 
 export function useIsKeyboardShown() {
   const [isKeyboardShown, setIsKeyboardShown] = React.useState(false);
@@ -8,7 +8,7 @@ export function useIsKeyboardShown() {
     const handleKeyboardShow = () => setIsKeyboardShown(true);
     const handleKeyboardHide = () => setIsKeyboardShown(false);
 
-    let subscriptions: EmitterSubscription[];
+    let subscriptions: ReturnType<typeof Keyboard.addListener>[];
 
     if (Platform.OS === 'ios') {
       subscriptions = [

package/src/views/BottomTabBar.tsx

@@ -12,7 +12,7 @@ import {
   useLocale,
   useTheme,
 } from '@react-navigation/native';
-import React from 'react';
+import * as React from 'react';
 import {
   Animated,
   type LayoutChangeEvent,
@@ -57,8 +57,11 @@ const shouldUseHorizontalLabels = ({
 }: Options & {
   dimensions: { height: number; width: number };
 }) => {
-  const { tabBarLabelPosition } =
-    descriptors[state.routes[state.index].key].options;
+  const focusedRoute = state.routes[state.index];
+  const tabBarLabelPosition =
+    focusedRoute == null
+      ? undefined
+      : descriptors[focusedRoute.key]?.options.tabBarLabelPosition;
 
   if (tabBarLabelPosition) {
     switch (tabBarLabelPosition) {
@@ -72,8 +75,9 @@ const shouldUseHorizontalLabels = ({
   if (dimensions.width >= 768) {
     // Screen size matches a tablet
     const maxTabWidth = state.routes.reduce((acc, route) => {
-      const { tabBarItemStyle } = descriptors[route.key].options;
-      const flattenedStyle = StyleSheet.flatten(tabBarItemStyle);
+      const flattenedStyle = StyleSheet.flatten(
+        descriptors[route.key]?.options.tabBarItemStyle
+      );
 
       if (flattenedStyle) {
         if (typeof flattenedStyle.width === 'number') {
@@ -97,8 +101,9 @@ const isCompact = ({
   descriptors,
   dimensions,
 }: Options & { dimensions: { height: number; width: number } }): boolean => {
+  const focusedRoute = state.routes[state.index];
   const { tabBarPosition, tabBarVariant } =
-    descriptors[state.routes[state.index].key].options;
+    focusedRoute == null ? {} : (descriptors[focusedRoute.key]?.options ?? {});
 
   if (
     tabBarPosition === 'left' ||
@@ -138,7 +143,11 @@ export const getTabBarHeight = ({
   dimensions: { height: number; width: number };
   style: Animated.WithAnimatedValue<StyleProp<ViewStyle>> | undefined;
 }) => {
-  const { tabBarPosition } = descriptors[state.routes[state.index].key].options;
+  const focusedRoute = state.routes[state.index];
+  const tabBarPosition =
+    focusedRoute == null
+      ? undefined
+      : descriptors[focusedRoute.key]?.options.tabBarPosition;
 
   const flattenedStyle = StyleSheet.flatten(style);
   const customHeight =
@@ -165,7 +174,19 @@ export function BottomTabBar({ state, navigation, descriptors, style }: Props) {
   const { buildHref } = useLinkBuilder();
 
   const focusedRoute = state.routes[state.index];
+
+  if (focusedRoute == null) {
+    throw new Error(`Couldn't find a route at index ${state.index}.`);
+  }
+
   const focusedDescriptor = descriptors[focusedRoute.key];
+
+  if (focusedDescriptor == null) {
+    throw new Error(
+      `Couldn't find a descriptor for route '${focusedRoute.key}'.`
+    );
+  }
+
   const focusedOptions = focusedDescriptor.options;
 
   const {
@@ -207,7 +228,7 @@ export function BottomTabBar({ state, navigation, descriptors, style }: Props) {
   const insets = useSafeAreaInsets();
   const isKeyboardShown = useIsKeyboardShown();
 
-  const onHeightChange = React.useContext(BottomTabBarHeightCallbackContext);
+  const onHeightChange = React.use(BottomTabBarHeightCallbackContext);
 
   const shouldShowTabBar = !(tabBarHideOnKeyboard && isKeyboardShown);
 
@@ -228,18 +249,22 @@ export function BottomTabBar({ state, navigation, descriptors, style }: Props) {
   React.useEffect(() => {
     const visibilityAnimationConfig = visibilityAnimationConfigRef.current;
 
+    let animation;
+
     if (shouldShowTabBar) {
-      const animation =
+      const animate =
         visibilityAnimationConfig?.show?.animation === 'spring'
           ? Animated.spring
           : Animated.timing;
 
-      animation(visible, {
+      animation = animate(visible, {
         toValue: 1,
         useNativeDriver,
         duration: 250,
         ...visibilityAnimationConfig?.show?.config,
-      }).start(({ finished }) => {
+      });
+
+      animation.start(({ finished }) => {
         if (finished) {
           setIsTabBarHidden(false);
         }
@@ -248,20 +273,22 @@ export function BottomTabBar({ state, navigation, descriptors, style }: Props) {
       // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
       setIsTabBarHidden(true);
 
-      const animation =
+      const animate =
         visibilityAnimationConfig?.hide?.animation === 'spring'
           ? Animated.spring
           : Animated.timing;
 
-      animation(visible, {
+      animation = animate(visible, {
         toValue: 0,
         useNativeDriver,
         duration: 200,
         ...visibilityAnimationConfig?.hide?.config,
-      }).start();
+      });
+
+      animation.start();
     }
 
-    return () => visible.stopAnimation();
+    return () => animation.stop();
   }, [visible, shouldShowTabBar]);
 
   const [layout, setLayout] = React.useState({
@@ -343,7 +370,7 @@ export function BottomTabBar({ state, navigation, descriptors, style }: Props) {
               : { borderTopWidth: StyleSheet.hairlineWidth },
         {
           backgroundColor:
-            tabBarBackgroundElement != null ? 'transparent' : colors.card,
+            tabBarBackgroundElement != null ? 'transparent' : colors.background,
           borderColor: colors.border,
         },
         sidebar
@@ -400,7 +427,15 @@ export function BottomTabBar({ state, navigation, descriptors, style }: Props) {
       >
         {routes.map((route, index) => {
           const focused = index === state.index;
-          const { options } = descriptors[route.key];
+          const descriptor = descriptors[route.key];
+
+          if (descriptor == null) {
+            throw new Error(
+              `Couldn't find a descriptor for route '${route.key}'.`
+            );
+          }
+
+          const { options } = descriptor;
 
           const onPress = () => {
             const event = navigation.emit({
@@ -409,10 +444,16 @@ export function BottomTabBar({ state, navigation, descriptors, style }: Props) {
               canPreventDefault: true,
             });
 
-            if (!focused && !event.defaultPrevented) {
-              navigation.dispatch({
-                ...CommonActions.navigate(route),
-                target: state.key,
+            if (
+              !focused &&
+              !event.defaultPrevented &&
+              options.tabBarSelectionEnabled !== false
+            ) {
+              React.startTransition(() => {
+                navigation.dispatch({
+                  ...CommonActions.navigate(route.name, route.params),
+                  target: state.key,
+                });
               });
             }
           };
@@ -435,20 +476,22 @@ export function BottomTabBar({ state, navigation, descriptors, style }: Props) {
           const accessibilityLabel =
             options.tabBarAccessibilityLabel !== undefined
               ? options.tabBarAccessibilityLabel
-              : typeof label === 'string' && Platform.OS === 'ios'
-                ? `${label}, tab, ${index + 1} of ${routes.length}`
+              : typeof label === 'string'
+                ? Platform.OS === 'android'
+                  ? `${label}, ${index + 1} of ${routes.length}`
+                  : `${label}, ${focused ? 'selected' : 'unselected'}`
                 : undefined;
 
           return (
             <NavigationProvider
               key={route.key}
-              navigation={descriptors[route.key].navigation}
+              navigation={descriptor.navigation}
               route={route}
             >
               <BottomTabItem
                 href={buildHref(route.name, route.params)}
                 route={route}
-                descriptor={descriptors[route.key]}
+                descriptor={descriptor}
                 focused={focused}
                 horizontal={hasHorizontalLabels}
                 compact={compact}

package/src/views/BottomTabItem.tsx

@@ -1,7 +1,7 @@
 import { getLabel, Label, PlatformPressable } from '@react-navigation/elements';
 import { Color } from '@react-navigation/elements/internal';
 import { type Route, useTheme } from '@react-navigation/native';
-import React from 'react';
+import * as React from 'react';
 import {
   type ColorValue,
   type GestureResponderEvent,
@@ -29,7 +29,7 @@ type Props = {
   /**
    * The `href` to use for the anchor tag on web
    */
-  href?: string;
+  href?: string | undefined;
   /**
    * Whether the tab is focused.
    */
@@ -56,23 +56,23 @@ type Props = {
   /**
    * Text to show in a badge on the tab icon.
    */
-  badge?: number | string;
+  badge?: number | string | undefined;
   /**
    * Custom style for the badge.
    */
-  badgeStyle?: StyleProp<TextStyle>;
+  badgeStyle?: StyleProp<TextStyle> | undefined;
   /**
    * The button for the tab. Uses a `Pressable` by default.
    */
-  button?: (props: BottomTabBarButtonProps) => React.ReactNode;
+  button?: ((props: BottomTabBarButtonProps) => React.ReactNode) | undefined;
   /**
    * The accessibility label for the tab.
    */
-  accessibilityLabel?: string;
+  accessibilityLabel?: string | undefined;
   /**
    * An unique ID for testing for the tab.
    */
-  testID?: string;
+  testID?: string | undefined;
   /**
    * Function to execute on press in React Native.
    * On the web, this will use onClick.
@@ -105,44 +105,44 @@ type Props = {
   /**
    * Color for the icon and label when the item is active.
    */
-  activeTintColor?: ColorValue;
+  activeTintColor?: ColorValue | undefined;
   /**
    * Color for the icon and label when the item is inactive.
    */
-  inactiveTintColor?: ColorValue;
+  inactiveTintColor?: ColorValue | undefined;
   /**
    * Background color for item when its active.
    */
-  activeBackgroundColor?: ColorValue;
+  activeBackgroundColor?: ColorValue | undefined;
   /**
    * Background color for item when its inactive.
    */
-  inactiveBackgroundColor?: ColorValue;
+  inactiveBackgroundColor?: ColorValue | undefined;
   /**
    * Color of tab bar item's ripple effect.
    */
-  rippleColor?: ColorValue;
+  rippleColor?: ColorValue | undefined;
   /**
    * Label visibility mode for the tab bar item.
    */
-  labelVisibilityMode?: TabBarItemLabelVisibilityMode;
+  labelVisibilityMode?: TabBarItemLabelVisibilityMode | undefined;
   /**
    * Whether to allow scaling the font for the label for accessibility purposes.
    * Defaults to `false` on iOS 13+ where it uses `largeContentTitle`.
    */
-  allowFontScaling?: boolean;
+  allowFontScaling?: boolean | undefined;
   /**
    * Style object for the label element.
    */
-  labelStyle?: StyleProp<TextStyle>;
+  labelStyle?: StyleProp<TextStyle> | undefined;
   /**
    * Style object for the icon element.
    */
-  iconStyle?: StyleProp<ViewStyle>;
+  iconStyle?: StyleProp<ViewStyle> | undefined;
   /**
    * Style object for the wrapper element.
    */
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle> | undefined;
 };
 
 const renderButtonDefault = (props: BottomTabBarButtonProps) => (
@@ -189,9 +189,7 @@ export function BottomTabItem({
   const activeTintColor: ColorValue =
     customActiveTintColor ??
     (variant === 'uikit' && sidebar && horizontal
-      ? Color(colors.primary)?.isDark()
-        ? 'white'
-        : (Color(colors.primary)?.darken(0.71).string() ?? 'white')
+      ? Color.foreground(colors.primary)
       : colors.primary);
 
   const inactiveTintColor: ColorValue =
@@ -311,7 +309,7 @@ export function BottomTabItem({
     ? activeBackgroundColor
     : inactiveBackgroundColor;
 
-  const { flex } = StyleSheet.flatten(style || {});
+  const flex = StyleSheet.flatten(style)?.flex;
   const borderRadius =
     variant === 'material'
       ? horizontal