react-native-tab-view 3.2.1 → 3.3.2

package/src/TabBarIndicator.tsx

@@ -2,14 +2,15 @@ import * as React from 'react';
 import {
   Animated,
   Easing,
-  StyleSheet,
   I18nManager,
+  Platform,
   StyleProp,
+  StyleSheet,
   ViewStyle,
-  Platform,
 } from 'react-native';
 
-import type { Route, SceneRendererProps, NavigationState } from './types';
+import type { NavigationState, Route, SceneRendererProps } from './types';
+import useAnimatedValue from './useAnimatedValue';
 
 export type GetTabWidth = (index: number) => number;
 
@@ -21,126 +22,122 @@ 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 indicatorVisible = isWidthDynamic
+    ? layout.width &&
+      navigationState.routes
+        .slice(0, navigationState.index)
+        .every((_, r) => getTabWidth(r))
+    : true;
+
+  React.useEffect(() => {
+    const fadeInIndicator = () => {
+      if (
+        !isIndicatorShown.current &&
+        isWidthDynamic &&
+        // We should fade-in the indicator when we have widths for all the tab items
+        indicatorVisible
+      ) {
+        isIndicatorShown.current = true;
+
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 150,
+          easing: Easing.in(Easing.linear),
+          useNativeDriver: true,
+        }).start();
+      }
+    };
+
+    fadeInIndicator();
+
+    return () => opacity.stopAnimation();
+  }, [indicatorVisible, 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({