react-native-tab-view 5.0.0-alpha.7 → 5.0.0-alpha.9

package/src/TabBarItem.tsx

@@ -12,11 +12,22 @@ import {
 } from 'react-native';
 import useLatestCallback from 'use-latest-callback';
 
+import {
+  TAB_BAR_INACTIVE_COLOR,
+  TAB_BAR_PRIMARY_ACTIVE_COLOR,
+  TAB_BAR_SECONDARY_ACTIVE_COLOR,
+} from './constants';
 import { PlatformPressable } from './PlatformPressable';
 import { TabBarItemLabel } from './TabBarItemLabel';
 import type { NavigationState, Route, TabDescriptor } from './types';
 
+type Layout = {
+  width: number;
+  height: number;
+};
+
 export type Props<T extends Route> = TabDescriptor<T> & {
+  variant?: 'primary' | 'secondary' | undefined;
   position: Animated.AnimatedInterpolation<number>;
   route: T;
   navigationState: NavigationState<T>;
@@ -24,16 +35,14 @@ export type Props<T extends Route> = TabDescriptor<T> & {
   inactiveColor?: ColorValue | undefined;
   pressColor?: ColorValue | undefined;
   pressOpacity?: number | undefined;
-  onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
+  onMeasureLayout: (layout: Layout) => void;
+  onMeasureLabelLayout: (layout: Layout) => void;
   onPress: () => void;
   onLongPress: () => void;
-  defaultTabWidth?: number | undefined;
   style: StyleProp<ViewStyle>;
   android_ripple?: PressableAndroidRippleConfig | undefined;
 };
 
-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 = (
@@ -78,15 +87,18 @@ type TabBarItemInternalProps<T extends Route> = Omit<
   | 'getTestID'
   | 'getAccessible'
   | 'options'
+  | 'variant'
 > & {
   isFocused: boolean;
   index: number;
   routesLength: number;
+  variant: NonNullable<Props<T>['variant']>;
 } & TabDescriptor<T>;
 
-const ANDROID_RIPPLE_DEFAULT = { borderless: true };
+const ANDROID_RIPPLE_DEFAULT = { borderless: false, foreground: true };
 
 const TabBarItemInternal = <T extends Route>({
+  variant,
   accessibilityLabel,
   accessible,
   label: customlabel,
@@ -99,11 +111,11 @@ const TabBarItemInternal = <T extends Route>({
   inactiveColor: inactiveColorCustom,
   activeColor: activeColorCustom,
   labelStyle,
-  onLayout,
+  onMeasureLayout,
+  onMeasureLabelLayout,
   index: tabIndex,
   pressColor,
   pressOpacity,
-  defaultTabWidth,
   icon: customIcon,
   badge: customBadge,
   href,
@@ -114,19 +126,23 @@ const TabBarItemInternal = <T extends Route>({
   route,
 }: TabBarItemInternalProps<T>) => {
   const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;
+  const defaultActiveColor =
+    variant === 'primary'
+      ? TAB_BAR_PRIMARY_ACTIVE_COLOR
+      : TAB_BAR_SECONDARY_ACTIVE_COLOR;
 
   const activeColor =
     activeColorCustom !== undefined
       ? activeColorCustom
       : typeof labelColorFromStyle === 'string'
         ? labelColorFromStyle
-        : DEFAULT_ACTIVE_COLOR;
+        : defaultActiveColor;
   const inactiveColor =
     inactiveColorCustom !== undefined
       ? inactiveColorCustom
       : typeof labelColorFromStyle === 'string'
         ? labelColorFromStyle
-        : DEFAULT_INACTIVE_COLOR;
+        : TAB_BAR_INACTIVE_COLOR;
 
   const activeOpacity = getActiveOpacity(position, routesLength, tabIndex);
   const inactiveOpacity = getInactiveOpacity(position, routesLength, tabIndex);
@@ -151,7 +167,7 @@ const TabBarItemInternal = <T extends Route>({
     });
 
     return (
-      <View style={styles.icon}>
+      <View>
         <Animated.View style={{ opacity: inactiveOpacity }}>
           {inactiveIcon}
         </Animated.View>
@@ -188,6 +204,7 @@ const TabBarItemInternal = <T extends Route>({
           icon={icon}
           label={labelText}
           style={labelStyle}
+          allowFontScaling={labelAllowFontScaling}
         />
       ),
     [
@@ -202,16 +219,39 @@ const TabBarItemInternal = <T extends Route>({
     ]
   );
 
-  const tabStyle = StyleSheet.flatten(style);
-  const isWidthSet = tabStyle?.width !== undefined;
-
-  const tabContainerStyle: ViewStyle | null = isWidthSet
-    ? null
-    : { width: defaultTabWidth };
-
   const ariaLabel =
     typeof accessibilityLabel !== 'undefined' ? accessibilityLabel : labelText;
 
+  const viewRef = React.useRef<View>(null);
+  const labelRef = React.useRef<View>(null);
+
+  React.useLayoutEffect(() => {
+    viewRef.current?.measure((_x, _y, width, height) => {
+      onMeasureLayout({ width, height });
+    });
+
+    labelRef.current?.measure((_x, _y, width, height) => {
+      onMeasureLabelLayout({ width, height });
+    });
+
+    // Only measure on mount. onLayout handles updates.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+
+    onMeasureLayout({ width, height });
+  };
+
+  const onLabelLayout = (event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+
+    onMeasureLabelLayout({ width, height });
+  };
+
+  const hasIconAndLabel = Boolean(customIcon && labelText);
+
   return (
     <PlatformPressable
       android_ripple={android_ripple}
@@ -223,23 +263,32 @@ const TabBarItemInternal = <T extends Route>({
       pressColor={pressColor}
       pressOpacity={pressOpacity}
       unstable_pressDelay={0}
-      onLayout={onLayout}
       onPress={onPress}
       onLongPress={onLongPress}
       href={href}
-      style={[styles.pressable, tabContainerStyle]}
+      style={styles.pressable}
     >
-      <View style={[styles.item, tabStyle]}>
-        {icon}
-        <View>
-          <Animated.View style={{ opacity: inactiveOpacity }}>
-            {renderLabel(false)}
-          </Animated.View>
-          <Animated.View
-            style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}
-          >
-            {renderLabel(true)}
-          </Animated.View>
+      <View
+        ref={viewRef}
+        onLayout={onLayout}
+        style={[
+          styles.item,
+          hasIconAndLabel ? styles.itemWithIcon : null,
+          style,
+        ]}
+      >
+        <View ref={labelRef} onLayout={onLabelLayout} style={styles.content}>
+          {icon}
+          <View>
+            <Animated.View style={{ opacity: inactiveOpacity }}>
+              {renderLabel(false)}
+            </Animated.View>
+            <Animated.View
+              style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}
+            >
+              {renderLabel(true)}
+            </Animated.View>
+          </View>
         </View>
         {customBadge != null ? (
           <View style={styles.badge}>{customBadge({ route })}</View>
@@ -253,21 +302,30 @@ const MemoizedTabBarItemInternal = React.memo(
   TabBarItemInternal
 ) as typeof TabBarItemInternal;
 
-export function TabBarItem<T extends Route>(props: Props<T>) {
-  const { onPress, onLongPress, onLayout, navigationState, route, ...rest } =
-    props;
-
+export function TabBarItem<T extends Route>({
+  variant = 'primary',
+  onPress,
+  onLongPress,
+  onMeasureLayout,
+  onMeasureLabelLayout,
+  navigationState,
+  route,
+  ...rest
+}: Props<T>) {
   const onPressLatest = useLatestCallback(onPress);
   const onLongPressLatest = useLatestCallback(onLongPress);
-  const onLayoutLatest = useLatestCallback(onLayout ? onLayout : () => {});
+  const onMeasureLayoutLatest = useLatestCallback(onMeasureLayout);
+  const onMeasureLabelLayoutLatest = useLatestCallback(onMeasureLabelLayout);
 
   const tabIndex = navigationState.routes.indexOf(route);
 
   return (
     <MemoizedTabBarItemInternal
       {...rest}
+      variant={variant}
       onPress={onPressLatest}
-      onLayout={onLayoutLatest}
+      onMeasureLayout={onMeasureLayoutLatest}
+      onMeasureLabelLayout={onMeasureLabelLayoutLatest}
       onLongPress={onLongPressLatest}
       isFocused={navigationState.index === tabIndex}
       route={route}
@@ -278,17 +336,20 @@ export function TabBarItem<T extends Route>(props: Props<T>) {
 }
 
 const styles = StyleSheet.create({
-  icon: {
-    margin: 2,
-  },
   item: {
-    flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    padding: 10,
+    paddingHorizontal: 16,
     minHeight: 48,
     pointerEvents: 'none',
   },
+  itemWithIcon: {
+    minHeight: 62,
+  },
+  content: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   badge: {
     position: 'absolute',
     top: 0,

package/src/TabBarItemLabel.tsx

@@ -4,19 +4,21 @@ import { Animated, StyleSheet } from 'react-native';
 
 interface TabBarItemLabelProps {
   color: ColorValue;
-  label?: string | undefined;
-  style: StyleProp<ViewStyle>;
+  label: string | undefined;
   icon: React.ReactNode;
+  style: StyleProp<ViewStyle>;
+  allowFontScaling?: boolean | undefined;
 }
 
 export const TabBarItemLabel = React.memo(
-  ({ color, label, style, icon }: TabBarItemLabelProps) => {
+  ({ color, label, style, icon, allowFontScaling }: TabBarItemLabelProps) => {
     if (!label) {
       return null;
     }
 
     return (
       <Animated.Text
+        allowFontScaling={allowFontScaling}
         style={[
           styles.label,
           icon ? { marginTop: 0 } : null,
@@ -34,7 +36,6 @@ TabBarItemLabel.displayName = 'TabBarItemLabel';
 
 const styles = StyleSheet.create({
   label: {
-    margin: 4,
     fontSize: 14,
     fontWeight: '500',
     backgroundColor: 'transparent',

package/src/TabView.tsx

@@ -8,7 +8,7 @@ import {
   type ViewStyle,
 } from 'react-native';
 
-import { Pager } from './Pager';
+import { DefaultAdapter } from './DefaultAdapter';
 import { SceneView } from './SceneView';
 import { TabBar } from './TabBar';
 import type {
@@ -160,7 +160,7 @@ export function TabView<T extends Route>({
   // eslint-disable-next-line @eslint-react/no-unstable-default-props
   renderTabBar = (props) => <TabBar {...props} />,
   // eslint-disable-next-line @eslint-react/no-unstable-default-props
-  renderAdapter = (props) => <Pager {...props} />,
+  renderAdapter = (props) => <DefaultAdapter {...props} />,
   pagerStyle,
   style,
   direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',

package/src/constants.tsx

@@ -0,0 +1,8 @@
+export const TAB_BAR_PRIMARY_ACTIVE_COLOR = '#6750a4';
+export const TAB_BAR_SECONDARY_ACTIVE_COLOR = '#1d1b20';
+export const TAB_BAR_INACTIVE_COLOR = '#49454f';
+export const TAB_BAR_BACKGROUND_COLOR = '#fef7ff';
+export const TAB_BAR_BORDER_COLOR = '#cac4d0';
+
+export const PRIMARY_INDICATOR_MIN_WIDTH = 24;
+export const TAB_MIN_WIDTH = 90;

package/src/index.tsx

@@ -1,8 +1,12 @@
+export { DefaultAdapter, type DefaultAdapterProps } from './DefaultAdapter';
 export {
   PagerViewAdapter,
   type PagerViewAdapterProps,
 } from './PagerViewAdapter';
-export { PanResponderAdapter } from './PanResponderAdapter';
+export {
+  PanResponderAdapter,
+  type PanResponderAdapterProps,
+} from './PanResponderAdapter';
 export { SceneMap } from './SceneMap';
 export {
   ScrollViewAdapter,

package/src/useLayoutWidths.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+
+// Batches onLayout updates from multiple keyed views into a single state update
+// per frame, so layout passes don't trigger N renders.
+export function useLayoutWidths(priorityKeys: string[]) {
+  const [widths, setWidths] = React.useState<Record<string, number>>({});
+
+  const measured = React.useRef<Record<string, number>>({});
+  const handle = React.useRef<ReturnType<typeof requestAnimationFrame>>(null);
+
+  const priorityKeysRef = React.useRef(priorityKeys);
+
+  React.useEffect(() => {
+    priorityKeysRef.current = priorityKeys;
+  });
+
+  const hasFinishedLayoutRef = React.useRef(false);
+
+  React.useLayoutEffect(() => {
+    hasFinishedLayoutRef.current = true;
+  }, []);
+
+  const onMeasureWidth = React.useCallback((key: string, width: number) => {
+    measured.current[key] = width;
+
+    if (handle.current != null) {
+      cancelAnimationFrame(handle.current);
+    }
+
+    if (
+      priorityKeysRef.current.includes(key) &&
+      !hasFinishedLayoutRef.current
+    ) {
+      // Synchronously set widths during the initial layout phase
+      // So we don't have to wait for the next frame to render the indicator
+      setWidths((prev) => ({ ...prev, [key]: width }));
+    } else if (hasFinishedLayoutRef.current) {
+      handle.current = requestAnimationFrame(() => {
+        setWidths({ ...measured.current });
+      });
+    }
+
+    return () => {
+      if (handle.current != null) {
+        cancelAnimationFrame(handle.current);
+      }
+    };
+  }, []);
+
+  return [widths, onMeasureWidth] as const;
+}

package/lib/module/Pager.android.js

@@ -1,4 +0,0 @@
-"use strict";
-
-export { PagerViewAdapter as Pager } from './PagerViewAdapter';
-//# sourceMappingURL=Pager.android.js.map

package/lib/module/Pager.android.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["PagerViewAdapter","Pager"],"sourceRoot":"../../src","sources":["Pager.android.tsx"],"mappings":";;AAAA,SAASA,gBAAgB,IAAIC,KAAK,QAAQ,oBAAoB","ignoreList":[]}

package/lib/module/Pager.ios.js

@@ -1,4 +0,0 @@
-"use strict";
-
-export { PagerViewAdapter as Pager } from './PagerViewAdapter';
-//# sourceMappingURL=Pager.ios.js.map

package/lib/module/Pager.ios.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["PagerViewAdapter","Pager"],"sourceRoot":"../../src","sources":["Pager.ios.tsx"],"mappings":";;AAAA,SAASA,gBAAgB,IAAIC,KAAK,QAAQ,oBAAoB","ignoreList":[]}

package/lib/module/Pager.js

@@ -1,4 +0,0 @@
-"use strict";
-
-export { PanResponderAdapter as Pager } from "./PanResponderAdapter.js";
-//# sourceMappingURL=Pager.js.map

package/lib/module/Pager.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["PanResponderAdapter","Pager"],"sourceRoot":"../../src","sources":["Pager.tsx"],"mappings":";;AAAA,SAASA,mBAAmB,IAAIC,KAAK,QAAQ,0BAAuB","ignoreList":[]}

package/lib/typescript/src/Pager.android.d.ts

@@ -1,2 +0,0 @@
-export { PagerViewAdapter as Pager } from './PagerViewAdapter';
-//# sourceMappingURL=Pager.android.d.ts.map

package/lib/typescript/src/Pager.android.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pager.android.d.ts","sourceRoot":"","sources":["../../../src/Pager.android.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC"}

package/lib/typescript/src/Pager.d.ts

@@ -1,2 +0,0 @@
-export { PanResponderAdapter as Pager } from './PanResponderAdapter';
-//# sourceMappingURL=Pager.d.ts.map

package/lib/typescript/src/Pager.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pager.d.ts","sourceRoot":"","sources":["../../../src/Pager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,IAAI,KAAK,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/typescript/src/Pager.ios.d.ts

@@ -1,2 +0,0 @@
-export { PagerViewAdapter as Pager } from './PagerViewAdapter';
-//# sourceMappingURL=Pager.ios.d.ts.map

package/lib/typescript/src/Pager.ios.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pager.ios.d.ts","sourceRoot":"","sources":["../../../src/Pager.ios.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC"}

package/src/Pager.android.tsx

@@ -1 +0,0 @@
-export { PagerViewAdapter as Pager } from './PagerViewAdapter';

package/src/Pager.ios.tsx

@@ -1 +0,0 @@
-export { PagerViewAdapter as Pager } from './PagerViewAdapter';

package/src/Pager.tsx

@@ -1 +0,0 @@
-export { PanResponderAdapter as Pager } from './PanResponderAdapter';