react-native-tab-view 3.2.0 → 3.3.0

package/src/TabBarIndicator.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react-native';
 
 import type { Route, SceneRendererProps, NavigationState } from './types';
+import useAnimatedValue from './useAnimatedValue';
 
 export type GetTabWidth = (index: number) => number;
 
@@ -21,126 +22,119 @@ export type Props<T extends Route> = SceneRendererProps & {
   gap?: number;
 };
 
-export default class TabBarIndicator<T extends Route> extends React.Component<
-  Props<T>
-> {
-  componentDidMount() {
-    this.fadeInIndicator();
-  }
+const getTranslateX = (
+  position: Animated.AnimatedInterpolation,
+  routes: Route[],
+  getTabWidth: GetTabWidth,
+  gap?: number
+) => {
+  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)];
+  }, []);
+
+  const translateX = position.interpolate({
+    inputRange,
+    outputRange,
+    extrapolate: 'clamp',
+  });
+
+  return Animated.multiply(translateX, I18nManager.isRTL ? -1 : 1);
+};
 
-  componentDidUpdate() {
-    this.fadeInIndicator();
+export default function TabBarIndicator<T extends Route>({
+  getTabWidth,
+  layout,
+  navigationState,
+  position,
+  width,
+  gap,
+  style,
+}: Props<T>) {
+  const isIndicatorShown = React.useRef(false);
+  const isWidthDynamic = width === 'auto';
+
+  const opacity = useAnimatedValue(isWidthDynamic ? 0 : 1);
+
+  const hasMeasuredTabWidths =
+    Boolean(layout.width) &&
+    navigationState.routes.every((_, i) => getTabWidth(i));
+
+  React.useEffect(() => {
+    const fadeInIndicator = () => {
+      if (
+        !isIndicatorShown.current &&
+        isWidthDynamic &&
+        // We should fade-in the indicator when we have widths for all the tab items
+        hasMeasuredTabWidths
+      ) {
+        isIndicatorShown.current = true;
+
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 150,
+          easing: Easing.in(Easing.linear),
+          useNativeDriver: true,
+        }).start();
+      }
+    };
+
+    fadeInIndicator();
+
+    return () => opacity.stopAnimation();
+  }, [hasMeasuredTabWidths, isWidthDynamic, opacity]);
+
+  const { routes } = navigationState;
+
+  const transform = [];
+
+  if (layout.width) {
+    const translateX =
+      routes.length > 1 ? getTranslateX(position, routes, getTabWidth, gap) : 0;
+
+    transform.push({ translateX });
   }
 
-  private fadeInIndicator = () => {
-    const { navigationState, layout, width, getTabWidth } = this.props;
-
-    if (
-      !this.isIndicatorShown &&
-      width === 'auto' &&
-      layout.width &&
-      // We should fade-in the indicator when we have widths for all the tab items
-      navigationState.routes.every((_, i) => getTabWidth(i))
-    ) {
-      this.isIndicatorShown = true;
-
-      Animated.timing(this.opacity, {
-        toValue: 1,
-        duration: 150,
-        easing: Easing.in(Easing.linear),
-        useNativeDriver: true,
-      }).start();
-    }
-  };
-
-  private isIndicatorShown = false;
-
-  private opacity = new Animated.Value(this.props.width === 'auto' ? 0 : 1);
-
-  private getTranslateX = (
-    position: Animated.AnimatedInterpolation,
-    routes: Route[],
-    getTabWidth: GetTabWidth,
-    gap?: number
-  ) => {
+  if (width === 'auto') {
     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)];
