react-navigation-reanimated-top-tabs 0.6.0 → 0.6.2

package/src/components/ReanimatedTopTab/ReanimatedTabView.tsx

@@ -10,6 +10,7 @@ import Reanimated, {
   interpolate,
   LinearTransition,
   runOnJS,
+  runOnUI,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
@@ -21,13 +22,13 @@ export interface ReanimatedTabViewProps {
   LazyPlaceholder?: () => React.ReactNode;
   lazy?: boolean;
   navigationState: ReanimatedTabViewTypes.NavigationState;
-  onIndexChange: (index: number) => void;
   percentageTrigger?: number;
   positionInterpolation?: ReanimatedTabViewTypes.PositionInterpolation;
   renderScene: (params: ReanimatedTabViewTypes.SceneProps) => React.ReactNode;
   renderTabBar?: (
     params: ReanimatedTabViewTypes.RenderTabsParams
   ) => React.ReactNode;
+  navigate(index: number): void;
 }
 
 export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
@@ -35,17 +36,16 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
     LazyPlaceholder = () => null,
     lazy = false,
     navigationState,
-    onIndexChange,
     percentageTrigger = 0.4,
     positionInterpolation,
     renderScene,
     renderTabBar,
+    navigate,
   }) => {
     const { width } = useWindowDimensions();
     const loadedScreens = useRef([
       navigationState.routes[navigationState.index],
     ]);
-    // const width = 160;
     const scrollPosition = useSharedValue(navigationState.index);
 
     const position = useDerivedValue(() => {
@@ -60,22 +60,29 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
       );
     }, [positionInterpolation]);
 
-    useEffect(() => {
-      scrollPosition.value = AnimationHelper.animation(
-        -navigationState.index * width
-      );
-    }, [navigationState.index, scrollPosition, width]);
+    const _navigate = (index: number) => {
+      scrollPosition.value = AnimationHelper.animation(-index * width);
+      navigate(index);
+    };
 
     const minimumValueToChangeView = useMemo(
       () => width * percentageTrigger,
       [percentageTrigger, width]
     );
 
+    const _navigationState = useSharedValue({ size: 0, index: 0 });
+
+    useEffect(() => {
+      runOnUI(() => {
+        _navigationState.value.size = navigationState.routes.length;
+        _navigationState.value.index = navigationState.index;
+      })();
+    }, [navigationState]);
+
     const panGesture = React.useMemo(
       () =>
         Gesture.Pan()
-          .failOffsetY(-10)
-          .failOffsetY(10)
+          .failOffsetY([-10, 10])
           .activeOffsetX([-20, 20])
           .onChange((event) => {
             'worklet';
@@ -83,7 +90,7 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
               event,
               scrollPosition.value,
               width,
-              navigationState
+              _navigationState.value
             );
           })
           .onEnd((event) => {
@@ -92,18 +99,13 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
               event,
               minimumValueToChangeView,
               width,
-              navigationState
+              _navigationState.value
             );
             scrollPosition.value = AnimationHelper.animation(state.value);
-            runOnJS(onIndexChange)(state.index);
+            _navigationState.value.index = state.index;
+            runOnJS(navigate)(state.index);
           }),
