@amazon-devices/react-navigation__react-native-tab-view 7.0.9000000000 → 8.0.9000000000-rn-83

package/src/TabBarIndicator.tsx

@@ -1,40 +1,63 @@
 import * as React from 'react';
 import {
   Animated,
-  DimensionValue,
   Easing,
-  I18nManager,
   Platform,
-  StyleProp,
+  type StyleProp,
   StyleSheet,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native';
 
-import type { NavigationState, Route, SceneRendererProps } from './types';
-import useAnimatedValue from './useAnimatedValue';
+import type {
+  LocaleDirection,
+  NavigationState,
+  Route,
+  SceneRendererProps,
+} from './types';
+import { useAnimatedValue } from './useAnimatedValue';
 
 export type GetTabWidth = (index: number) => number;
 
 export type Props<T extends Route> = SceneRendererProps & {
   navigationState: NavigationState<T>;
-  width: string | number;
-  style?: StyleProp<ViewStyle>;
+  width: 'auto' | `${number}%` | number;
   getTabWidth: GetTabWidth;
+  direction: LocaleDirection;
+  style?: StyleProp<ViewStyle>;
   gap?: number;
+  children?: React.ReactNode;
 };
 
+const useNativeDriver = Platform.OS !== 'web';
+
 const getTranslateX = (
   position: Animated.AnimatedInterpolation<number>,
   routes: Route[],
   getTabWidth: GetTabWidth,
-  gap?: number
+  direction: LocaleDirection,
+  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({
@@ -43,17 +66,19 @@ const getTranslateX = (
     extrapolate: 'clamp',
   });
 
-  return Animated.multiply(translateX, I18nManager.isRTL ? -1 : 1);
+  return Animated.multiply(translateX, direction === 'rtl' ? -1 : 1);
 };
 
-export default function TabBarIndicator<T extends Route>({
+export function TabBarIndicator<T extends Route>({
   getTabWidth,
   layout,
   navigationState,
   position,
   width,
+  direction,
   gap,
   style,
+  children,
 }: Props<T>) {
   const isIndicatorShown = React.useRef(false);
   const isWidthDynamic = width === 'auto';
@@ -81,7 +106,7 @@ export default function TabBarIndicator<T extends Route>({
           toValue: 1,
           duration: 150,
           easing: Easing.in(Easing.linear),
-          useNativeDriver: true,
+          useNativeDriver,
         }).start();
       }
     };
@@ -97,7 +122,9 @@ export default function TabBarIndicator<T extends Route>({
 
   if (layout.width) {
     const translateX =
-      routes.length > 1 ? getTranslateX(position, routes, getTabWidth, gap) : 0;
+      routes.length > 1
+        ? getTranslateX(position, routes, getTabWidth, direction, gap, width)
+        : 0;
 
     transform.push({ translateX });
   }
@@ -117,7 +144,23 @@ export default function TabBarIndicator<T extends Route>({
               })
             : outputRange[0],
       },
-      { translateX: 0.5 }
+      { translateX: direction === 'rtl' ? -0.5 : 0.5 }
+    );
+  }
+
+  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 }
     );
   }
 
@@ -125,19 +168,13 @@ export default function TabBarIndicator<T extends Route>({
     <Animated.View
       style={[
         styles.indicator,
-        { width: (width === 'auto' ? 1 : width) as DimensionValue | undefined },
-        // If layout is not available, use `left` property for positioning the indicator
-        // This avoids rendering delay until we are able to calculate translateX
-        // If platform is macos use `left` property as `transform` is broken at the moment.
-        // See: https://github.com/microsoft/react-native-macos/issues/280
-        layout.width && Platform.OS !== 'macos'
-          ? { left: 0 }
-          : { left: `${(100 / routes.length) * navigationState.index}%` },
-        { transform },
+        styleList,
         width === 'auto' ? { opacity: opacity } : null,
         style,
       ]}
-    />
+    >
+      {children}
+    </Animated.View>
   );
 }
 
@@ -145,9 +182,9 @@ const styles = StyleSheet.create({
   indicator: {
     backgroundColor: '#ffeb3b',
     position: 'absolute',
-    left: 0,
+    start: 0,
     bottom: 0,
-    right: 0,
+    end: 0,
     height: 2,
   },
 });

