feat: allow parent to control animated index

src/AnimatedTabBar.tsx

@@ -2,13 +2,14 @@ import React, { useMemo, useCallback } from 'react';
 import { Insets } from 'react-native';
 import { useSafeArea } from 'react-native-safe-area-context';
 import { AnimatedTabBarView } from './AnimatedTabBarView';
+import { useStableCallback } from './utilities';
 import Presets, { PresetEnum } from './presets';
 import { TabsConfig, AnimatedTabBarViewProps } from './types';
 
 interface AnimatedTabBarProps<T extends PresetEnum>
   extends Omit<
     AnimatedTabBarViewProps<T>,
-    'index' | 'onIndexChange' | 'tabs' | 'onLongPress'
+    'index' | 'onIndexChange' | 'tabs' | 'onLongPress' | 'animatedOnChange'
   > {
   /**
    * Tabs configurations.
@@ -85,15 +86,19 @@ export function AnimatedTabBar<T extends PresetEnum>(
     key: string;
   } = useMemo(() => {
     if (isReactNavigation5) {
-      return state!;
+      return {
+        index: state.index,
+        routes: state.routes,
+        key: state.key,
+      };
     } else {
       return {
         index: navigation!.state.index,
         routes: navigation!.state.routes,
         key: '',
       };
     }
-  }, [state, navigation, isReactNavigation5]);
+  }, [state.index, state.routes, state.key, navigation, isReactNavigation5]);
 
   const getRouteTitle = useCallback(
     (route: Route) => {
@@ -133,44 +138,38 @@ export function AnimatedTabBar<T extends PresetEnum>(
   //#endregion
 
   //#region callbacks
-  const handleIndexChange = useCallback(
-    (index: number) => {
-      if (isReactNavigation5) {
-        const { key, name } = routes[index];
-        const event = navigation.emit({
-          type: 'tabPress',
-          target: key,
-          canPreventDefault: true,
-        });
+  const handleIndexChange = useStableCallback((index: number) => {
+    if (isReactNavigation5) {
+      const focused = index === navigationIndex;
+      const { key, name } = routes[index];
 
-        if (!event.defaultPrevented) {
-          navigation.dispatch({
-            ...CommonActions.navigate(name),
-            target: navigationKey,
-          });
-        }
-      } else {
-        onTabPress({ route: routes[index] });
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isReactNavigation5]
-  );
-  const handleLongPress = useCallback(
-    (index: number) => {
-      if (isReactNavigation5) {
-        const { key } = routes[index];
-        navigation.emit({
-          type: 'tabLongPress',
-          target: key,
+      const event = navigation.emit({
+        type: 'tabPress',
+        target: key,
+        canPreventDefault: true,
+      });
+
+      if (!focused && !event.defaultPrevented) {
+        navigation.dispatch({
+          ...CommonActions.navigate(name),
+          target: navigationKey,
         });
-      } else {
-        onTabLongPress({ route: routes[index] });
       }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isReactNavigation5]
-  );
+    } else {
+      onTabPress({ route: routes[index] });
+    }
+  });
+  const handleLongPress = useStableCallback((index: number) => {
+    if (isReactNavigation5) {
+      const { key } = routes[index];
+      navigation.emit({
+        type: 'tabLongPress',
+        target: key,
+      });
+    } else {
+      onTabLongPress({ route: routes[index] });
+    }
+  });
   //#endregion
 
   // render

src/AnimatedTabBarView.tsx

@@ -4,7 +4,7 @@ import { useValue } from 'react-native-redash';
 import Presets, { PresetEnum } from './presets';
 import { AnimatedTabBarViewProps } from './types';
 
-const { useCode, call } = Animated;
+const { proc, call } = Animated;
 /**
  * @DEV
  * this is needed for react-native-svg to animate on the native thread.
@@ -67,24 +67,25 @@ export function AnimatedTabBarView<T extends PresetEnum>(
    * selectedIndex value.
    */
   useEffect(() => {
-    if (indexRef.current !== controlledIndex) {
-      selectedIndex.setValue(controlledIndex);
-    }
+    selectedIndex.setValue(controlledIndex);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [controlledIndex]);
 
   /**
    * @DEV
    * here we listen to selectedIndex and call `onIndexChange`
    */
-  useCode(
+  const animatedOnChange = useMemo(
     () =>
-      call([selectedIndex], args => {
-        if (onIndexChange) {
-          indexRef.current = args[0];
-          onIndexChange(args[0]);
-        }
-      }),
+      proc((index: number) =>
+        call([index], args => {
+          if (onIndexChange) {
+            indexRef.current = args[0];
+            onIndexChange(args[0]);
+          }
+        })
+      ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
   //#endregion
@@ -96,6 +97,7 @@ export function AnimatedTabBarView<T extends PresetEnum>(
     <PresetComponent
       style={style}
       selectedIndex={selectedIndex}
+      animatedOnChange={animatedOnChange}
       // @ts-ignore
       tabs={tabs}
       itemInnerSpace={itemInnerSpace}

src/bubble/BubbleTabBar.tsx

@@ -29,6 +29,7 @@ const BubbleTabBarComponent = ({
   iconSize = DEFAULT_ITEM_ICON_SIZE,
   isRTL = DEFAULT_ITEM_LAYOUT_DIRECTION,
   style: containerStyleOverride,
+  animatedOnChange,
   onLongPress = noop,
 }: TabBarViewProps<BubbleTabConfig>) => {
   //#region Styles
@@ -52,6 +53,7 @@ const BubbleTabBarComponent = ({
             index={index}
             selectedIndex={selectedIndex}
             accessibilityLabel={title}
+            animatedOnChange={animatedOnChange}
             onLongPress={onLongPress}
           >
             <BubbleTabBarItem

src/components/rawButton/RawButton.tsx

@@ -8,14 +8,15 @@ import {
 } from 'react-native-gesture-handler';
 import { useValue, useGestureHandler } from 'react-native-redash';
 
-const { useCode, set, cond, onChange, eq } = Animated;
+const { useCode, cond, onChange, eq } = Animated;
 
 interface RawButtonProps {
   index: number;
   selectedIndex: Animated.Value<number>;
   accessibilityLabel: string;
   children: React.ReactNode[] | React.ReactNode;
   style?: StyleProp<Animated.AnimateStyle<ViewStyle>>;
+  animatedOnChange: (index: number) => Animated.Node<number>;
   onLongPress: (index: number) => void;
 }
 
@@ -25,6 +26,7 @@ const RawButton = ({
   accessibilityLabel,
   children,
   style,
+  animatedOnChange,
   onLongPress,
 }: RawButtonProps) => {
   // refs
@@ -46,7 +48,7 @@ const RawButton = ({
     () => [
       onChange(
         tapGestureState,
-        cond(eq(tapGestureState, State.END), set(selectedIndex, index))
+        cond(eq(tapGestureState, State.END), animatedOnChange(index))
       ),
       onChange(
         longPressGestureState,

src/flashy/FlashyTabBar.tsx

@@ -30,6 +30,7 @@ const FlashyTabBarComponent = ({
   isRTL = DEFAULT_ITEM_LAYOUT_DIRECTION,
   style: containerStyleOverride,
   onLongPress = noop,
+  animatedOnChange,
 }: TabBarViewProps<FlashyTabConfig>) => {
   //#region Styles
   const containerStyle = useMemo<StyleProp<ViewStyle>>(
@@ -47,6 +48,7 @@ const FlashyTabBarComponent = ({
     [itemContainerWidth]
   );
   //#endregion
+
   // render
   return (
     <View style={containerStyle}>
@@ -58,6 +60,7 @@ const FlashyTabBarComponent = ({
             selectedIndex={selectedIndex}
             style={rawButtonStyle}
             accessibilityLabel={title}
+            animatedOnChange={animatedOnChange}
             onLongPress={onLongPress}
           >
             <FlashyTabBarItem

src/types.ts

@@ -63,6 +63,10 @@ export interface TabBarViewProps<T> extends TabBarConfigurableProps {
    * Selected animated index.
    */
   selectedIndex: Animated.Value<number>;
+  /**
+   * Callback when animated index change.
+   */
+  animatedOnChange: (index: number) => Animated.Node<number>;
   /**
    * Tabs configs.
    */

src/utilities.ts

@@ -1 +1,21 @@
+import { useRef, useCallback, useEffect } from 'react';
+
 export const noop = () => {};
+
+/**
+ * Provide a stable version of useCallback
+ * https://gist.github.com/JakeCoxon/c7ebf6e6496f8468226fd36b596e1985
+ */
+type Callback = (...args: any[]) => any;
+export const useStableCallback = (callback: Callback) => {
+  const callbackRef = useRef<Callback>();
+  const memoCallback = useCallback(
+    (...args) => callbackRef.current && callbackRef.current(...args),
+    []
+  );
+  useEffect(() => {
+    callbackRef.current = callback;
+    return () => (callbackRef.current = undefined);
+  });
+  return memoCallback;
+};