@react-navigation/material-top-tabs 7.0.0-alpha.9 → 7.0.0-rc.1

package/src/types.tsx

@@ -7,6 +7,7 @@ import type {
   RouteProp,
   TabActionHelpers,
   TabNavigationState,
+  Theme,
 } from '@react-navigation/native';
 import type React from 'react';
 import type {
@@ -70,6 +71,14 @@ export type MaterialTopTabScreenProps<
   route: RouteProp<ParamList, RouteName>;
 };
 
+export type MaterialTopTabOptionsArgs<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = keyof ParamList,
+  NavigatorID extends string | undefined = undefined,
+> = MaterialTopTabScreenProps<ParamList, RouteName, NavigatorID> & {
+  theme: Theme;
+};
+
 export type MaterialTopTabNavigationOptions = {
   /**
    * Title text for the screen.
@@ -109,7 +118,10 @@ export type MaterialTopTabNavigationOptions = {
   /**
    * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
    */
-  tabBarIcon?: (props: { focused: boolean; color: string }) => React.ReactNode;
+  tabBarIcon?: (props: {
+    focused: boolean;
+    color: string;
+  }) => React.ReactElement;
 
   /**
    * Whether the tab icon should be visible. Defaults to `false`.
@@ -119,7 +131,7 @@ export type MaterialTopTabNavigationOptions = {
   /**
    * Function that returns a React element to use as a badge for the tab.
    */
-  tabBarBadge?: () => React.ReactNode;
+  tabBarBadge?: () => React.ReactElement;
 
   /**
    * Function that returns a React element as the tab bar indicator.
@@ -180,11 +192,6 @@ export type MaterialTopTabNavigationOptions = {
    */
   tabBarScrollEnabled?: boolean;
 
-  /**
-   * Style object for the tab icon container.
-   */
-  tabBarIconStyle?: StyleProp<ViewStyle>;
-
   /**
    * Style object for the tab label.
    */

package/src/views/MaterialTopTabBar.tsx

@@ -1,18 +1,45 @@
 import { Text } from '@react-navigation/elements';
 import {
   type ParamListBase,
-  type Route,
   type TabNavigationState,
+  useLinkBuilder,
   useLocale,
   useTheme,
 } from '@react-navigation/native';
 import Color from 'color';
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { type StyleProp, StyleSheet, type ViewStyle } from 'react-native';
 import { TabBar, TabBarIndicator } from 'react-native-tab-view';
 
 import type { MaterialTopTabBarProps } from '../types';
 
+type MaterialLabelType = {
+  color: string;
+  labelText?: string;
+  labelStyle?: StyleProp<ViewStyle>;
+  allowScaling?: boolean;
+};
+
+const MaterialLabel = ({
+  color,
+  labelText,
+  labelStyle,
+  allowScaling,
+}: MaterialLabelType) => {
+  return (
+    <Text
+      style={[{ color }, styles.label, labelStyle]}
+      allowFontScaling={allowScaling}
+    >
+      {labelText}
+    </Text>
+  );
+};
+
+const renderLabel = (props: MaterialLabelType) => {
+  return <MaterialLabel {...props} />;
+};
+
 export function MaterialTopTabBar({
   state,
   navigation,
@@ -21,6 +48,7 @@ export function MaterialTopTabBar({
 }: MaterialTopTabBarProps) {
   const { colors } = useTheme();
   const { direction } = useLocale();
+  const { buildHref } = useLinkBuilder();
 
   const focusedOptions = descriptors[state.routes[state.index].key].options;
 
@@ -29,10 +57,38 @@ export function MaterialTopTabBar({
     focusedOptions.tabBarInactiveTintColor ??
     Color(activeColor).alpha(0.5).rgb().string();
 
+  const tabBarOptions = Object.fromEntries(
+    state.routes.map((route) => {
+      const { options } = descriptors[route.key];
+
+      return [
+        route.key,
+        {
+          href: buildHref(route.name, route.params),
+          testID: options.tabBarButtonTestID,
+          accessibilityLabel: options.tabBarAccessibilityLabel,
+          badge: options.tabBarBadge,
+          icon:
+            options.tabBarShowIcon === false ? undefined : options.tabBarIcon,
+          label: options.tabBarShowLabel === false ? undefined : renderLabel,
+          labelAllowFontScaling: options.tabBarAllowFontScaling,
+          labelStyle: options.tabBarLabelStyle,
+          labelText:
+            options.tabBarShowLabel === false
+              ? undefined
+              : options.title !== undefined
+                ? options.title
+                : route.name,
+        },
+      ];
+    })
+  );
+
   return (
     <TabBar
       {...rest}
       navigationState={state}
+      options={tabBarOptions}
       direction={direction}
       scrollEnabled={focusedOptions.tabBarScrollEnabled}
       bounces={focusedOptions.tabBarBounces}
@@ -50,12 +106,6 @@ export function MaterialTopTabBar({
       indicatorContainerStyle={focusedOptions.tabBarIndicatorContainerStyle}
       contentContainerStyle={focusedOptions.tabBarContentContainerStyle}
       style={[{ backgroundColor: colors.card }, focusedOptions.tabBarStyle]}
-      getAccessibilityLabel={({ route }) =>
-        descriptors[route.key].options.tabBarAccessibilityLabel
-      }
-      getTestID={({ route }) =>
-        descriptors[route.key].options.tabBarButtonTestID
-      }
       onTabPress={({ route, preventDefault }) => {
         const event = navigation.emit({
           type: 'tabPress',
@@ -73,62 +123,6 @@ export function MaterialTopTabBar({
           target: route.key,
         })
       }
-      renderIcon={({ route, focused, color }) => {
-        const { options } = descriptors[route.key];
-
-        if (options.tabBarShowIcon === false) {
-          return null;
-        }
-
-        if (options.tabBarIcon !== undefined) {
-          const icon = options.tabBarIcon({ focused, color });
-
-          return (
-            <View style={[styles.icon, options.tabBarIconStyle]}>{icon}</View>
-          );
-        }
-
-        return null;
-      }}
-      renderLabel={({ route, focused, color }) => {
-        const { options } = descriptors[route.key];
-
-        if (options.tabBarShowLabel === false) {
-          return null;
-        }
-
-        const label =
-          options.tabBarLabel !== undefined
-            ? options.tabBarLabel
-            : options.title !== undefined
-              ? options.title
-              : (route as Route<string>).name;
-
-        if (typeof label === 'string') {
-          return (
-            <Text
-              style={[{ color }, styles.label, options.tabBarLabelStyle]}
-              allowFontScaling={options.tabBarAllowFontScaling}
-            >
-              {label}
-            </Text>
-          );
-        }
-
-        const children =
-          typeof options.tabBarLabel === 'string'
-            ? options.tabBarLabel
-            : options.title !== undefined
-              ? options.title
-              : route.name;
-
-        return label({ focused, color, children });
-      }}
-      renderBadge={({ route }) => {
-        const { tabBarBadge } = descriptors[route.key].options;
-
-        return tabBarBadge?.() ?? null;
-      }}
       renderIndicator={({ navigationState: state, ...rest }) => {
         return focusedOptions.tabBarIndicator ? (
           focusedOptions.tabBarIndicator({
@@ -144,14 +138,9 @@ export function MaterialTopTabBar({
 }
 
 const styles = StyleSheet.create({
-  icon: {
-    height: 24,
-    width: 24,
-  },
   label: {
     textAlign: 'center',
-    textTransform: 'uppercase',
-    fontSize: 13,
+    fontSize: 14,
     margin: 4,
     backgroundColor: 'transparent',
   },