@react-navigation/bottom-tabs 6.5.7 → 7.0.0-alpha.1

package/src/utils/useBottomTabBarHeight.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import BottomTabBarHeightContext from './BottomTabBarHeightContext';
+import { BottomTabBarHeightContext } from './BottomTabBarHeightContext';
 
-export default function useBottomTabBarHeight() {
+export function useBottomTabBarHeight() {
   const height = React.useContext(BottomTabBarHeightContext);
 
   if (height === undefined) {

package/src/utils/useIsKeyboardShown.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { EmitterSubscription, Keyboard, Platform } from 'react-native';
 
-export default function useIsKeyboardShown() {
+export function useIsKeyboardShown() {
   const [isKeyboardShown, setIsKeyboardShown] = React.useState(false);
 
   React.useEffect(() => {

package/src/views/Badge.tsx

@@ -22,7 +22,7 @@ type Props = {
   style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
 };
 
-export default function Badge({
+export function Badge({
   children,
   style,
   visible = true,
@@ -32,7 +32,7 @@ export default function Badge({
   const [opacity] = React.useState(() => new Animated.Value(visible ? 1 : 0));
   const [rendered, setRendered] = React.useState(visible);
 
-  const theme = useTheme();
+  const { colors, fonts } = useTheme();
 
   React.useEffect(() => {
     if (!rendered) {
@@ -61,7 +61,7 @@ export default function Badge({
   }
 
   // @ts-expect-error: backgroundColor definitely exists
-  const { backgroundColor = theme.colors.notification, ...restStyle } =
+  const { backgroundColor = colors.notification, ...restStyle } =
     StyleSheet.flatten(style) || {};
   const textColor = color(backgroundColor).isLight() ? 'black' : 'white';
 
@@ -90,6 +90,7 @@ export default function Badge({
           fontSize,
           borderRadius,
         },
+        fonts.regular,
         styles.container,
         restStyle,
       ]}

package/src/views/BottomTabBar.tsx

@@ -5,7 +5,7 @@ import {
   NavigationRouteContext,
   ParamListBase,
   TabNavigationState,
-  useLinkBuilder,
+  useLinkTools,
   useTheme,
 } from '@react-navigation/native';
 import React from 'react';
@@ -21,9 +21,9 @@ import {
 import { EdgeInsets, useSafeAreaFrame } from 'react-native-safe-area-context';
 
 import type { BottomTabBarProps, BottomTabDescriptorMap } from '../types';
-import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
-import useIsKeyboardShown from '../utils/useIsKeyboardShown';
-import BottomTabItem from './BottomTabItem';
+import { BottomTabBarHeightCallbackContext } from '../utils/BottomTabBarHeightCallbackContext';
+import { useIsKeyboardShown } from '../utils/useIsKeyboardShown';
+import { BottomTabItem } from './BottomTabItem';
 
 type Props = BottomTabBarProps & {
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
@@ -125,7 +125,7 @@ export const getTabBarHeight = ({
   return DEFAULT_TABBAR_HEIGHT + paddingBottom;
 };
 
-export default function BottomTabBar({
+export function BottomTabBar({
   state,
   navigation,
   descriptors,
@@ -133,7 +133,7 @@ export default function BottomTabBar({
   style,
 }: Props) {
   const { colors } = useTheme();
-  const buildLink = useLinkBuilder();
+  const { buildHref } = useLinkTools();
 
   const focusedRoute = state.routes[state.index];
   const focusedDescriptor = descriptors[focusedRoute.key];
@@ -305,7 +305,7 @@ export default function BottomTabBar({
 
             if (!focused && !event.defaultPrevented) {
               navigation.dispatch({
-                ...CommonActions.navigate({ name: route.name, merge: true }),
+                ...CommonActions.navigate(route),
                 target: state.key,
               });
             }
@@ -339,6 +339,7 @@ export default function BottomTabBar({
             >
               <NavigationRouteContext.Provider value={route}>
                 <BottomTabItem
+                  href={buildHref(route.name, route.params)}
                   route={route}
                   descriptor={descriptors[route.key]}
                   focused={focused}
@@ -346,8 +347,7 @@ export default function BottomTabBar({
                   onPress={onPress}
                   onLongPress={onLongPress}
                   accessibilityLabel={accessibilityLabel}
-                  to={buildLink(route.name, route.params)}
-                  testID={options.tabBarTestID}
+                  testID={options.tabBarButtonTestID}
                   allowFontScaling={options.tabBarAllowFontScaling}
                   activeTintColor={tabBarActiveTintColor}
                   inactiveTintColor={tabBarInactiveTintColor}

package/src/views/BottomTabItem.tsx

@@ -1,4 +1,4 @@
-import { Link, Route, useTheme } from '@react-navigation/native';
+import { CommonActions, Link, Route, useTheme } from '@react-navigation/native';
 import Color from 'color';
 import React from 'react';
 import {
@@ -17,17 +17,21 @@ import type {
   BottomTabDescriptor,
   LabelPosition,
 } from '../types';
-import TabBarIcon from './TabBarIcon';
+import { TabBarIcon } from './TabBarIcon';
 
 type Props = {
-  /**
-   * Whether the tab is focused.
-   */
-  focused: boolean;
   /**
    * The route object which should be specified by the tab.
    */
   route: Route<string>;
+  /**
+   * The `href` to use for the anchor tag on web
+   */
+  href?: string;
+  /**
+   * Whether the tab is focused.
+   */
+  focused: boolean;
   /**
    * The descriptor object for the route.
    */
@@ -59,10 +63,6 @@ type Props = {
    * Custom style for the badge.
    */
   badgeStyle?: StyleProp<TextStyle>;
-  /**
-   * URL to use for the link to the tab.
-   */
-  to?: string;
   /**
    * The button for the tab. Uses a `TouchableWithoutFeedback` by default.
    */
@@ -128,30 +128,31 @@ type Props = {
   style?: StyleProp<ViewStyle>;
 };
 
-export default function BottomTabBarItem({
-  focused,
+export function BottomTabItem({
   route,
+  href,
+  focused,
   descriptor,
   label,
   icon,
   badge,
   badgeStyle,
-  to,
   button = ({
+    href,
     children,
     style,
     onPress,
-    to,
     accessibilityRole,
     ...rest
   }: BottomTabBarButtonProps) => {
-    if (Platform.OS === 'web' && to) {
+    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}
-          to={to}
+          href={href}
+          action={CommonActions.navigate(route.name, route.params)}
           style={[styles.button, style]}
           onPress={(e: any) => {
             if (
@@ -194,7 +195,7 @@ export default function BottomTabBarItem({
   iconStyle,
   style,
 }: Props) {
-  const { colors } = useTheme();
+  const { colors, fonts } = useTheme();
 
   const activeTintColor =
     customActiveTintColor === undefined
@@ -218,8 +219,9 @@ export default function BottomTabBarItem({
         <Text
           numberOfLines={1}
           style={[
-            styles.label,
             { color },
+            fonts.regular,
+            styles.label,
             horizontal ? styles.labelBeside : styles.labelBeneath,
             labelStyle,
           ]}
@@ -277,7 +279,7 @@ export default function BottomTabBarItem({
     : inactiveBackgroundColor;
 
   return button({
-    to,
+    href,
     onPress,
     onLongPress,
     testID,

package/src/views/BottomTabView.tsx

@@ -20,9 +20,9 @@ import type {
   BottomTabNavigationHelpers,
   BottomTabNavigationProp,
 } from '../types';
-import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
-import BottomTabBarHeightContext from '../utils/BottomTabBarHeightContext';
-import BottomTabBar, { getTabBarHeight } from './BottomTabBar';
+import { BottomTabBarHeightCallbackContext } from '../utils/BottomTabBarHeightCallbackContext';
+import { BottomTabBarHeightContext } from '../utils/BottomTabBarHeightContext';
+import { BottomTabBar, getTabBarHeight } from './BottomTabBar';
 import { MaybeScreen, MaybeScreenContainer } from './ScreenFallback';
 
 type Props = BottomTabNavigationConfig & {
@@ -31,7 +31,7 @@ type Props = BottomTabNavigationConfig & {
   descriptors: BottomTabDescriptorMap;
 };
 
-export default function BottomTabView(props: Props) {
+export function BottomTabView(props: Props) {
   const {
     tabBar = (props: BottomTabBarProps) => <BottomTabBar {...props} />,
     state,

package/src/views/TabBarIcon.tsx

@@ -8,7 +8,7 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import Badge from './Badge';
+import { Badge } from './Badge';
 
 type Props = {
   route: Route<string>;
@@ -27,7 +27,7 @@ type Props = {
   style: StyleProp<ViewStyle>;
 };
 
-export default function TabBarIcon({
+export function TabBarIcon({
   route: _,
   horizontal,
   badge,