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

package/src/TabBarItem.tsx

@@ -12,28 +12,37 @@ 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>;
-  activeColor?: ColorValue;
-  inactiveColor?: ColorValue;
-  pressColor?: ColorValue;
-  pressOpacity?: number;
-  onLayout?: (event: LayoutChangeEvent) => void;
+  activeColor?: ColorValue | undefined;
+  inactiveColor?: ColorValue | undefined;
+  pressColor?: ColorValue | undefined;
+  pressOpacity?: number | undefined;
+  onMeasureLayout: (layout: Layout) => void;
+  onMeasureLabelLayout: (layout: Layout) => void;
   onPress: () => void;
   onLongPress: () => void;
-  defaultTabWidth?: number;
   style: StyleProp<ViewStyle>;
-  android_ripple?: PressableAndroidRippleConfig;
+  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;
-  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 {
@@ -23,27 +23,125 @@ import type {
 } from './types';
 
 export type Props<T extends Route> = AdapterCommonProps & {
+  /**
+   * Callback which is called when the index of the active tab changes.
+   * Must update the `navigationState.index` prop to the new index.
+   *
+   * Example:
+   * ```js
+   * onIndexChange={(index) => setState({ ...state, index })}
+   * ```
+   */
   onIndexChange: (index: number) => void;
-  onTabSelect?: (props: { index: number }) => void;
+  /**
+   * Callback which is called when the tab navigation animation ends.
+   * Useful for side effects that should run after the tab change animation.
+   *
+   * Unlike `onIndexChange`, this is called regardless of whether the index changed or not.
+   */
+  onTabSelect?: ((props: { index: number }) => void) | undefined;
+  /**
+   * State for the tab view containing the current index and routes.
+   *
+   * Example:
+   * ```js
+   * {
+   *   index: 0,
+   *   routes: [
+   *     { key: 'first' },
+   *     { key: 'second' },
+   *   ],
+   * }
+   * ```
+   */
   navigationState: NavigationState<T>;
-  renderLazyPlaceholder?: (props: { route: T }) => React.ReactNode;
-  renderTabBar?: (
-    props: SceneRendererProps &
-      EventEmitterProps & {
-        navigationState: NavigationState<T>;
-        options: Record<string, TabDescriptor<T>> | undefined;
-      }
-  ) => React.ReactNode;
-  renderAdapter?: (props: AdapterProps) => React.ReactElement;
-  tabBarPosition?: 'top' | 'bottom';
-  lazy?: ((props: { route: T }) => boolean) | boolean;
-  lazyPreloadDistance?: number;
-  direction?: LocaleDirection;
-  pagerStyle?: StyleProp<ViewStyle>;
-  style?: StyleProp<ViewStyle>;
+  /**
+   * Callback which returns a custom placeholder element.
+   * The placeholder is shown when a scene is not yet loaded when `lazy` is enabled.
+   */
+  renderLazyPlaceholder?:
+    | ((props: { route: T }) => React.ReactNode)
+    | undefined;
+  /**
+   * Callback which returns a custom tab bar element to display.
+   */
+  renderTabBar?:
+    | ((
+        props: SceneRendererProps &
+          EventEmitterProps & {
+            navigationState: NavigationState<T>;
+            options: Record<string, TabDescriptor<T>> | undefined;
+          }
+      ) => React.ReactNode)
+    | undefined;
+  /**
+   * Callback which returns a custom adapter to use for the tab view.
+   * Adapters are responsible for handling gestures and animations between tabs.
+   *
+   * The following adapters are provided out of the box:
+   * - `PagerViewAdapter`: Uses `react-native-pager-view` for native experience.
+   * - `PanResponderAdapter`: Uses `PanResponder` for a JS-based implementation.
+   * - `ScrollViewAdapter`: Uses `ScrollView` for an implementation based on `ScrollView`.
+   *
+   * Defaults to `PagerViewAdapter` on Android and iOS, and `PanResponderAdapter` on other platforms.
+   */
+  renderAdapter?: ((props: AdapterProps) => React.ReactElement) | undefined;
+  /**
+   * Position of the tab bar in the tab view.
+   * Defaults to `'top'`.
+   */
+  tabBarPosition?: 'top' | 'bottom' | undefined;
+  /**
+   * Whether to lazily render the scenes.
+   * When enabled, scenes are rendered only when they come into view.
+   *
+   * Can be a boolean or a function that receives the route and returns a boolean.
+   * Defaults to `false`.
+   */
+  lazy?: ((props: { route: T }) => boolean) | boolean | undefined;
+  /**
+   * How many screens to preload when `lazy` is enabled.
+   *
+   * Defaults to `0`.
+   */
+  lazyPreloadDistance?: number | undefined;
+  /**
+   * The layout direction of the tab view.
+   *
+   * Defaults to the app's locale direction (RTL or LTR).
+   */
+  direction?: LocaleDirection | undefined;
+  /**
+   * Style to apply to the pager container.
+   */
+  pagerStyle?: StyleProp<ViewStyle> | undefined;
+  /**
+   * Style to apply to the tab view container.
+   */
+  style?: StyleProp<ViewStyle> | undefined;
+  /**
+   * Callback which returns a React element to render for each route.
+   */
   renderScene: (props: SceneRendererProps & { route: T }) => React.ReactNode;
-  options?: Record<string, TabDescriptor<T>>;
-  commonOptions?: TabDescriptor<T>;
+  /**
+   * Options for individual tabs, keyed by route key.
+   *
+   * Example:
+   * ```js
+   * {
+   *  first: { labelText: 'First Tab' },
+   *  second: { labelText: 'Second Tab' },
+   * }
+   *
+   * These options are merged with `commonOptions`.
+   */
+  options?: Record<string, TabDescriptor<T>> | undefined;
+  /**
+   * Options that apply to all tabs.
+   *
+   * Individual tab options from `options` will override these.
+   */
+  commonOptions?: TabDescriptor<T> | undefined;
 };
 
 const renderLazyPlaceholderDefault = () => null;
@@ -62,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/types.tsx

@@ -8,40 +8,44 @@ import type {
 } from 'react-native';
 
 export type TabDescriptor<T extends Route> = {
-  accessibilityLabel?: string;
-  accessible?: boolean;
-  testID?: string;
-  labelText?: string;
-  labelAllowFontScaling?: boolean;
-  href?: string;
-  label?: (props: {
-    route: T;
-    labelText?: string;
-    focused: boolean;
-    color: ColorValue;
-    allowFontScaling?: boolean;
-    style?: StyleProp<TextStyle>;
-  }) => React.ReactNode;
-  labelStyle?: StyleProp<TextStyle>;
-  icon?: (props: {
-    route: T;
-    focused: boolean;
-    color: ColorValue;
-    size: number;
-  }) => React.ReactNode;
-  badge?: (props: { route: T }) => React.ReactElement;
-  sceneStyle?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string | undefined;
+  accessible?: boolean | undefined;
+  testID?: string | undefined;
+  labelText?: string | undefined;
+  labelAllowFontScaling?: boolean | undefined;
+  href?: string | undefined;
+  label?:
+    | ((props: {
+        route: T;
+        labelText?: string | undefined;
+        focused: boolean;
+        color: ColorValue;
+        allowFontScaling?: boolean | undefined;
+        style?: StyleProp<TextStyle> | undefined;
+      }) => React.ReactNode)
+    | undefined;
+  labelStyle?: StyleProp<TextStyle> | undefined;
+  icon?:
+    | ((props: {
+        route: T;
+        focused: boolean;
+        color: ColorValue;
+        size: number;
+      }) => React.ReactNode)
+    | undefined;
+  badge?: ((props: { route: T }) => React.ReactElement) | undefined;
+  sceneStyle?: StyleProp<ViewStyle> | undefined;
 };
 
 export type LocaleDirection = 'ltr' | 'rtl';
 
 export type Route = {
   key: string;
-  icon?: string;
-  title?: string;
-  accessible?: boolean;
-  accessibilityLabel?: string;
-  testID?: string;
+  icon?: string | undefined;
+  title?: string | undefined;
+  accessible?: boolean | undefined;
+  accessibilityLabel?: string | undefined;
+  testID?: string | undefined;
 };
 
 export type Event = {
@@ -81,33 +85,33 @@ export type AdapterCommonProps = {
    * - 'on-drag' - the keyboard is dismissed when a drag begins
    * - 'none' - drags and tab changes do not dismiss the keyboard
    */
-  keyboardDismissMode?: 'none' | 'on-drag' | 'auto';
+  keyboardDismissMode?: 'none' | 'on-drag' | 'auto' | undefined;
   /**
    * Whether swiping between tabs is enabled.
    */
-  swipeEnabled?: boolean;
+  swipeEnabled?: boolean | undefined;
   /**
    * Whether the tab switch animation is enabled.
    * If set to false, the tab switch will happen immediately without animation.
    */
-  animationEnabled?: boolean;
+  animationEnabled?: boolean | undefined;
   /**
    * Callback that is called when the swipe gesture starts.
    */
-  onSwipeStart?: () => void;
+  onSwipeStart?: (() => void) | undefined;
   /**
    * Callback that is called when the swipe gesture ends.
    */
-  onSwipeEnd?: () => void;
+  onSwipeEnd?: (() => void) | undefined;
   /**
    * Callback that is called when a tab is selected.
    * This is called regardless of whether the index has changed or not.
    */
-  onTabSelect?: (props: { index: number }) => void;
+  onTabSelect?: ((props: { index: number }) => void) | undefined;
   /**
    * Style for the pager adapter.
    */
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle> | undefined;
 };
 
 export type AdapterRendererProps = {
@@ -123,7 +127,7 @@ export type AdapterRendererProps = {
    * The writing direction of the layout.
    * This can be 'ltr' or 'rtl' based on tab view's `direction` prop.
    */
-  layoutDirection?: LocaleDirection;
+  layoutDirection?: LocaleDirection | undefined;
   /**
    * Render callback that should render the pages of the tab view.
    */

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