@react-navigation/bottom-tabs 7.0.0-alpha.4 → 7.0.0-alpha.6

package/src/views/BottomTabBar.tsx

@@ -7,8 +7,8 @@ import {
   CommonActions,
   NavigationContext,
   NavigationRouteContext,
-  ParamListBase,
-  TabNavigationState,
+  type ParamListBase,
+  type TabNavigationState,
   useLinkTools,
   useTheme,
 } from '@react-navigation/native';
@@ -16,13 +16,13 @@ import Color from 'color';
 import React from 'react';
 import {
   Animated,
-  LayoutChangeEvent,
+  type LayoutChangeEvent,
   Platform,
-  StyleProp,
+  type StyleProp,
   StyleSheet,
   useWindowDimensions,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
 
@@ -104,8 +104,11 @@ export const getTabBarHeight = ({
   insets: EdgeInsets;
   style: Animated.WithAnimatedValue<StyleProp<ViewStyle>> | undefined;
 }) => {
-  // @ts-ignore
-  const customHeight = StyleSheet.flatten(style)?.height;
+  const flattenedStyle = StyleSheet.flatten(style);
+  const customHeight =
+    flattenedStyle && 'height' in flattenedStyle
+      ? flattenedStyle.height
+      : undefined;
 
   if (typeof customHeight === 'number') {
     return customHeight;

package/src/views/BottomTabItem.tsx

@@ -1,15 +1,14 @@
-import { getLabel, Label } from '@react-navigation/elements';
-import { CommonActions, Link, Route, useTheme } from '@react-navigation/native';
+import { getLabel, Label, PlatformPressable } from '@react-navigation/elements';
+import { type Route, useTheme } from '@react-navigation/native';
 import Color from 'color';
 import React from 'react';
 import {
-  GestureResponderEvent,
+  type GestureResponderEvent,
   Platform,
-  Pressable,
-  StyleProp,
+  type StyleProp,
   StyleSheet,
-  TextStyle,
-  ViewStyle,
+  type TextStyle,
+  type ViewStyle,
 } from 'react-native';
 
 import type {
@@ -64,7 +63,7 @@ type Props = {
    */
   badgeStyle?: StyleProp<TextStyle>;
   /**
-   * The button for the tab. Uses a `TouchableWithoutFeedback` by default.
+   * The button for the tab. Uses a `Pressable` by default.
    */
   button?: (props: BottomTabBarButtonProps) => React.ReactNode;
   /**
@@ -145,40 +144,19 @@ export function BottomTabItem({
     accessibilityRole,
     ...rest
   }: BottomTabBarButtonProps) => {
-    if (Platform.OS === 'web') {
-      // React Native Web doesn't forward `onClick` if we use `TouchableWithoutFeedback`.
-      // We need to use `onClick` to be able to prevent default browser handling of links.
-      return (
-        <Link
-          {...rest}
-          href={href}
-          action={CommonActions.navigate(route.name, route.params)}
-          style={[styles.button, style]}
-          onPress={(e: any) => {
-            if (
-              !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys
-              (e.button == null || e.button === 0) // ignore everything but left clicks
-            ) {
-              e.preventDefault();
-              onPress?.(e);
-            }
-          }}
-        >
-          {children}
-        </Link>
-      );
-    } else {
-      return (
-        <Pressable
-          {...rest}
-          accessibilityRole={accessibilityRole}
-          onPress={onPress}
-          style={style}
-        >
-          {children}
-        </Pressable>
-      );
-    }
+    return (
+      <PlatformPressable
+        {...rest}
+        android_ripple={{ borderless: true }}
+        pressOpacity={1}
+        href={href}
+        accessibilityRole={accessibilityRole}
+        onPress={onPress}
+        style={style}
+      >
+        {children}
+      </PlatformPressable>
+    );
   },
   accessibilityLabel,
   testID,
@@ -242,6 +220,7 @@ export function BottomTabItem({
           labelStyle,
         ]}
         allowFontScaling={allowFontScaling}
+        tintColor={color}
       >
         {label}
       </Label>
@@ -323,7 +302,4 @@ const styles = StyleSheet.create({
     fontSize: 13,
     marginLeft: 20,
   },
-  button: {
-    display: 'flex',
-  },
 });

package/src/views/BottomTabView.tsx

@@ -26,7 +26,6 @@ import { BottomTabBarHeightContext } from '../utils/BottomTabBarHeightContext';
 import { useAnimatedHashMap } from '../utils/useAnimatedHashMap';
 import { BottomTabBar, getTabBarHeight } from './BottomTabBar';
 import { MaybeScreen, MaybeScreenContainer } from './ScreenFallback';
-import CompositeAnimation = Animated.CompositeAnimation;
 
 type Props = BottomTabNavigationConfig & {
   state: TabNavigationState<ParamListBase>;
@@ -102,7 +101,7 @@ export function BottomTabView(props: Props) {
               useNativeDriver: true,
             });
           })
-          .filter(Boolean) as CompositeAnimation[]
+          .filter(Boolean) as Animated.CompositeAnimation[]
       ).start();
     };
 

package/src/views/ScreenFallback.tsx

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { Animated, StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+import {
+  Animated,
+  type StyleProp,
+  View,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
 
 type Props = {
   enabled: boolean;

package/src/views/TabBarIcon.tsx

@@ -1,11 +1,11 @@
 import type { Route } from '@react-navigation/native';
 import React from 'react';
 import {
-  StyleProp,
+  type StyleProp,
   StyleSheet,
-  TextStyle,
+  type TextStyle,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native';
 
 import { Badge } from './Badge';