react-native-tab-view 4.0.0-alpha.9 → 4.0.0-rc.0

package/src/TabBarIndicator.tsx

@@ -33,14 +33,29 @@ const getTranslateX = (
   routes: Route[],
   getTabWidth: GetTabWidth,
   direction: LocaleDirection,
-  gap?: number
+  gap?: number,
+  width?: number | string
 ) => {
   const inputRange = routes.map((_, i) => i);
 
   // every index contains widths at all previous indices
   const outputRange = routes.reduce<number[]>((acc, _, i) => {
-    if (i === 0) return [0];
-    return [...acc, acc[i - 1] + getTabWidth(i - 1) + (gap ?? 0)];
+    if (typeof width === 'number') {
+      if (i === 0) return [getTabWidth(i) / 2 - width / 2];
+
+      let sumTabWidth = 0;
+      for (let j = 0; j < i; j++) {
+        sumTabWidth += getTabWidth(j);
+      }
+
+      return [
+        ...acc,
+        sumTabWidth + getTabWidth(i) / 2 + (gap ? gap * i : 0) - width / 2,
+      ];
+    } else {
+      if (i === 0) return [0];
+      return [...acc, acc[i - 1] + getTabWidth(i - 1) + (gap ?? 0)];
+    }
   }, []);
 
   const translateX = position.interpolate({
@@ -106,7 +121,7 @@ export function TabBarIndicator<T extends Route>({
   if (layout.width) {
     const translateX =
       routes.length > 1
-        ? getTranslateX(position, routes, getTabWidth, direction, gap)
+        ? getTranslateX(position, routes, getTabWidth, direction, gap, width)
         : 0;
 
     transform.push({ translateX });

package/src/TabBarItem.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   Animated,
   type LayoutChangeEvent,
+  Platform,
   type PressableAndroidRippleConfig,
   type StyleProp,
   StyleSheet,
@@ -176,7 +177,7 @@ const TabBarItemInternal = <T extends Route>({
           focused,
           color: focused ? activeColor : inactiveColor,
           style: labelStyle,
-          label: labelText,
+          labelText,
           allowFontScaling: labelAllowFontScaling,
           route,
         })
@@ -240,7 +241,7 @@ const TabBarItemInternal = <T extends Route>({
           </Animated.View>
         </View>
         {customBadge != null ? (
-          <View style={styles.badge}>{customBadge()}</View>
+          <View style={styles.badge}>{customBadge({ route })}</View>
         ) : null}
       </View>
     </PlatformPressable>
@@ -295,5 +296,10 @@ const styles = StyleSheet.create({
     // The label is not pressable on Windows
     // Adding backgroundColor: 'transparent' seems to fix it
     backgroundColor: 'transparent',
+    ...Platform.select({
+      // Roundness for iPad hover effect
+      ios: { borderRadius: 10 },
+      default: null,
+    }),
   },
 });

package/src/types.tsx

@@ -3,27 +3,26 @@ import type { PagerViewProps } from 'react-native-pager-view';
 
 export type TabDescriptor<T extends Route> = {
   accessibilityLabel?: string;
-  labelStyle?: StyleProp<TextStyle>;
   accessible?: boolean;
   testID?: string;
   labelText?: string;
   labelAllowFontScaling?: boolean;
   href?: string;
   label?: (props: {
+    route: T;
+    labelText?: string;
     focused: boolean;
     color: string;
-    style?: StyleProp<TextStyle>;
     allowFontScaling?: boolean;
-    label?: string;
-    route: T;
+    style?: StyleProp<TextStyle>;
   }) => React.ReactElement;
   icon?: (props: {
+    route: T;
     focused: boolean;
     color: string;
     size: number;
-    route: T;
   }) => React.ReactElement;
-  badge?: () => React.ReactElement;
+  badge?: (props: { route: T }) => React.ReactElement;
 };
 
 export type LocaleDirection = 'ltr' | 'rtl';