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

package/src/TabBarIndicator.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   Animated,
   Easing,
+  Platform,
   type StyleProp,
   StyleSheet,
   type ViewStyle,
@@ -32,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({
@@ -105,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 });
@@ -130,13 +146,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 },
-        { start: `${(100 / routes.length) * navigationState.index}%` },
-        { transform },
+        styleList,
         width === 'auto' ? { opacity: opacity } : null,
         style,
       ]}

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';