react-native-tab-view 4.0.0-alpha.0 → 4.0.0-alpha.10

package/src/TabBar.tsx

@@ -1,23 +1,27 @@
 import * as React from 'react';
 import {
   Animated,
+  type DimensionValue,
   FlatList,
   I18nManager,
-  LayoutChangeEvent,
-  ListRenderItemInfo,
+  type LayoutChangeEvent,
+  type ListRenderItemInfo,
   Platform,
-  PressableAndroidRippleConfig,
-  StyleProp,
+  type PressableAndroidRippleConfig,
+  type StyleProp,
   StyleSheet,
-  TextStyle,
+  type TextStyle,
   View,
-  ViewStyle,
-  ViewToken,
+  type ViewStyle,
+  type ViewToken,
 } from 'react-native';
 import useLatestCallback from 'use-latest-callback';
 
-import { Props as IndicatorProps, TabBarIndicator } from './TabBarIndicator';
-import { Props as TabBarItemProps, TabBarItem } from './TabBarItem';
+import {
+  type Props as IndicatorProps,
+  TabBarIndicator,
+} from './TabBarIndicator';
+import { type Props as TabBarItemProps, TabBarItem } from './TabBarItem';
 import type {
   Event,
   Layout,
@@ -26,6 +30,7 @@ import type {
   Route,
   Scene,
   SceneRendererProps,
+  TabDescriptor,
 } from './types';
 import { useAnimatedValue } from './useAnimatedValue';
 
@@ -37,23 +42,8 @@ export type Props<T extends Route> = SceneRendererProps & {
   inactiveColor?: string;
   pressColor?: string;
   pressOpacity?: number;
-  getLabelText?: (scene: Scene<T>) => string | undefined;
-  getAccessible?: (scene: Scene<T>) => boolean | undefined;
-  getAccessibilityLabel?: (scene: Scene<T>) => string | undefined;
-  getTestID?: (scene: Scene<T>) => string | undefined;
-  renderLabel?: (
-    scene: Scene<T> & {
-      focused: boolean;
-      color: string;
-    }
-  ) => React.ReactNode;
-  renderIcon?: (
-    scene: Scene<T> & {
-      focused: boolean;
-      color: string;
-    }
-  ) => React.ReactNode;
-  renderBadge?: (scene: Scene<T>) => React.ReactNode;
+  options?: Record<string, TabDescriptor<T>>;
+  commonOptions?: TabDescriptor<T>;
   renderIndicator?: (props: IndicatorProps<T>) => React.ReactNode;
   renderTabBarItem?: (
     props: TabBarItemProps<T> & { key: string }
@@ -72,9 +62,6 @@ export type Props<T extends Route> = SceneRendererProps & {
   android_ripple?: PressableAndroidRippleConfig;
 };
 
-type FlattenedTabWidth = string | number | undefined;
-type FlattenedTabPadding = string | number | undefined;
-
 const Separator = ({ width }: { width: number }) => {
   return <View style={{ width }} />;
 };
@@ -85,24 +72,30 @@ const getFlattenedTabWidth = (style: StyleProp<ViewStyle>) => {
   return tabStyle?.width;
 };
 
-const getFlattenedPaddingLeft = (style: StyleProp<ViewStyle>) => {
+const getFlattenedPaddingStart = (style: StyleProp<ViewStyle>) => {
   const flattenStyle = StyleSheet.flatten(style);
 
   return flattenStyle
-    ? flattenStyle.paddingLeft || flattenStyle.paddingHorizontal || 0
+    ? flattenStyle.paddingLeft ||
+        flattenStyle.paddingStart ||
+        flattenStyle.paddingHorizontal ||
+        0
     : 0;
 };
 
-const getFlattenedPaddingRight = (style: StyleProp<ViewStyle>) => {
+const getFlattenedPaddingEnd = (style: StyleProp<ViewStyle>) => {
   const flattenStyle = StyleSheet.flatten(style);
 
   return flattenStyle
-    ? flattenStyle.paddingRight || flattenStyle.paddingHorizontal || 0
+    ? flattenStyle.paddingRight ||
+        flattenStyle.paddingEnd ||
+        flattenStyle.paddingHorizontal ||
+        0
     : 0;
 };
 
 const convertPaddingPercentToSize = (
-  value: FlattenedTabPadding,
+  value: DimensionValue | undefined,
   layout: Layout
 ): number => {
   switch (typeof value) {
@@ -125,9 +118,9 @@ const getComputedTabWidth = (
   routes: Route[],
   scrollEnabled: boolean | undefined,
   tabWidths: { [key: string]: number },
-  flattenedWidth: FlattenedTabWidth,
-  flattenedPaddingLeft: FlattenedTabPadding,
-  flattenedPaddingRight: FlattenedTabPadding,
+  flattenedWidth: DimensionValue | undefined,
+  flattenedPaddingStart: DimensionValue | undefined,
+  flattenedPaddingEnd: DimensionValue | undefined,
   gap?: number
 ) => {
   if (flattenedWidth === 'auto') {
@@ -152,8 +145,8 @@ const getComputedTabWidth = (
 
   const gapTotalWidth = (gap ?? 0) * (routes.length - 1);
   const paddingTotalWidth =
-    convertPaddingPercentToSize(flattenedPaddingLeft, layout) +
-    convertPaddingPercentToSize(flattenedPaddingRight, layout);
+    convertPaddingPercentToSize(flattenedPaddingStart, layout) +
+    convertPaddingPercentToSize(flattenedPaddingEnd, layout);
 
   return (layout.width - gapTotalWidth - paddingTotalWidth) / routes.length;
 };
@@ -179,21 +172,21 @@ const getTabBarWidth = <T extends Route>({
   gap,
   scrollEnabled,
   flattenedTabWidth,
-  flattenedPaddingLeft,
-  flattenedPaddingRight,
+  flattenedPaddingStart,
+  flattenedPaddingEnd,
   tabWidths,
 }: Pick<Props<T>, 'navigationState' | 'gap' | 'layout' | 'scrollEnabled'> & {
   tabWidths: Record<string, number>;
-  flattenedPaddingLeft: FlattenedTabPadding;
-  flattenedPaddingRight: FlattenedTabPadding;
-  flattenedTabWidth: FlattenedTabWidth;
+  flattenedPaddingStart: DimensionValue | undefined;
+  flattenedPaddingEnd: DimensionValue | undefined;
+  flattenedTabWidth: DimensionValue | undefined;
 }) => {
   const { routes } = navigationState;
 
   const paddingsWidth = Math.max(
     0,
-    convertPaddingPercentToSize(flattenedPaddingLeft, layout) +
-      convertPaddingPercentToSize(flattenedPaddingRight, layout)
+    convertPaddingPercentToSize(flattenedPaddingStart, layout) +
+      convertPaddingPercentToSize(flattenedPaddingEnd, layout)
   );
 
   return routes.reduce<number>(
@@ -207,8 +200,8 @@ const getTabBarWidth = <T extends Route>({
         scrollEnabled,
         tabWidths,
         flattenedTabWidth,
-        flattenedPaddingLeft,
-        flattenedPaddingRight,
+        flattenedPaddingStart,
+        flattenedPaddingEnd,
         gap
       ),
     paddingsWidth
@@ -223,15 +216,15 @@ const normalizeScrollValue = <T extends Route>({
   tabWidths,
   value,
   flattenedTabWidth,
-  flattenedPaddingLeft,
-  flattenedPaddingRight,
+  flattenedPaddingStart,
+  flattenedPaddingEnd,
   direction,
 }: Pick<Props<T>, 'layout' | 'navigationState' | 'gap' | 'scrollEnabled'> & {
   tabWidths: Record<string, number>;
   value: number;
-  flattenedTabWidth: FlattenedTabWidth;
-  flattenedPaddingLeft: FlattenedTabPadding;
-  flattenedPaddingRight: FlattenedTabPadding;
+  flattenedTabWidth: DimensionValue | undefined;
+  flattenedPaddingStart: DimensionValue | undefined;
+  flattenedPaddingEnd: DimensionValue | undefined;
   direction: LocaleDirection;
 }) => {
   const tabBarWidth = getTabBarWidth({
@@ -241,8 +234,8 @@ const normalizeScrollValue = <T extends Route>({
     gap,
     scrollEnabled,
     flattenedTabWidth,
-    flattenedPaddingLeft,
-    flattenedPaddingRight,
+    flattenedPaddingStart,
+    flattenedPaddingEnd,
   });
   const maxDistance = getMaxScrollDistance(tabBarWidth, layout.width);
   const scrollValue = Math.max(Math.min(value, maxDistance), 0);
@@ -263,20 +256,20 @@ const getScrollAmount = <T extends Route>({
   scrollEnabled,
   flattenedTabWidth,
   tabWidths,
-  flattenedPaddingLeft,
-  flattenedPaddingRight,
+  flattenedPaddingStart,
+  flattenedPaddingEnd,
   direction,
 }: Pick<Props<T>, 'layout' | 'navigationState' | 'scrollEnabled' | 'gap'> & {
   tabWidths: Record<string, number>;
-  flattenedTabWidth: FlattenedTabWidth;
-  flattenedPaddingLeft: FlattenedTabPadding;
-  flattenedPaddingRight: FlattenedTabPadding;
+  flattenedTabWidth: DimensionValue | undefined;
+  flattenedPaddingStart: DimensionValue | undefined;
+  flattenedPaddingEnd: DimensionValue | undefined;
   direction: LocaleDirection;
 }) => {
   const paddingInitial =
     direction === 'rtl'
-      ? convertPaddingPercentToSize(flattenedPaddingRight, layout)
-      : convertPaddingPercentToSize(flattenedPaddingLeft, layout);
+      ? convertPaddingPercentToSize(flattenedPaddingEnd, layout)
+      : convertPaddingPercentToSize(flattenedPaddingStart, layout);
 
   const centerDistance = Array.from({
     length: navigationState.index + 1,
@@ -288,8 +281,8 @@ const getScrollAmount = <T extends Route>({
       scrollEnabled,
       tabWidths,
       flattenedTabWidth,
-      flattenedPaddingLeft,
-      flattenedPaddingRight,
+      flattenedPaddingStart,
+      flattenedPaddingEnd,
       gap
     );
 
@@ -312,12 +305,11 @@ const getScrollAmount = <T extends Route>({
     gap,
     scrollEnabled,
     flattenedTabWidth,
-    flattenedPaddingLeft,
-    flattenedPaddingRight,
+    flattenedPaddingStart,
+    flattenedPaddingEnd,
     direction,
   });
 };
-
 const getLabelTextDefault = ({ route }: Scene<Route>) => route.title;
 
 const getAccessibleDefault = ({ route }: Scene<Route>) =>
@@ -327,8 +319,8 @@ const getAccessibilityLabelDefault = ({ route }: Scene<Route>) =>
   typeof route.accessibilityLabel === 'string'
     ? route.accessibilityLabel
     : typeof route.title === 'string'
-    ? route.title
-    : undefined;
+      ? route.title
+      : undefined;
 
 const renderIndicatorDefault = (props: IndicatorProps<Route>) => (
   <TabBarIndicator {...props} />
@@ -341,10 +333,6 @@ const getTestIdDefault = ({ route }: Scene<Route>) => route.testID;
 const MEASURE_PER_BATCH = 10;
 
 export function TabBar<T extends Route>({
-  getLabelText = getLabelTextDefault,
-  getAccessible = getAccessibleDefault,
-  getAccessibilityLabel = getAccessibilityLabelDefault,
-  getTestID = getTestIdDefault,
   renderIndicator = renderIndicatorDefault,
   gap = 0,
   scrollEnabled,
@@ -362,9 +350,6 @@ export function TabBar<T extends Route>({
   onTabPress,
   pressColor,
   pressOpacity,
-  renderBadge,
-  renderIcon,
-  renderLabel,
   direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
   renderTabBarItem,
   style,
@@ -372,6 +357,8 @@ export function TabBar<T extends Route>({
   layout: propLayout,
   testID,
   android_ripple,
+  options,
+  commonOptions,
 }: Props<T>) {
   const [layout, setLayout] = React.useState<Layout>(
     propLayout ?? { width: 0, height: 0 }
@@ -384,8 +371,8 @@ export function TabBar<T extends Route>({
   const { routes } = navigationState;
   const flattenedTabWidth = getFlattenedTabWidth(tabStyle);
   const isWidthDynamic = flattenedTabWidth === 'auto';
-  const flattenedPaddingRight = getFlattenedPaddingRight(contentContainerStyle);
-  const flattenedPaddingLeft = getFlattenedPaddingLeft(contentContainerStyle);
+  const flattenedPaddingEnd = getFlattenedPaddingEnd(contentContainerStyle);
+  const flattenedPaddingStart = getFlattenedPaddingStart(contentContainerStyle);
   const scrollOffset = getScrollAmount({
     layout,
     navigationState,
@@ -393,8 +380,8 @@ export function TabBar<T extends Route>({
     gap,
     scrollEnabled,
     flattenedTabWidth,
-    flattenedPaddingLeft,
-    flattenedPaddingRight,
+    flattenedPaddingStart,
+    flattenedPaddingEnd,
     direction,
   });
 
@@ -439,15 +426,15 @@ export function TabBar<T extends Route>({
     gap,
     scrollEnabled,
     flattenedTabWidth,
-    flattenedPaddingLeft,
-    flattenedPaddingRight,
+    flattenedPaddingStart,
+    flattenedPaddingEnd,
   });
 
   const separatorsWidth = Math.max(0, routes.length - 1) * gap;
   const paddingsWidth = Math.max(
     0,
-    convertPaddingPercentToSize(flattenedPaddingLeft, layout) +
-      convertPaddingPercentToSize(flattenedPaddingRight, layout)
+    convertPaddingPercentToSize(flattenedPaddingStart, layout) +
+      convertPaddingPercentToSize(flattenedPaddingEnd, layout)
   );
 
   const translateX = React.useMemo(
@@ -462,86 +449,103 @@ export function TabBar<T extends Route>({
 
   const renderItem = React.useCallback(
     ({ item: route, index }: ListRenderItemInfo<T>) => {
-      const props: TabBarItemProps<T> & { key: string } = {
-        key: route.key,
-        position: position,
-        route: route,
-        navigationState: navigationState,
-        getAccessibilityLabel: getAccessibilityLabel,
-        getAccessible: getAccessible,
-        getLabelText: getLabelText,
-        getTestID: getTestID,
-        renderBadge: renderBadge,
-        renderIcon: renderIcon,
-        renderLabel: renderLabel,
-        activeColor: activeColor,
-        inactiveColor: inactiveColor,
-        pressColor: pressColor,
-        pressOpacity: pressOpacity,
-        onLayout: isWidthDynamic
-          ? (e: LayoutChangeEvent) => {
-              measuredTabWidths.current[route.key] = e.nativeEvent.layout.width;
+      const {
+        testID = getTestIdDefault({ route }),
+        labelText = getLabelTextDefault({ route }),
+        accessible = getAccessibleDefault({ route }),
+        accessibilityLabel = getAccessibilityLabelDefault({ route }),
+        ...rest
+      } = {
+        ...commonOptions,
+        ...options?.[route.key],
+      };
 
-              // When we have measured widths for all of the tabs, we should updates the state
-              // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
-              // If we have more than 10 routes divide updating tabWidths into multiple batches. Here we update only first batch of 10 items.
-              if (
-                routes.length > MEASURE_PER_BATCH &&
-                index === MEASURE_PER_BATCH &&
-                routes
-                  .slice(0, MEASURE_PER_BATCH)
-                  .every(
-                    (r) => typeof measuredTabWidths.current[r.key] === 'number'
-                  )
-              ) {
-                setTabWidths({ ...measuredTabWidths.current });
-              } else if (
-                routes.every(
+      const onLayout = isWidthDynamic
+        ? (e: LayoutChangeEvent) => {
+            measuredTabWidths.current[route.key] = e.nativeEvent.layout.width;
+
+            // When we have measured widths for all of the tabs, we should updates the state
+            // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
+            // If we have more than 10 routes divide updating tabWidths into multiple batches. Here we update only first batch of 10 items.
+            if (
+              routes.length > MEASURE_PER_BATCH &&
+              index === MEASURE_PER_BATCH &&
+              routes
+                .slice(0, MEASURE_PER_BATCH)
+                .every(
                   (r) => typeof measuredTabWidths.current[r.key] === 'number'
                 )
-              ) {
-                // When we have measured widths for all of the tabs, we should updates the state
-                // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
-                setTabWidths({ ...measuredTabWidths.current });
-              }
+            ) {
+              setTabWidths({ ...measuredTabWidths.current });
+            } else if (
+              routes.every(
+                (r) => typeof measuredTabWidths.current[r.key] === 'number'
+              )
+            ) {
+              // When we have measured widths for all of the tabs, we should updates the state
+              // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
+              setTabWidths({ ...measuredTabWidths.current });
             }
-          : undefined,
-        onPress: () => {
-          const event: Scene<T> & Event = {
-            route,
-            defaultPrevented: false,
-            preventDefault: () => {
-              event.defaultPrevented = true;
-            },
-          };
+          }
+        : undefined;
+
+      const onPress = () => {
+        const event: Scene<T> & Event = {
+          route,
+          defaultPrevented: false,
+          preventDefault: () => {
+            event.defaultPrevented = true;
+          },
+        };
 
-          onTabPress?.(event);
+        onTabPress?.(event);
 
-          if (event.defaultPrevented) {
-            return;
-          }
+        if (event.defaultPrevented) {
+          return;
+        }
 
-          jumpTo(route.key);
-        },
-        onLongPress: () => onTabLongPress?.({ route }),
-        labelStyle: labelStyle,
+        jumpTo(route.key);
+      };
+
+      const onLongPress = () => onTabLongPress?.({ route });
+
+      // Calculate the default width for tab for FlatList to work
+      const defaultTabWidth = !isWidthDynamic
+        ? getComputedTabWidth(
+            index,
+            layout,
+            routes,
+            scrollEnabled,
+            tabWidths,
+            getFlattenedTabWidth(tabStyle),
+            getFlattenedPaddingEnd(contentContainerStyle),
+            getFlattenedPaddingStart(contentContainerStyle),
+            gap
+          )
+        : undefined;
+
+      const props = {
+        ...rest,
+        key: route.key,
+        position,
+        route,
+        navigationState,
+        testID,
+        labelText,
+        accessible,
+        accessibilityLabel,
+        activeColor,
+        inactiveColor,
+        pressColor,
+        pressOpacity,
+        onLayout,
+        onPress,
+        onLongPress,
+        labelStyle,
         style: tabStyle,
-        // Calculate the deafult width for tab for FlatList to work
-        defaultTabWidth: !isWidthDynamic
-          ? getComputedTabWidth(
-              index,
-              layout,
-              routes,
-              scrollEnabled,
-              tabWidths,
-              getFlattenedTabWidth(tabStyle),
-              getFlattenedPaddingRight(contentContainerStyle),
-              getFlattenedPaddingLeft(contentContainerStyle),
-              gap
-            )
-          : undefined,
+        defaultTabWidth,
         android_ripple,
-      };
+      } satisfies TabBarItemProps<T> & { key: string };
 
       return (
         <>
@@ -555,33 +559,28 @@ export function TabBar<T extends Route>({
       );
     },
     [
+      position,
+      navigationState,
+      commonOptions,
+      options,
       activeColor,
-      android_ripple,
-      gap,
-      getAccessibilityLabel,
-      getAccessible,
-      getLabelText,
-      getTestID,
       inactiveColor,
+      pressColor,
+      pressOpacity,
       isWidthDynamic,
-      jumpTo,
       labelStyle,
+      tabStyle,
       layout,
-      navigationState,
-      onTabLongPress,
-      onTabPress,
-      position,
-      pressColor,
-      pressOpacity,
-      renderBadge,
-      renderIcon,
-      renderLabel,
-      renderTabBarItem,
       routes,
       scrollEnabled,
-      tabStyle,
-      contentContainerStyle,
       tabWidths,
+      contentContainerStyle,
+      gap,
+      android_ripple,
+      renderTabBarItem,
+      onTabPress,
+      jumpTo,
+      onTabLongPress,
     ]
   );
 
@@ -655,7 +654,7 @@ export function TabBar<T extends Route>({
               ),
           style: [
             indicatorStyle,
-            { left: flattenedPaddingLeft, right: flattenedPaddingRight },
+            { start: flattenedPaddingStart, end: flattenedPaddingEnd },
           ],
           getTabWidth: (i: number) =>
             getComputedTabWidth(
@@ -665,8 +664,8 @@ export function TabBar<T extends Route>({
               scrollEnabled,
               tabWidths,
               flattenedTabWidth,
-              flattenedPaddingRight,
-              flattenedPaddingLeft,
+              flattenedPaddingEnd,
+              flattenedPaddingStart,
               gap
             ),
           gap,
@@ -725,8 +724,8 @@ const styles = StyleSheet.create({
   indicatorContainer: {
     position: 'absolute',
     top: 0,
-    left: 0,
-    right: 0,
+    start: 0,
+    end: 0,
     bottom: 0,
   },
 });

package/src/TabBarIndicator.tsx

@@ -3,9 +3,9 @@ import {
   Animated,
   Easing,
   Platform,
-  StyleProp,
+  type StyleProp,
   StyleSheet,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native';
 
 import type {
@@ -20,7 +20,7 @@ export type GetTabWidth = (index: number) => number;
 
 export type Props<T extends Route> = SceneRendererProps & {
   navigationState: NavigationState<T>;
-  width: string | number;
+  width: 'auto' | `${number}%` | number;
   getTabWidth: GetTabWidth;
   direction: LocaleDirection;
   style?: StyleProp<ViewStyle>;
@@ -131,19 +131,27 @@ export function TabBarIndicator<T extends Route>({
     );
   }
 
+  const styleList: StyleProp<ViewStyle> = [];
+
+  // scaleX doesn't work properly on chrome and opera for linux and android
+  if (Platform.OS === 'web' && width === 'auto') {
+    styleList.push(
+      { width: transform[1].scaleX },
+      { left: transform[0].translateX }
+    );
+  } else {
+    styleList.push(
+      { width: width === 'auto' ? 1 : width },
+      { start: `${(100 / routes.length) * navigationState.index}%` },
+      { transform }
+    );
+  }
+
   return (
     <Animated.View
       style={[
         styles.indicator,
-        { width: width === 'auto' ? 1 : width },
-        // If layout is not available, use `left` property for positioning the indicator
-        // This avoids rendering delay until we are able to calculate translateX
-        // If platform is macos use `left` property as `transform` is broken at the moment.
-        // See: https://github.com/microsoft/react-native-macos/issues/280
-        layout.width && Platform.OS !== 'macos'
-          ? { left: 0 }
-          : { left: `${(100 / routes.length) * navigationState.index}%` },
-        { transform },
+        styleList,
         width === 'auto' ? { opacity: opacity } : null,
         style,
       ]}
@@ -157,9 +165,9 @@ const styles = StyleSheet.create({
   indicator: {
     backgroundColor: '#ffeb3b',
     position: 'absolute',
-    left: 0,
+    start: 0,
     bottom: 0,
-    right: 0,
+    end: 0,
     height: 2,
   },
 });