-    }, []);
-
-    const translateX = position.interpolate({
-      inputRange,
-      outputRange,
-      extrapolate: 'clamp',
-    });
-
-    return Animated.multiply(translateX, I18nManager.isRTL ? -1 : 1);
-  };
-
-  render() {
-    const {
-      position,
-      navigationState,
-      getTabWidth,
-      width,
-      style,
-      layout,
-      gap,
-    } = this.props;
-    const { routes } = navigationState;
-
-    const transform = [];
-
-    if (layout.width) {
-      const translateX =
-        routes.length > 1
-          ? this.getTranslateX(position, routes, getTabWidth, gap)
-          : 0;
-
-      transform.push({ translateX });
-    }
-
-    if (width === 'auto') {
-      const inputRange = routes.map((_, i) => i);
-      const outputRange = inputRange.map(getTabWidth);
-
-      transform.push(
-        {
-          scaleX:
-            routes.length > 1
-              ? position.interpolate({
-                  inputRange,
-                  outputRange,
-                  extrapolate: 'clamp',
-                })
-              : outputRange[0],
-        },
-        { translateX: 0.5 }
-      );
-    }
-
-    return (
-      <Animated.View
-        style={[
-          styles.indicator,
-          { width: width === 'auto' ? 1 : width },
-          // 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 },
-          width === 'auto' ? { opacity: this.opacity } : null,
-          style,
-        ]}
-      />
+    const outputRange = inputRange.map(getTabWidth);
+
+    transform.push(
+      {
+        scaleX:
+          routes.length > 1
+            ? position.interpolate({
+                inputRange,
+                outputRange,
+                extrapolate: 'clamp',
+              })
+            : outputRange[0],
+      },
+      { translateX: 0.5 }
     );
   }
+
+  return (
+    <Animated.View
+      style={[
+        styles.indicator,
+        { width: width === 'auto' ? 1 : width },
+        // 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 },
+        width === 'auto' ? { opacity: opacity } : null,
+        style,
+      ]}
+    />
+  );
 }
 
 const styles = StyleSheet.create({

package/src/TabBarItem.tsx

@@ -8,6 +8,7 @@ import {
   TextStyle,
   ViewStyle,
 } from 'react-native';
+import useLatestCallback from 'use-latest-callback';
 import PlatformPressable from './PlatformPressable';
 import type { Scene, Route, NavigationState } from './types';
 
@@ -37,6 +38,7 @@ export type Props<T extends Route> = {
   onLayout?: (event: LayoutChangeEvent) => void;
   onPress: () => void;
   onLongPress: () => void;
+  defaultTabWidth?: number;
   labelStyle?: StyleProp<TextStyle>;
   style: StyleProp<ViewStyle>;
 };
@@ -44,219 +46,246 @@ export type Props<T extends Route> = {
 const DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';
 const DEFAULT_INACTIVE_COLOR = 'rgba(255, 255, 255, 0.7)';
 
-export default class TabBarItem<T extends Route> extends React.Component<
-  Props<T>
-> {
-  private getActiveOpacity = (
-    position: Animated.AnimatedInterpolation,
-    routes: Route[],
-    tabIndex: number
-  ) => {
-    if (routes.length > 1) {
-      const inputRange = routes.map((_, i) => i);
+const getActiveOpacity = (
+  position: Animated.AnimatedInterpolation,
+  routesLength: number,
+  tabIndex: number
+) => {
+  if (routesLength > 1) {
+    const inputRange = Array.from({ length: routesLength }, (_, i) => i);
 
-      return position.interpolate({
-        inputRange,
-        outputRange: inputRange.map((i) => (i === tabIndex ? 1 : 0)),
-      });
-    } else {
-      return 1;
-    }
-  };
-
-  private getInactiveOpacity = (
-    position: Animated.AnimatedInterpolation,
-    routes: Route[],
-    tabIndex: number
-  ) => {
-    if (routes.length > 1) {
-      const inputRange = routes.map((_: Route, i: number) => i);
-
-      return position.interpolate({
-        inputRange,
-        outputRange: inputRange.map((i: number) => (i === tabIndex ? 0 : 1)),
-      });
-    } else {
-      return 0;
-    }
-  };
-
-  render() {
-    const {
-      route,
-      position,
-      navigationState,
-      renderLabel: renderLabelCustom,
-      renderIcon,
-      renderBadge,
-      getLabelText,
-      getTestID,
-      getAccessibilityLabel,
-      getAccessible,
-      activeColor: activeColorCustom,
-      inactiveColor: inactiveColorCustom,
-      pressColor,
-      pressOpacity,
-      labelStyle,
-      style,
-      onLayout,
-      onPress,
-      onLongPress,
-    } = this.props;
-
-    const tabIndex = navigationState.routes.indexOf(route);
-    const isFocused = navigationState.index === tabIndex;
-
-    const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;
-
-    const activeColor =
-      activeColorCustom !== undefined
-        ? activeColorCustom
-        : typeof labelColorFromStyle === 'string'
-        ? labelColorFromStyle
-        : DEFAULT_ACTIVE_COLOR;
-    const inactiveColor =
-      inactiveColorCustom !== undefined
-        ? inactiveColorCustom
-        : typeof labelColorFromStyle === 'string'
-        ? labelColorFromStyle
-        : DEFAULT_INACTIVE_COLOR;
+    return position.interpolate({
+      inputRange,
+      outputRange: inputRange.map((i) => (i === tabIndex ? 1 : 0)),
+    });
+  } else {
+    return 1;
+  }
+};
 
-    const activeOpacity = this.getActiveOpacity(
-      position,
-      navigationState.routes,
-      tabIndex
-    );
-    const inactiveOpacity = this.getInactiveOpacity(
-      position,
-      navigationState.routes,
-      tabIndex
-    );
+const getInactiveOpacity = (
+  position: Animated.AnimatedInterpolation,
+  routesLength: number,
+  tabIndex: number
+) => {
+  if (routesLength > 1) {
+    const inputRange = Array.from({ length: routesLength }, (_, i) => i);
 
-    let icon: React.ReactNode | null = null;
-    let label: React.ReactNode | null = null;
+    return position.interpolate({
+      inputRange,
+      outputRange: inputRange.map((i: number) => (i === tabIndex ? 0 : 1)),
+    });
+  } else {
+    return 0;
+  }
+};
 
-    if (renderIcon) {
-      const activeIcon = renderIcon({
-        route,
-        focused: true,
-        color: activeColor,
-      });
-      const inactiveIcon = renderIcon({
-        route,
-        focused: false,
-        color: inactiveColor,
-      });
+type TabBarItemInternalProps<T extends Route> = Omit<
+  Props<T>,
+  'navigationState'
+> & {
+  isFocused: boolean;
+  index: number;
+  routesLength: number;
+};
 
-      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 TabBarItemInternal = <T extends Route>({
+  getAccessibilityLabel,
+  getAccessible,
+  getLabelText,
+  getTestID,
+  onLongPress,
+  onPress,
+  isFocused,
+  position,
+  route,
+  style,
+  inactiveColor: inactiveColorCustom,
+  activeColor: activeColorCustom,
+  labelStyle,
+  onLayout,
+  index: tabIndex,
+  pressColor,
+  pressOpacity,
+  renderBadge,
+  renderIcon,
+  defaultTabWidth,
+  routesLength,
+  renderLabel: renderLabelCustom,
+}: TabBarItemInternalProps<T>) => {
+  const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;
 
-    const renderLabel =
-      renderLabelCustom !== undefined
-        ? renderLabelCustom
-        : ({ route, color }: { route: T; color: string }) => {
-            const labelText = getLabelText({ route });
+  const activeColor =
+    activeColorCustom !== undefined
+      ? activeColorCustom
+      : typeof labelColorFromStyle === 'string'
+      ? labelColorFromStyle
+      : DEFAULT_ACTIVE_COLOR;
+  const inactiveColor =
+    inactiveColorCustom !== undefined
+      ? inactiveColorCustom
+      : typeof labelColorFromStyle === 'string'
+      ? labelColorFromStyle
+      : DEFAULT_INACTIVE_COLOR;
 
-            if (typeof labelText === 'string') {
-              return (
-                <Animated.Text
-                  style={[
-                    styles.label,
-                    icon ? { marginTop: 0 } : null,
-                    labelStyle,
-                    { color },
-                  ]}
-                >
-                  {labelText}
-                </Animated.Text>
-              );
-            }
+  const activeOpacity = getActiveOpacity(position, routesLength, tabIndex);
+  const inactiveOpacity = getInactiveOpacity(position, routesLength, tabIndex);
 
-            return labelText;
-          };
+  let icon: React.ReactNode | null = null;
+  let label: React.ReactNode | null = null;
 
-    if (renderLabel) {
-      const activeLabel = renderLabel({
-        route,
-        focused: true,
-        color: activeColor,
-      });
-      const inactiveLabel = renderLabel({
-        route,
-        focused: false,
-        color: inactiveColor,
-      });
+  if (renderIcon) {
+    const activeIcon = renderIcon({
+      route,
+      focused: true,
+      color: activeColor,
+    });
+    const inactiveIcon = renderIcon({
+      route,
+      focused: false,
+      color: inactiveColor,
+    });
 
-      label = (
-        <View>
+    if (inactiveIcon != null && activeIcon != null) {
+      icon = (
+        <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>
       );
     }
+  }
 
-    const tabStyle = StyleSheet.flatten(style);
-    const isWidthSet = tabStyle?.width !== undefined;
-    const tabContainerStyle: ViewStyle | null = isWidthSet ? null : { flex: 1 };
-
-    const scene = { route };
+  const renderLabel =
+    renderLabelCustom !== undefined
+      ? renderLabelCustom
+      : (labelProps: { route: T; color: string }) => {
+          const labelText = getLabelText({ route: labelProps.route });
 
-    let accessibilityLabel = getAccessibilityLabel(scene);
+          if (typeof labelText === 'string') {
+            return (
+              <Animated.Text
+                style={[
+                  styles.label,
+                  icon ? { marginTop: 0 } : null,
+                  labelStyle,
+                  { color: labelProps.color },
+                ]}
+              >
+                {labelText}
+              </Animated.Text>
+            );
+          }
 
-    accessibilityLabel =
-      typeof accessibilityLabel !== 'undefined'
-        ? accessibilityLabel
-        : getLabelText(scene);
+          return labelText;
+        };
 
-    const badge = renderBadge ? renderBadge(scene) : null;
+  if (renderLabel) {
+    const activeLabel = renderLabel({
+      route,
+      focused: true,
+      color: activeColor,
+    });
+    const inactiveLabel = renderLabel({
+      route,
+      focused: false,
+      color: inactiveColor,
+    });
 
-    return (
-      <PlatformPressable
-        android_ripple={{ borderless: true }}
-        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'] : []}
-        pressColor={pressColor}
-        pressOpacity={pressOpacity}
-        delayPressIn={0}
-        onLayout={onLayout}
-        onPress={onPress}
-        onLongPress={onLongPress}
-        style={[styles.pressable, tabContainerStyle]}
-      >
-        <View pointerEvents="none" style={[styles.item, tabStyle]}>
-          {icon}
-          {label}
-          {badge != null ? <View style={styles.badge}>{badge}</View> : null}
-        </View>
-      </PlatformPressable>
+    label = (
+      <View>
+        <Animated.View style={{ opacity: inactiveOpacity }}>
+          {inactiveLabel}
+        </Animated.View>
+        <Animated.View
+          style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}
+        >
+          {activeLabel}
+        </Animated.View>
+      </View>
     );
   }
+
+  const tabStyle = StyleSheet.flatten(style);
+  const isWidthSet = tabStyle?.width !== undefined;
+
+  const tabContainerStyle: ViewStyle | null = isWidthSet
+    ? null
+    : { width: defaultTabWidth };
+
+  const scene = { route };
+
+  let accessibilityLabel = getAccessibilityLabel(scene);
+
+  accessibilityLabel =
+    typeof accessibilityLabel !== 'undefined'
+      ? accessibilityLabel
+      : getLabelText(scene);
+
+  const badge = renderBadge ? renderBadge(scene) : null;
+
+  return (
+    <PlatformPressable
+      android_ripple={{ borderless: true }}
+      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'] : []}
+      pressColor={pressColor}
+      pressOpacity={pressOpacity}
+      delayPressIn={0}
+      onLayout={onLayout}
+      onPress={onPress}
+      onLongPress={onLongPress}
+      style={[styles.pressable, tabContainerStyle]}
+    >
+      <View pointerEvents="none" style={[styles.item, tabStyle]}>
+        {icon}
+        {label}
+        {badge != null ? <View style={styles.badge}>{badge}</View> : null}
+      </View>
+    </PlatformPressable>
+  );
+};
+
+const MemoizedTabBarItemInternal = React.memo(
+  TabBarItemInternal
+) as typeof TabBarItemInternal;
+
+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 : () => {});
+
+  const tabIndex = navigationState.routes.indexOf(route);
+
+  return (
+    <MemoizedTabBarItemInternal
+      {...rest}
+      onPress={onPressLatest}
+      onLayout={onLayoutLatest}
+      onLongPress={onLongPressLatest}
+      isFocused={navigationState.index === tabIndex}
+      route={route}
+      index={tabIndex}
+      routesLength={navigationState.routes.length}
+    />
+  );
 }
 
+export default TabBarItem;
+
 const styles = StyleSheet.create({
   label: {
     margin: 4,