-      [
-        minimumValueToChangeView,
-        navigationState,
-        onIndexChange,
-        scrollPosition,
-        width,
-      ]
+      [minimumValueToChangeView, width, _navigationState]
     );
 
     const scrollPositionStyle = useAnimatedStyle(() => ({
@@ -121,15 +123,15 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
 
     const jumpTo = React.useCallback(
       (key: string) => {
-        const newIndex = navigationState.routes.findIndex((r) => r.key === key);
+        const newIndex = navigationState.routes.findIndex(
+          (route) => route.key === key
+        );
         if (newIndex === -1) {
-          // throw
           return;
         }
         scrollPosition.value = AnimationHelper.animation(-newIndex * width);
-        onIndexChange(newIndex);
       },
-      [navigationState.routes, onIndexChange, scrollPosition, width]
+      [navigationState.routes, scrollPosition, width]
     );
 
     const chooseRender = useCallback(
@@ -171,7 +173,13 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
     return (
       <GestureHandlerRootView style={defaultStyles.flex}>
         <Reanimated.View layout={LinearTransition} style={defaultStyles.flex}>
-          {renderTabBar ? renderTabBar({ navigationState, position }) : null}
+          {renderTabBar
+            ? renderTabBar({
+                navigationState,
+                position,
+                navigate: _navigate,
+              })
+            : null}
           <GestureDetector gesture={panGesture}>
             <Reanimated.View
               layout={LinearTransition}

package/src/components/ReanimatedTopTab/types.ts

@@ -14,6 +14,7 @@ export namespace ReanimatedTabViewTypes {
   export interface RenderTabsParams {
     navigationState: NavigationState;
     position: SharedValue<number>;
+    navigate(index: number): void;
   }
 
   export interface SceneProps {
@@ -21,9 +22,5 @@ export namespace ReanimatedTabViewTypes {
     route: Route;
   }
 
-  export interface SceneMapRoutes {
-    [key: string]: React.ReactNode;
-  }
-
   export type PositionInterpolation = { input: number[]; output: number[] };
 }

package/src/components/elements/TabBarBaseComponent.tsx

@@ -3,38 +3,23 @@ import { Pressable, StyleSheet, Text, useWindowDimensions } from 'react-native';
 import Reanimated, {
   type AnimatedStyle,
   interpolate,
-  type SharedValue,
   useAnimatedReaction,
 } from 'react-native-reanimated';
 
 import { useTabContext } from '../../hooks/useTabContext';
+import { type ReanimatedTabViewTypes } from '../ReanimatedTopTab/types';
 
-export interface Route {
-  key: string;
-  name?: string;
-  tabBarLabel?: () => React.ReactNode;
-  title?: string;
-}
-
-export type NavigationState = { index: number; routes: Route[] };
-
-export interface RenderTabsParams {
-  navigationState: NavigationState;
-  position: SharedValue<number>;
-}
-
-export interface TabBarProps extends RenderTabsParams {
+export interface TabBarProps extends ReanimatedTabViewTypes.RenderTabsParams {
   children?: React.ReactNode;
-  navigate: (route: Route) => void;
   style?: AnimatedStyle;
 }
 
 export const TabBarBaseComponent = ({
   children,
-  navigate,
   navigationState,
   position,
   style,
+  navigate,
 }: TabBarProps) => {
   const layout = useWindowDimensions();
 
@@ -62,12 +47,12 @@ export const TabBarBaseComponent = ({
       }}
     >
       <Reanimated.View style={[styles.wrapper, style]}>
-        {navigationState.routes.map((route) => (
+        {navigationState.routes.map((route, index) => (
           <Pressable
             style={styles.labelWrapper}
             key={route.key}
             onPress={() => {
-              navigate(route);
+              navigate(index);
             }}
           >
             {route.tabBarLabel ? (

package/src/components/wrappers/GestureWrapper.tsx

@@ -47,8 +47,9 @@ export const GestureWrapper = ({ children }: GestureWrapperProps) => {
 
   useAnimatedReaction(
     () => gestureEnabled.value,
-    (nextValue) => {
-      runOnJS(setGestureEnabled)(nextValue);
+    (next, prev) => {
+      if (next === prev) return;
+      runOnJS(setGestureEnabled)(next);
     },
     []
   );
@@ -57,13 +58,9 @@ export const GestureWrapper = ({ children }: GestureWrapperProps) => {
     () =>
       Gesture.Pan()
         .activeOffsetY([-10, 10])
-        .onTouchesMove(({ state }, stateManager) => {
+        .onTouchesMove((_, stateManager) => {
           'worklet';
-          if (
-            currentScreenScrollOffset.value > 0 &&
-            state !== 4 &&
-            state !== 3
-          ) {
+          if (currentScreenScrollOffset.value > 0 || !gestureEnabled.value) {
             stateManager.fail();
           }
         })

package/src/context/Context.hooks.ts

@@ -276,8 +276,42 @@ const useTransformHeaderOnTabChange = ({
   };
 };
 
+const useApproachingTabChange = ({
+  config,
+  transformationX,
+  gestureEnabled,
+  currentScreenIndex,
+}: Pick<
+  ReanimatedTopTabNavigation.ContextType,
+  'config' | 'transformationX' | 'currentScreenIndex' | 'gestureEnabled'
+>) => {
+  const onIndexApproach = (index: number) => {
+    'worklet';
+    currentScreenIndex.value = index;
+    switch (config[index]) {
+      case 'normal': {
+        gestureEnabled.value = true;
+        break;
+      }
+      case 'minimalized': {
+        gestureEnabled.value = false;
+        break;
+      }
+    }
+  };
+
+  useAnimatedReaction(
+    () => transformationX.value,
+    (current, previous) => {
+      const approachingIndex = ContextHelpers.getTargetIndex(current, previous);
+      onIndexApproach(approachingIndex);
+    }
+  );
+};
+
 export const ContextHooks = {
   useResetApproachingScreenScrollOffset,
   usePrepareContext,
   useTransformHeaderOnTabChange,
+  useApproachingTabChange,
 };

package/src/context/Context.tsx

@@ -37,6 +37,13 @@ export const Provider = memo(
       context,
     });
 
+    ContextHooks.useApproachingTabChange({
+      config,
+      gestureEnabled,
+      transformationX,
+      currentScreenIndex,
+    });
+
     return (
       <Context.Provider
         value={{

package/src/navigator/createReanimatedTopTabNavigator.tsx

@@ -8,15 +8,12 @@ import {
 } from '@react-navigation/native';
 import type { DefaultRouterOptions } from '@react-navigation/routers';
 import { GestureWrapper } from '../components/wrappers/GestureWrapper';
-import {
-  type RenderTabsParams,
-  TabBarBaseComponent,
-} from '../components/elements/TabBarBaseComponent';
+import { TabBarBaseComponent } from '../components/elements/TabBarBaseComponent';
 import { Provider } from '../context/Context';
 import { type ReanimatedTopTabNavigation } from '../types';
 import { omit } from 'lodash';
-import { useCallback, useMemo } from 'react';
-import Reanimated, { type SharedValue } from 'react-native-reanimated';
+import { useMemo } from 'react';
+import Reanimated from 'react-native-reanimated';
 import type { ReanimatedTabViewTypes } from '../components/ReanimatedTopTab/types';
 import { ReanimatedTabView } from '../components/ReanimatedTopTab/ReanimatedTabView';
 import { ContextHooks } from '../context/Context.hooks';
@@ -51,26 +48,11 @@ const TabViewNavigator = ({
 
   const context = ContextHooks.usePrepareContext({ state });
 
-  //NOTE: all belows reefers to Tabs component directly. Consider to move it somewhere
-  const onIndexChange =
-    (
-      currentScreenIndex: SharedValue<number>,
-      gestureEnabled: SharedValue<boolean>
-    ) =>
-    (index: number) => {
-      navigation.navigate(state.routes[index]?.name ?? '');
-      currentScreenIndex.value = index;
-      switch (_config[index]) {
-        case 'normal': {
-          gestureEnabled.value = true;
-          break;
-        }
-        case 'minimalized': {
-          gestureEnabled.value = false;
-          break;
-        }
-      }
-    };
+  const navigate = (index: number) => {
+    const route = state.routes[index];
+    if (!route) return;
+    navigation.dispatch(TabActions.jumpTo(route.name));
+  };
 
   const navigationState = useMemo(
     () => ({
@@ -100,31 +82,12 @@ const TabViewNavigator = ({
     [state]
   );
 
-  const navigate = (route: any) => {
-    navigation.dispatch({
-      ...TabActions.jumpTo(route.name, route.params),
-      target: state.key,
-    });
-  };
-
-  const renderTabBar = useCallback(
-    (props: RenderTabsParams) => (
-      <TabBarComponent {...props} navigate={navigate} />
-    ),
-    []
-  );
-
   const renderScene = ({ route }: ReanimatedTabViewTypes.SceneProps) =>
     descriptors[route.key]?.render();
 
   return (
     <Provider config={_config} context={context}>
-      {({
-        currentScreenIndex,
-        gestureEnabled,
-        headerHeight,
-        transformationY,
-      }) => (
+      {({ headerHeight, transformationY }) => (
         <>
           <Reanimated.View
             onLayout={({ nativeEvent }) => {
@@ -142,12 +105,9 @@ const TabViewNavigator = ({
             <GestureWrapper>
               <ReanimatedTabView
                 navigationState={navigationState}
-                onIndexChange={onIndexChange(
-                  currentScreenIndex,
-                  gestureEnabled
-                )}
+                navigate={navigate}
                 renderScene={renderScene}
-                renderTabBar={renderTabBar}
+                renderTabBar={TabBarComponent}
               />
             </GestureWrapper>
           </NavigationContent>