react-native-tab-view 4.2.2 → 5.0.0-alpha.1

package/src/TabBar.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {
   Animated,
+  type ColorValue,
   type DimensionValue,
   FlatList,
   I18nManager,
@@ -23,7 +24,7 @@ import {
 import { type Props as TabBarItemProps, TabBarItem } from './TabBarItem';
 import type {
   Event,
-  Layout,
+  EventEmitterProps,
   LocaleDirection,
   NavigationState,
   Route,
@@ -32,31 +33,43 @@ import type {
   TabDescriptor,
 } from './types';
 import { useAnimatedValue } from './useAnimatedValue';
+import { useMeasureLayout } from './useMeasureLayout';
+
+export type Props<T extends Route> = SceneRendererProps &
+  EventEmitterProps & {
+    navigationState: NavigationState<T>;
+    scrollEnabled?: boolean;
+    bounces?: boolean;
+    activeColor?: ColorValue;
+    inactiveColor?: ColorValue;
+    pressColor?: ColorValue;
+    pressOpacity?: number;
+    options?: Record<string, TabDescriptor<T>>;
+    renderIndicator?: (props: IndicatorProps<T>) => React.ReactNode;
+    renderTabBarItem?: (
+      props: TabBarItemProps<T> & { key: string }
+    ) => React.ReactElement;
+    onTabPress?: (scene: Scene<T> & Event) => void;
+    onTabLongPress?: (scene: Scene<T>) => void;
+    tabStyle?: StyleProp<ViewStyle>;
+    indicatorStyle?: StyleProp<ViewStyle>;
+    indicatorContainerStyle?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>;
+    direction?: LocaleDirection;
+    gap?: number;
+    testID?: string;
+    android_ripple?: PressableAndroidRippleConfig;
+  };
 
-export type Props<T extends Route> = SceneRendererProps & {
-  navigationState: NavigationState<T>;
-  scrollEnabled?: boolean;
-  bounces?: boolean;
-  activeColor?: string;
-  inactiveColor?: string;
-  pressColor?: string;
-  pressOpacity?: number;
-  options?: Record<string, TabDescriptor<T>>;
-  renderIndicator?: (props: IndicatorProps<T>) => React.ReactNode;
-  renderTabBarItem?: (
-    props: TabBarItemProps<T> & { key: string }
-  ) => React.ReactElement;
-  onTabPress?: (scene: Scene<T> & Event) => void;
-  onTabLongPress?: (scene: Scene<T>) => void;
-  tabStyle?: StyleProp<ViewStyle>;
-  indicatorStyle?: StyleProp<ViewStyle>;
-  indicatorContainerStyle?: StyleProp<ViewStyle>;
-  contentContainerStyle?: StyleProp<ViewStyle>;
-  style?: StyleProp<ViewStyle>;
-  direction?: LocaleDirection;
-  gap?: number;
-  testID?: string;
-  android_ripple?: PressableAndroidRippleConfig;
+type CalculationOptions = {
+  layoutWidth: number;
+  gap: number | undefined;
+  scrollEnabled: boolean | undefined;
+  tabWidths: Record<string, number>;
+  flattenedPaddingStart: DimensionValue | undefined;
+  flattenedPaddingEnd: DimensionValue | undefined;
+  flattenedTabWidth: DimensionValue | undefined;
 };
 
 const useNativeDriver = Platform.OS !== 'web';
@@ -95,7 +108,7 @@ const getFlattenedPaddingEnd = (style: StyleProp<ViewStyle>) => {
 
 const convertPaddingPercentToSize = (
   value: DimensionValue | undefined,
-  layout: Layout
+  layoutWidth: number
 ): number => {
   switch (typeof value) {
     case 'number':
@@ -104,50 +117,53 @@ const convertPaddingPercentToSize = (
       if (value.endsWith('%')) {
         const width = parseFloat(value);
         if (Number.isFinite(width)) {
-          return layout.width * (width / 100);
+          return layoutWidth * (width / 100);
         }
       }
   }
   return 0;
 };
 
-const getComputedTabWidth = (
-  index: number,
-  layout: Layout,
-  routes: Route[],
-  scrollEnabled: boolean | undefined,
-  tabWidths: { [key: string]: number },
-  flattenedWidth: DimensionValue | undefined,
-  flattenedPaddingStart: DimensionValue | undefined,
-  flattenedPaddingEnd: DimensionValue | undefined,
-  gap?: number
-) => {
-  if (flattenedWidth === 'auto') {
+const getComputedTabWidth = ({
+  index,
+  layoutWidth,
+  routes,
+  scrollEnabled,
+  tabWidths,
+  flattenedTabWidth,
+  flattenedPaddingStart,
+  flattenedPaddingEnd,
+  gap,
+}: CalculationOptions & {
+  index: number;
+  routes: Route[];
+}) => {
+  if (flattenedTabWidth === 'auto') {
     return tabWidths[routes[index].key] || 0;
   }
 
-  switch (typeof flattenedWidth) {
+  switch (typeof flattenedTabWidth) {
     case 'number':
-      return flattenedWidth;
+      return flattenedTabWidth;
     case 'string':
-      if (flattenedWidth.endsWith('%')) {
-        const width = parseFloat(flattenedWidth);
+      if (flattenedTabWidth.endsWith('%')) {
+        const width = parseFloat(flattenedTabWidth);
         if (Number.isFinite(width)) {
-          return layout.width * (width / 100);
+          return layoutWidth * (width / 100);
         }
       }
   }
 
   if (scrollEnabled) {
-    return (layout.width / 5) * 2;
+    return (layoutWidth / 5) * 2;
   }
 
   const gapTotalWidth = (gap ?? 0) * (routes.length - 1);
   const paddingTotalWidth =
-    convertPaddingPercentToSize(flattenedPaddingStart, layout) +
-    convertPaddingPercentToSize(flattenedPaddingEnd, layout);
+    convertPaddingPercentToSize(flattenedPaddingStart, layoutWidth) +
+    convertPaddingPercentToSize(flattenedPaddingEnd, layoutWidth);
 
-  return (layout.width - gapTotalWidth - paddingTotalWidth) / routes.length;
+  return (layoutWidth - gapTotalWidth - paddingTotalWidth) / routes.length;
 };
 
 const getMaxScrollDistance = (tabBarWidth: number, layoutWidth: number) =>
@@ -166,50 +182,45 @@ const getTranslateX = (
   );
 
 const getTabBarWidth = <T extends Route>({
-  navigationState,
-  layout,
+  routes,
+  layoutWidth,
   gap,
   scrollEnabled,
   flattenedTabWidth,
   flattenedPaddingStart,
   flattenedPaddingEnd,
   tabWidths,
-}: Pick<Props<T>, 'navigationState' | 'gap' | 'layout' | 'scrollEnabled'> & {
-  tabWidths: Record<string, number>;
-  flattenedPaddingStart: DimensionValue | undefined;
-  flattenedPaddingEnd: DimensionValue | undefined;
-  flattenedTabWidth: DimensionValue | undefined;
+}: CalculationOptions & {
+  routes: T[];
 }) => {
-  const { routes } = navigationState;
-
   const paddingsWidth = Math.max(
     0,
-    convertPaddingPercentToSize(flattenedPaddingStart, layout) +
-      convertPaddingPercentToSize(flattenedPaddingEnd, layout)
+    convertPaddingPercentToSize(flattenedPaddingStart, layoutWidth) +
+      convertPaddingPercentToSize(flattenedPaddingEnd, layoutWidth)
   );
 
   return routes.reduce<number>(
     (acc, _, i) =>
       acc +
       (i > 0 ? (gap ?? 0) : 0) +
-      getComputedTabWidth(
-        i,
-        layout,
+      getComputedTabWidth({
+        index: i,
+        layoutWidth,
         routes,
         scrollEnabled,
         tabWidths,
         flattenedTabWidth,
         flattenedPaddingStart,
         flattenedPaddingEnd,
-        gap
-      ),
+        gap,
+      }),
     paddingsWidth
   );
 };
 
 const normalizeScrollValue = <T extends Route>({
-  layout,
-  navigationState,
+  layoutWidth,
+  routes,
   gap,
   scrollEnabled,
   tabWidths,
@@ -218,17 +229,14 @@ const normalizeScrollValue = <T extends Route>({
   flattenedPaddingStart,
   flattenedPaddingEnd,
   direction,
-}: Pick<Props<T>, 'layout' | 'navigationState' | 'gap' | 'scrollEnabled'> & {
-  tabWidths: Record<string, number>;
+}: CalculationOptions & {
+  routes: T[];
   value: number;
-  flattenedTabWidth: DimensionValue | undefined;
-  flattenedPaddingStart: DimensionValue | undefined;
-  flattenedPaddingEnd: DimensionValue | undefined;
   direction: LocaleDirection;
 }) => {
   const tabBarWidth = getTabBarWidth({
-    layout,
-    navigationState,
+    layoutWidth,
+    routes,
     tabWidths,
     gap,
     scrollEnabled,
@@ -236,7 +244,7 @@ const normalizeScrollValue = <T extends Route>({
     flattenedPaddingStart,
     flattenedPaddingEnd,
   });
-  const maxDistance = getMaxScrollDistance(tabBarWidth, layout.width);
+  const maxDistance = getMaxScrollDistance(tabBarWidth, layoutWidth);
   const scrollValue = Math.max(Math.min(value, maxDistance), 0);
 
   if (Platform.OS === 'android' && direction === 'rtl') {
@@ -249,8 +257,9 @@ const normalizeScrollValue = <T extends Route>({
 };
 
 const getScrollAmount = <T extends Route>({
-  layout,
-  navigationState,
+  index,
+  routes,
+  layoutWidth,
   gap,
   scrollEnabled,
   flattenedTabWidth,
@@ -258,47 +267,43 @@ const getScrollAmount = <T extends Route>({
   flattenedPaddingStart,
   flattenedPaddingEnd,
   direction,
-}: Pick<Props<T>, 'layout' | 'navigationState' | 'scrollEnabled' | 'gap'> & {
-  tabWidths: Record<string, number>;
-  flattenedTabWidth: DimensionValue | undefined;
-  flattenedPaddingStart: DimensionValue | undefined;
-  flattenedPaddingEnd: DimensionValue | undefined;
+}: CalculationOptions & {
+  index: number;
+  routes: T[];
   direction: LocaleDirection;
 }) => {
   const paddingInitial =
     direction === 'rtl'
-      ? convertPaddingPercentToSize(flattenedPaddingEnd, layout)
-      : convertPaddingPercentToSize(flattenedPaddingStart, layout);
+      ? convertPaddingPercentToSize(flattenedPaddingEnd, layoutWidth)
+      : convertPaddingPercentToSize(flattenedPaddingStart, layoutWidth);
 
   const centerDistance = Array.from({
-    length: navigationState.index + 1,
+    length: index + 1,
   }).reduce<number>((total, _, i) => {
-    const tabWidth = getComputedTabWidth(
-      i,
-      layout,
-      navigationState.routes,
+    const tabWidth = getComputedTabWidth({
+      index: i,
+      layoutWidth,
+      routes,
       scrollEnabled,
       tabWidths,
       flattenedTabWidth,
       flattenedPaddingStart,
       flattenedPaddingEnd,
-      gap
-    );
+      gap,
+    });
 
     // To get the current index centered we adjust scroll amount by width of indexes
     // 0 through (i - 1) and add half the width of current index i
     return (
-      total +
-      (i > 0 ? (gap ?? 0) : 0) +
-      (navigationState.index === i ? tabWidth / 2 : tabWidth)
+      total + (i > 0 ? (gap ?? 0) : 0) + (index === i ? tabWidth / 2 : tabWidth)
     );
   }, paddingInitial);
 
-  const scrollAmount = centerDistance - layout.width / 2;
+  const scrollAmount = centerDistance - layoutWidth / 2;
 
   return normalizeScrollValue({
-    layout,
-    navigationState,
+    layoutWidth,
+    routes,
     tabWidths,
     value: scrollAmount,
     gap,
@@ -352,14 +357,13 @@ export function TabBar<T extends Route>({
   renderTabBarItem,
   style,
   tabStyle,
-  layout: propLayout,
   testID,
   android_ripple,
   options,
 }: Props<T>) {
-  const [layout, setLayout] = React.useState<Layout>(
-    propLayout ?? { width: 0, height: 0 }
-  );
+  const containerRef = React.useRef<View>(null);
+  const [layout, onLayout] = useMeasureLayout(containerRef);
+
   const [tabWidths, setTabWidths] = React.useState<Record<string, number>>({});
   const flatListRef = React.useRef<FlatList | null>(null);
   const isFirst = React.useRef(true);
@@ -370,9 +374,11 @@ export function TabBar<T extends Route>({
   const isWidthDynamic = flattenedTabWidth === 'auto';
   const flattenedPaddingEnd = getFlattenedPaddingEnd(contentContainerStyle);
   const flattenedPaddingStart = getFlattenedPaddingStart(contentContainerStyle);
+
   const scrollOffset = getScrollAmount({
-    layout,
-    navigationState,
+    layoutWidth: layout.width,
+    routes,
+    index: navigationState.index,
     tabWidths,
     gap,
     scrollEnabled,
@@ -383,7 +389,7 @@ export function TabBar<T extends Route>({
   });
 
   const hasMeasuredTabWidths =
-    Boolean(layout.width) &&
+    Boolean(layout?.width) &&
     routes
       .slice(0, navigationState.index)
       .every((r) => typeof tabWidths[r.key] === 'number');
@@ -406,19 +412,9 @@ export function TabBar<T extends Route>({
     }
   }, [hasMeasuredTabWidths, isWidthDynamic, scrollEnabled, scrollOffset]);
 
-  const handleLayout = (e: LayoutChangeEvent) => {
-    const { height, width } = e.nativeEvent.layout;
-
-    setLayout((layout) =>
-      layout.width === width && layout.height === height
-        ? layout
-        : { width, height }
-    );
-  };
-
   const tabBarWidth = getTabBarWidth({
-    layout,
-    navigationState,
+    layoutWidth: layout.width,
+    routes,
     tabWidths,
     gap,
     scrollEnabled,
@@ -430,8 +426,8 @@ export function TabBar<T extends Route>({
   const separatorsWidth = Math.max(0, routes.length - 1) * gap;
   const paddingsWidth = Math.max(
     0,
-    convertPaddingPercentToSize(flattenedPaddingStart, layout) +
-      convertPaddingPercentToSize(flattenedPaddingEnd, layout)
+    convertPaddingPercentToSize(flattenedPaddingStart, layout.width) +
+      convertPaddingPercentToSize(flattenedPaddingEnd, layout.width)
   );
 
   const translateX = React.useMemo(
@@ -505,17 +501,19 @@ export function TabBar<T extends Route>({
 
       // Calculate the default width for tab for FlatList to work
       const defaultTabWidth = !isWidthDynamic
-        ? getComputedTabWidth(
+        ? getComputedTabWidth({
             index,
-            layout,
+            layoutWidth: layout.width,
             routes,
             scrollEnabled,
             tabWidths,
-            getFlattenedTabWidth(tabStyle),
-            getFlattenedPaddingEnd(contentContainerStyle),
-            getFlattenedPaddingStart(contentContainerStyle),
-            gap
-          )
+            flattenedTabWidth: getFlattenedTabWidth(tabStyle),
+            flattenedPaddingStart: getFlattenedPaddingStart(
+              contentContainerStyle
+            ),
+            flattenedPaddingEnd: getFlattenedPaddingEnd(contentContainerStyle),
+            gap,
+          })
         : undefined;
 
       const props = {
@@ -620,9 +618,12 @@ export function TabBar<T extends Route>({
   );
 
   return (
-    <Animated.View onLayout={handleLayout} style={[styles.tabBar, style]}>
+    <Animated.View
+      ref={containerRef}
+      onLayout={onLayout}
+      style={[styles.tabBar, style]}
+    >
       <Animated.View
-        pointerEvents="none"
         style={[
           styles.indicatorContainer,
           scrollEnabled ? { transform: [{ translateX }] as any } : null,
@@ -632,7 +633,6 @@ export function TabBar<T extends Route>({
       >
         {renderIndicator({
           position,
-          layout,
           navigationState,
           jumpTo,
           direction,
@@ -647,17 +647,17 @@ export function TabBar<T extends Route>({
             { start: flattenedPaddingStart, end: flattenedPaddingEnd },
           ],
           getTabWidth: (i: number) =>
-            getComputedTabWidth(
-              i,
-              layout,
+            getComputedTabWidth({
+              index: i,
+              layoutWidth: layout.width,
               routes,
               scrollEnabled,
               tabWidths,
               flattenedTabWidth,
               flattenedPaddingEnd,
               flattenedPaddingStart,
-              gap
-            ),
+              gap,
+            }),
           gap,
         })}
       </Animated.View>
@@ -696,7 +696,7 @@ const styles = StyleSheet.create({
   },
   tabBar: {
     zIndex: 1,
-    backgroundColor: '#2196f3',
+    backgroundColor: '#fff',
     elevation: 4,
     ...Platform.select({
       default: {
@@ -724,5 +724,6 @@ const styles = StyleSheet.create({
     start: 0,
     end: 0,
     bottom: 0,
+    pointerEvents: 'none',
   },
 });

package/src/TabBarIndicator.tsx

@@ -71,7 +71,6 @@ const getTranslateX = (
 
 export function TabBarIndicator<T extends Route>({
   getTabWidth,
-  layout,
   navigationState,
   position,
   width,
@@ -86,8 +85,7 @@ export function TabBarIndicator<T extends Route>({
   const opacity = useAnimatedValue(isWidthDynamic ? 0 : 1);
 
   const indicatorVisible = isWidthDynamic
-    ? layout.width &&
-      navigationState.routes
+    ? navigationState.routes
         .slice(0, navigationState.index)
         .every((_, r) => getTabWidth(r))
     : true;
@@ -120,14 +118,12 @@ export function TabBarIndicator<T extends Route>({
 
   const transform = [];
 
-  if (layout.width) {
-    const translateX =
-      routes.length > 1
-        ? getTranslateX(position, routes, getTabWidth, direction, gap, width)
-        : 0;
+  const translateX =
+    routes.length > 1
+      ? getTranslateX(position, routes, getTabWidth, direction, gap, width)
+      : 0;
 
-    transform.push({ translateX });
-  }
+  transform.push({ translateX });
 
   if (width === 'auto') {
     const inputRange = routes.map((_, i) => i);
@@ -180,7 +176,7 @@ export function TabBarIndicator<T extends Route>({
 
 const styles = StyleSheet.create({
   indicator: {
-    backgroundColor: '#ffeb3b',
+    backgroundColor: 'rgb(0, 122, 255)',
     position: 'absolute',
     start: 0,
     bottom: 0,

package/src/TabBarItem.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {
   Animated,
+  type ColorValue,
   type LayoutChangeEvent,
   Platform,
   type PressableAndroidRippleConfig,
@@ -19,9 +20,9 @@ export type Props<T extends Route> = TabDescriptor<T> & {
   position: Animated.AnimatedInterpolation<number>;
   route: T;
   navigationState: NavigationState<T>;
-  activeColor?: string;
-  inactiveColor?: string;
-  pressColor?: string;
+  activeColor?: ColorValue;
+  inactiveColor?: ColorValue;
+  pressColor?: ColorValue;
   pressOpacity?: number;
   onLayout?: (event: LayoutChangeEvent) => void;
   onPress: () => void;
@@ -31,8 +32,8 @@ export type Props<T extends Route> = TabDescriptor<T> & {
   android_ripple?: PressableAndroidRippleConfig;
 };
 
-const DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';
-const DEFAULT_INACTIVE_COLOR = 'rgba(255, 255, 255, 0.7)';
+const DEFAULT_ACTIVE_COLOR = 'rgba(0, 0, 0, 1)';
+const DEFAULT_INACTIVE_COLOR = 'rgba(0, 0, 0, 0.5)';
 const ICON_SIZE = 24;
 
 const getActiveOpacity = (
@@ -228,7 +229,7 @@ const TabBarItemInternal = <T extends Route>({
       href={href}
       style={[styles.pressable, tabContainerStyle]}
     >
-      <View pointerEvents="none" style={[styles.item, tabStyle]}>
+      <View style={[styles.item, tabStyle]}>
         {icon}
         <View>
           <Animated.View style={{ opacity: inactiveOpacity }}>
@@ -286,6 +287,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     padding: 10,
     minHeight: 48,
+    pointerEvents: 'none',
   },
   badge: {
     position: 'absolute',

package/src/TabBarItemLabel.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 import { Animated, StyleSheet } from 'react-native';
 
 interface TabBarItemLabelProps {
-  color: string;
+  color: ColorValue;
   label?: string;
   style: StyleProp<ViewStyle>;
   icon: React.ReactNode;