package/src/TabBarItem.tsx

@@ -1,20 +1,21 @@
 import * as React from 'react';
 import {
   Animated,
-  LayoutChangeEvent,
-  PressableAndroidRippleConfig,
-  StyleProp,
+  type LayoutChangeEvent,
+  Platform,
+  type PressableAndroidRippleConfig,
+  type StyleProp,
   StyleSheet,
-  TextStyle,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native';
 import useLatestCallback from 'use-latest-callback';
 
-import PlatformPressable from './PlatformPressable';
-import type { NavigationState, Route, Scene } from './types';
+import { PlatformPressable } from './PlatformPressable';
+import { TabBarItemLabel } from './TabBarItemLabel';
+import type { NavigationState, Route, TabDescriptor } from './types';
 
-export type Props<T extends Route> = {
+export type Props<T extends Route> = TabDescriptor<T> & {
   position: Animated.AnimatedInterpolation<number>;
   route: T;
   navigationState: NavigationState<T>;
@@ -22,32 +23,17 @@ export type Props<T extends Route> = {
   inactiveColor?: string;
   pressColor?: string;
   pressOpacity?: number;
-  getLabelText: (scene: Scene<T>) => string | undefined;
-  getAccessible: (scene: Scene<T>) => boolean | undefined;
-  getAccessibilityLabel: (scene: Scene<T>) => string | undefined;
-  getTestID: (scene: Scene<T>) => string | undefined;
-  renderLabel?: (scene: {
-    route: T;
-    focused: boolean;
-    color: string;
-  }) => React.ReactNode;
-  renderIcon?: (scene: {
-    route: T;
-    focused: boolean;
-    color: string;
-  }) => React.ReactNode;
-  renderBadge?: (scene: Scene<T>) => React.ReactNode;
   onLayout?: (event: LayoutChangeEvent) => void;
   onPress: () => void;
   onLongPress: () => void;
   defaultTabWidth?: number;
-  labelStyle?: StyleProp<TextStyle>;
   style: StyleProp<ViewStyle>;
   android_ripple?: PressableAndroidRippleConfig;
 };
 
 const DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';
 const DEFAULT_INACTIVE_COLOR = 'rgba(255, 255, 255, 0.7)';
+const ICON_SIZE = 24;
 
 const getActiveOpacity = (
   position: Animated.AnimatedInterpolation<number>,
@@ -85,23 +71,29 @@ const getInactiveOpacity = (
 
 type TabBarItemInternalProps<T extends Route> = Omit<
   Props<T>,
-  'navigationState'
+  | 'navigationState'
+  | 'getAccessibilityLabel'
+  | 'getLabelText'
+  | 'getTestID'
+  | 'getAccessible'
+  | 'options'
 > & {
   isFocused: boolean;
   index: number;
   routesLength: number;
-};
+} & TabDescriptor<T>;
+
+const ANDROID_RIPPLE_DEFAULT = { borderless: true };
 
 const TabBarItemInternal = <T extends Route>({
-  getAccessibilityLabel,
-  getAccessible,
-  getLabelText,
-  getTestID,
+  accessibilityLabel,
+  accessible,
+  label: customlabel,
+  testID,
   onLongPress,
   onPress,
   isFocused,
   position,
-  route,
   style,
   inactiveColor: inactiveColorCustom,
   activeColor: activeColorCustom,
@@ -110,12 +102,15 @@ const TabBarItemInternal = <T extends Route>({
   index: tabIndex,
   pressColor,
   pressOpacity,
-  renderBadge,
-  renderIcon,
   defaultTabWidth,
+  icon: customIcon,
+  badge: customBadge,
+  href,
+  labelText,
   routesLength,
-  renderLabel: renderLabelCustom,
-  android_ripple = { borderless: true },
+  android_ripple = ANDROID_RIPPLE_DEFAULT,
+  labelAllowFontScaling,
+  route,
 }: TabBarItemInternalProps<T>) => {
   const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;
 
@@ -123,98 +118,88 @@ const TabBarItemInternal = <T extends Route>({
     activeColorCustom !== undefined
       ? activeColorCustom
       : typeof labelColorFromStyle === 'string'
-      ? labelColorFromStyle
-      : DEFAULT_ACTIVE_COLOR;
+        ? labelColorFromStyle
+        : DEFAULT_ACTIVE_COLOR;
   const inactiveColor =
     inactiveColorCustom !== undefined
       ? inactiveColorCustom
       : typeof labelColorFromStyle === 'string'
-      ? labelColorFromStyle
-      : DEFAULT_INACTIVE_COLOR;
+        ? labelColorFromStyle
+        : DEFAULT_INACTIVE_COLOR;
 
   const activeOpacity = getActiveOpacity(position, routesLength, tabIndex);
   const inactiveOpacity = getInactiveOpacity(position, routesLength, tabIndex);
 
-  let icon: React.ReactNode | null = null;
-  let label: React.ReactNode | null = null;
+  const icon = React.useMemo(() => {
+    if (!customIcon) {
+      return null;
+    }
 
-  if (renderIcon) {
-    const activeIcon = renderIcon({
-      route,
-      focused: true,
-      color: activeColor,
-    });
-    const inactiveIcon = renderIcon({
-      route,
+    const inactiveIcon = customIcon({
       focused: false,
       color: inactiveColor,
+      size: ICON_SIZE,
+      route,
     });
 
-    if (inactiveIcon != null && activeIcon != null) {
-      icon = (
-        <View style={styles.icon}>
-          <Animated.View style={{ opacity: inactiveOpacity }}>
-            {inactiveIcon}
-          </Animated.View>
-          <Animated.View
-            style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}
-          >
-            {activeIcon}
-          </Animated.View>
-        </View>
-      );
-    }
-  }
-
-  const renderLabel =
-    renderLabelCustom !== undefined
-      ? renderLabelCustom
-      : (labelProps: { route: T; color: string }) => {
-          const labelText = getLabelText({ route: labelProps.route });
-
-          if (typeof labelText === 'string') {
-            return (
-              <Animated.Text
-                style={[
-                  styles.label,
-                  icon ? { marginTop: 0 } : null,
-                  labelStyle,
-                  { color: labelProps.color },
-                ]}
-              >
-                {labelText}
-              </Animated.Text>
-            );
-          }
-
-          return labelText;
-        };
-
-  if (renderLabel) {
-    const activeLabel = renderLabel({
-      route,
+    const activeIcon = customIcon({
       focused: true,
       color: activeColor,
-    });
-    const inactiveLabel = renderLabel({
+      size: ICON_SIZE,
       route,
-      focused: false,
-      color: inactiveColor,
     });
 
-    label = (
-      <View>
+    return (
+      <View style={styles.icon}>
         <Animated.View style={{ opacity: inactiveOpacity }}>
-          {inactiveLabel}
+          {inactiveIcon}
         </Animated.View>
         <Animated.View
           style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}
         >
-          {activeLabel}
+          {activeIcon}
         </Animated.View>
       </View>
     );
-  }
+  }, [
+    activeColor,
+    activeOpacity,
+    customIcon,
+    inactiveColor,
+    inactiveOpacity,
+    route,
+  ]);
+
+  const renderLabel = React.useCallback(
+    (focused: boolean) =>
+      customlabel ? (
+        customlabel({
+          focused,
+          color: focused ? activeColor : inactiveColor,
+          style: labelStyle,
+          labelText,
+          allowFontScaling: labelAllowFontScaling,
+          route,
+        })
+      ) : (
+        <TabBarItemLabel
+          color={focused ? activeColor : inactiveColor}
+          icon={icon}
+          label={labelText}
+          style={labelStyle}
+        />
+      ),
+    [
+      customlabel,
+      activeColor,
+      labelStyle,
+      labelText,
+      labelAllowFontScaling,
+      route,
+      inactiveColor,
+      icon,
+    ]
+  );
 
   const tabStyle = StyleSheet.flatten(style);
   const isWidthSet = tabStyle?.width !== undefined;
@@ -223,39 +208,41 @@ const TabBarItemInternal = <T extends Route>({
     ? null
     : { width: defaultTabWidth };
 
-  const scene = { route };
-
-  let accessibilityLabel = getAccessibilityLabel(scene);
-
-  accessibilityLabel =
-    typeof accessibilityLabel !== 'undefined'
-      ? accessibilityLabel
-      : getLabelText(scene);
-
-  const badge = renderBadge ? renderBadge(scene) : null;
+  const ariaLabel =
+    typeof accessibilityLabel !== 'undefined' ? accessibilityLabel : labelText;
 
   return (
     <PlatformPressable
       android_ripple={android_ripple}
-      testID={getTestID(scene)}
-      accessible={getAccessible(scene)}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="tab"
-      accessibilityState={{ selected: isFocused }}
-      // @ts-ignore: this is to support older React Native versions
-      accessibilityStates={isFocused ? ['selected'] : []}
+      testID={testID}
+      accessible={accessible}
+      role="tab"
+      aria-label={ariaLabel}
+      aria-selected={isFocused}
       pressColor={pressColor}
       pressOpacity={pressOpacity}
-      delayPressIn={0}
+      unstable_pressDelay={0}
       onLayout={onLayout}
       onPress={onPress}
       onLongPress={onLongPress}
+      href={href}
       style={[styles.pressable, tabContainerStyle]}
     >
       <View pointerEvents="none" style={[styles.item, tabStyle]}>
         {icon}
-        {label}
-        {badge != null ? <View style={styles.badge}>{badge}</View> : null}
+        <View>
+          <Animated.View style={{ opacity: inactiveOpacity }}>
+            {renderLabel(false)}
+          </Animated.View>
+          <Animated.View
+            style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}
+          >
+            {renderLabel(true)}
+          </Animated.View>
+        </View>
+        {customBadge != null ? (
+          <View style={styles.badge}>{customBadge({ route })}</View>
+        ) : null}
       </View>
     </PlatformPressable>
   );
@@ -265,9 +252,10 @@ const MemoizedTabBarItemInternal = React.memo(
   TabBarItemInternal
 ) as typeof TabBarItemInternal;
 
-function TabBarItem<T extends Route>(props: Props<T>) {
+export function TabBarItem<T extends Route>(props: Props<T>) {
   const { onPress, onLongPress, onLayout, navigationState, route, ...rest } =
     props;
+
   const onPressLatest = useLatestCallback(onPress);
   const onLongPressLatest = useLatestCallback(onLongPress);
   const onLayoutLatest = useLatestCallback(onLayout ? onLayout : () => {});
@@ -288,14 +276,7 @@ function TabBarItem<T extends Route>(props: Props<T>) {
   );
 }
 
-export default TabBarItem;
-
 const styles = StyleSheet.create({
-  label: {
-    margin: 4,
-    backgroundColor: 'transparent',
-    textTransform: 'uppercase',
-  },
   icon: {
     margin: 2,
   },
@@ -309,11 +290,19 @@ const styles = StyleSheet.create({
   badge: {
     position: 'absolute',
     top: 0,
-    right: 0,
+    end: 0,
   },
   pressable: {
     // 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,
+        borderCurve: 'continuous',
+      },
+      default: null,
+    }),
   },
 });

package/src/TabBarItemLabel.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Animated, StyleSheet } from 'react-native';
+
+interface TabBarItemLabelProps {
+  color: string;
+  label?: string;
+  style: StyleProp<ViewStyle>;
+  icon: React.ReactNode;
+}
+
+export const TabBarItemLabel = React.memo(
+  ({ color, label, style, icon }: TabBarItemLabelProps) => {
+    if (!label) {
+      return null;
+    }
+
+    return (
+      <Animated.Text
+        style={[
+          styles.label,
+          icon ? { marginTop: 0 } : null,
+          style,
+          { color: color },
+        ]}
+      >
+        {label}
+      </Animated.Text>
+    );
+  }
+);
+
+TabBarItemLabel.displayName = 'TabBarItemLabel';
+
+const styles = StyleSheet.create({
+  label: {
+    margin: 4,
+    fontSize: 14,
+    fontWeight: '500',
+    backgroundColor: 'transparent',
+  },
+});