@zoverdoser/react-native-tab-view 1.3.1 → 1.3.3

package/src/TabBarItem.tsx

@@ -9,9 +9,11 @@ import {
   View,
   type ViewStyle,
 } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
 import {
   interpolateColor,
   useAnimatedStyle,
+  useDerivedValue,
   useSharedValue,
 } from 'react-native-reanimated';
 import useLatestCallback from 'use-latest-callback';
@@ -27,6 +29,7 @@ import type {
 
 export type Props<T extends Route> = TabDescriptor<T> & {
   position: Animated.AnimatedInterpolation<number>;
+  animatedPosition?: SharedValue<number>;
   route: T;
   navigationState: NavigationState<T>;
   pressColor?: string;
@@ -55,7 +58,6 @@ type TabBarItemInternalProps<T extends Route> = Omit<
 > & {
   isFocused: boolean;
   index: number;
-  routesLength: number;
 } & TabDescriptor<T>;
 
 const ANDROID_RIPPLE_DEFAULT = { borderless: true };
@@ -69,6 +71,7 @@ const TabBarItemInternal = <T extends Route>({
   onPress,
   isFocused,
   position,
+  animatedPosition,
   style,
   labelStyle,
   onLayout,
@@ -80,18 +83,14 @@ const TabBarItemInternal = <T extends Route>({
   badge: customBadge,
   href,
   labelText,
-  routesLength,
   android_ripple = ANDROID_RIPPLE_DEFAULT,
   labelAllowFontScaling,
   route,
   animatedStyles,
 }: TabBarItemInternalProps<T>) => {
   const inputRange = React.useMemo(
-    () =>
-      routesLength >= 2
-        ? Array.from({ length: routesLength }, (_, i) => i)
-        : [0, 1],
-    [routesLength]
+    () => [tabIndex - 1, tabIndex, tabIndex + 1],
+    [tabIndex]
   );
   const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;
 
@@ -106,70 +105,132 @@ const TabBarItemInternal = <T extends Route>({
       ? labelColorFromStyle
       : DEFAULT_INACTIVE_COLOR;
 
-  const ReAnimatedProgress = useSharedValue(isFocused ? 1 : 0);
+  const fallbackProgress = useSharedValue(isFocused ? 1 : 0);
 
   React.useEffect(() => {
+    if (animatedPosition != null) {
+      return;
+    }
+
     const listenerId = position.addListener(({ value }) => {
       const progress =
         Math.abs(tabIndex - value) > 1 ? 0 : 1 - Math.abs(tabIndex - value);
-      ReAnimatedProgress.value = progress;
+      fallbackProgress.value = progress;
     });
+
     return () => {
       position.removeListener(listenerId);
     };
-  }, [position, ReAnimatedProgress, tabIndex, route.key]);
-
-  const ReAnimatedStyleRef = React.useRef(
-    useAnimatedStyle(() => {
-      const color = interpolateColor(
-        ReAnimatedProgress.value,
-        [0, 1],
-        [inactiveColor, activeColor]
-      );
-      return { color };
-    }, [ReAnimatedProgress, activeColor, inactiveColor])
+  }, [animatedPosition, fallbackProgress, position, tabIndex]);
+
+  const reanimatedProgress = useDerivedValue(() => {
+    if (animatedPosition != null) {
+      return Math.max(0, 1 - Math.abs(tabIndex - animatedPosition.value));
+    }
+
+    return fallbackProgress.value;
+  }, [animatedPosition, fallbackProgress, tabIndex]);
+
+  const reanimatedStyle = useAnimatedStyle(() => {
+    const color = interpolateColor(
+      reanimatedProgress.value,
+      [0, 1],
+      [inactiveColor, activeColor]
+    );
+    return { color };
+  }, [reanimatedProgress, activeColor, inactiveColor]);
+
+  const inactiveItemOpacity = animatedStyles?.opacity?.[0];
+  const activeItemOpacity = animatedStyles?.opacity?.[1];
+  const inactiveScale = animatedStyles?.scale?.[0];
+  const activeScale = animatedStyles?.scale?.[1];
+
+  const itemOpacity = React.useMemo(
+    () =>
+      inactiveItemOpacity !== undefined && activeItemOpacity !== undefined
+        ? position.interpolate({
+            inputRange,
+            outputRange: [
+              inactiveItemOpacity,
+              activeItemOpacity,
+              inactiveItemOpacity,
+            ],
+            extrapolate: 'clamp',
+          })
+        : 1,
+    [activeItemOpacity, inactiveItemOpacity, inputRange, position]
   );
 
-  const opacity = animatedStyles?.opacity
-    ? position.interpolate({
+  const activeOpacity = React.useMemo(
+    () =>
+      position.interpolate({
         inputRange,
-        outputRange: inputRange.map((i) =>
-          i === tabIndex
-            ? animatedStyles.opacity![1]
-            : animatedStyles.opacity![0]
-        ),
+        outputRange: [0, 1, 0],
         extrapolate: 'clamp',
-      })
-    : 1;
-
-  const scale = animatedStyles?.scale
-    ? position.interpolate({
+      }),
+    [inputRange, position]
+  );
+  const inactiveOpacity = React.useMemo(
+    () =>
+      position.interpolate({
         inputRange,
-        outputRange: inputRange.map((i) =>
-          i === tabIndex ? animatedStyles.scale![1] : animatedStyles.scale![0]
-        ),
+        outputRange: [1, 0, 1],
         extrapolate: 'clamp',
-      })
-    : 1;
+      }),
+    [inputRange, position]
+  );
+
+  const scale = React.useMemo(
+    () =>
+      inactiveScale !== undefined && activeScale !== undefined
+        ? position.interpolate({
+            inputRange,
+            outputRange: [inactiveScale, activeScale, inactiveScale],
+            extrapolate: 'clamp',
+          })
+        : 1,
+    [activeScale, inactiveScale, inputRange, position]
+  );
 
   const icon = React.useMemo(() => {
     if (!customIcon) {
       return null;
     }
 
-    const iconEle = customIcon({
-      focused: isFocused,
-      color: ReAnimatedStyleRef.current.color,
+    const inactiveIcon = customIcon({
+      focused: false,
+      color: inactiveColor,
+      size: ICON_SIZE,
+      route,
+    });
+
+    const activeIcon = customIcon({
+      focused: true,
+      color: activeColor,
       size: ICON_SIZE,
       route,
     });
 
     return (
       <View style={styles.icon}>
-        <Animated.View style={{ opacity }}>{iconEle}</Animated.View>
+        <Animated.View style={{ opacity: inactiveOpacity }}>
+          {inactiveIcon}
+        </Animated.View>
+        <Animated.View
+          style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}
+        >
+          {activeIcon}
+        </Animated.View>
       </View>
     );
-  }, [route, customIcon, isFocused, ReAnimatedStyleRef, opacity]);
+  }, [
+    activeColor,
+    activeOpacity,
+    customIcon,
+    inactiveColor,
+    inactiveOpacity,
+    route,
+  ]);
 
   const renderLabel = React.useCallback(
     () =>
@@ -177,7 +238,7 @@ const TabBarItemInternal = <T extends Route>({
         customlabel({
           focused: isFocused,
           style: labelStyle,
-          animatedStyles: ReAnimatedStyleRef.current,
+          animatedStyles: reanimatedStyle,
           labelText,
           allowFontScaling: labelAllowFontScaling,
           route,
@@ -187,7 +248,7 @@ const TabBarItemInternal = <T extends Route>({
           icon={icon}
           label={labelText}
           style={labelStyle}
-          animatedStyles={ReAnimatedStyleRef.current}
+          animatedStyles={reanimatedStyle}
           labelAllowFontScaling={labelAllowFontScaling}
         />
       ),
@@ -199,7 +260,7 @@ const TabBarItemInternal = <T extends Route>({
       route,
       icon,
       isFocused,
-      ReAnimatedStyleRef,
+      reanimatedStyle,
     ]
   );
 
@@ -232,7 +293,11 @@ const TabBarItemInternal = <T extends Route>({
     >
       <Animated.View
         pointerEvents="none"
-        style={[styles.item, tabStyle, { opacity, transform: [{ scale }] }]}
+        style={[
+          styles.item,
+          tabStyle,
+          { opacity: itemOpacity, transform: [{ scale }] },
+        ]}
       >
         {icon}
         <View>{renderLabel()}</View>
@@ -267,7 +332,6 @@ export function TabBarItem<T extends Route>(props: Props<T>) {
       isFocused={navigationState.index === tabIndex}
       route={route}
       index={tabIndex}
-      routesLength={navigationState.routes.length}
     />
   );
 }

package/src/TabView.tsx

@@ -132,11 +132,12 @@ export function TabView<T extends Route>({
         style={pagerStyle}
         layoutDirection={direction}
       >
-        {({ position, render, addEnterListener, jumpTo }) => {
+        {({ position, animatedPosition, render, addEnterListener, jumpTo }) => {
           // All the props here must not change between re-renders
           // This is crucial to optimizing the routes with PureComponent
           const sceneRendererProps = {
             position,
+            animatedPosition,
             layout,
             jumpTo,
           };

package/src/types.tsx

@@ -1,6 +1,6 @@
 import type { Animated, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { PagerViewProps } from 'react-native-pager-view';
-import type { AnimatedStyle } from 'react-native-reanimated';
+import type { AnimatedStyle, SharedValue } from 'react-native-reanimated';
 
 export type TabDescriptor<T extends Route> = {
   accessibilityLabel?: string;
@@ -63,6 +63,7 @@ export type Listener = (value: number) => void;
 export type SceneRendererProps = {
   layout: Layout;
   position: Animated.AnimatedInterpolation<number>;
+  animatedPosition?: SharedValue<number>;
   jumpTo: (key: string) => void;
 };