react-navigation-reanimated-top-tabs 0.6.1 → 0.7.0

package/src/components/ReanimatedTopTab/AnimationHelper.ts

@@ -5,7 +5,8 @@ import type {
   PanGestureHandlerEventPayload,
 } from 'react-native-gesture-handler';
 import { withTiming as reanimatedWithTiming } from 'react-native-reanimated';
-import type { ReanimatedTabViewTypes } from './types';
+
+type NavigationState = { size: number; index: number };
 
 const onChange = (
   event: GestureUpdateEvent<
@@ -13,13 +14,13 @@ const onChange = (
   >,
   animationValue: number,
   width: number,
-  navigationState: ReanimatedTabViewTypes.NavigationState
+  navigationState: NavigationState
 ) => {
   'worklet';
   if (animationValue > 0) {
     return 0;
   }
-  const routesLength = navigationState.routes.length - 1;
+  const routesLength = navigationState.size - 1;
   if (animationValue < -width * routesLength) {
     return -width * routesLength;
   }
@@ -27,12 +28,12 @@ const onChange = (
 };
 
 const getIndex = (
-  navigationState: ReanimatedTabViewTypes.NavigationState,
+  navigationState: NavigationState,
   type: 'increment' | 'decrement'
 ) => {
   'worklet';
   if (type === 'increment') {
-    return navigationState.index === navigationState.routes.length - 1
+    return navigationState.index === navigationState.size - 1
       ? navigationState.index
       : navigationState.index + 1;
   }
@@ -45,7 +46,7 @@ const onEnd = (
   event: GestureStateChangeEvent<PanGestureHandlerEventPayload>,
   minimumValueToChangeView: number,
   width: number,
-  navigationState: ReanimatedTabViewTypes.NavigationState
+  navigationState: NavigationState
 ) => {
   'worklet';
   if (event.velocityX < -200) {

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,11 +36,11 @@ 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([
@@ -59,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';
@@ -82,7 +90,7 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
               event,
               scrollPosition.value,
               width,
-              navigationState
+              _navigationState.value
             );
           })
           .onEnd((event) => {
@@ -91,12 +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, width]
+      [minimumValueToChangeView, width, _navigationState]
     );
 
     const scrollPositionStyle = useAnimatedStyle(() => ({
@@ -121,9 +130,8 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
           return;
         }
         scrollPosition.value = AnimationHelper.animation(-newIndex * width);
-        onIndexChange(newIndex);
       },
-      [navigationState.routes, onIndexChange, scrollPosition, width]
+      [navigationState.routes, scrollPosition, width]
     );
 
     const chooseRender = useCallback(
@@ -166,7 +174,11 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
       <GestureHandlerRootView style={defaultStyles.flex}>
         <Reanimated.View layout={LinearTransition} style={defaultStyles.flex}>
           {renderTabBar
-            ? renderTabBar({ navigationState, position, onIndexChange })
+            ? renderTabBar({
+                navigationState,
+                position,
+                navigate: _navigate,
+              })
             : null}
           <GestureDetector gesture={panGesture}>
             <Reanimated.View

package/src/components/ReanimatedTopTab/types.ts

@@ -14,7 +14,7 @@ export namespace ReanimatedTabViewTypes {
   export interface RenderTabsParams {
     navigationState: NavigationState;
     position: SharedValue<number>;
-    onIndexChange: (index: number) => void;
+    navigate(index: number): void;
   }
 
   export interface SceneProps {

package/src/components/elements/TabBarBaseComponent.tsx

@@ -19,7 +19,7 @@ export const TabBarBaseComponent = ({
   navigationState,
   position,
   style,
-  onIndexChange,
+  navigate,
 }: TabBarProps) => {
   const layout = useWindowDimensions();
 
@@ -52,7 +52,7 @@ export const TabBarBaseComponent = ({
             style={styles.labelWrapper}
             key={route.key}
             onPress={() => {
-              onIndexChange(index);
+              navigate(index);
             }}
           >
             {route.tabBarLabel ? (

package/src/components/wrappers/GestureWrapper.tsx

@@ -43,7 +43,7 @@ export const GestureWrapper = ({ children }: GestureWrapperProps) => {
     easing: Easing.bezier(0.25, 0.1, 0.25, 1),
   } as const;
 
-  const [_gestureEnabled, setGestureEnabled] = useState(gestureEnabled.value);
+  const [_gestureEnabled, setGestureEnabled] = useState(true);
 
   useAnimatedReaction(
     () => gestureEnabled.value,

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/hooks/useScreenDimensions.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+import { Dimensions } from 'react-native';
+
+const screenDimensions = Dimensions.get('screen');
+
+export const useScreenDimensions = () => {
+  const [dimensions, setDimensions] = useState(screenDimensions);
+
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener('change', ({ screen }) => {
+      setDimensions(screen);
+    });
+    return () => subscription?.remove();
+  });
+
+  return dimensions;
+};

package/src/hooks/useScreenScrollable.ts

@@ -1,5 +1,4 @@
 import { useRoute } from '@react-navigation/native';
-import { useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTabContext } from './useTabContext';
 import * as React from 'react';
@@ -13,10 +12,11 @@ import {
 } from 'react-native-reanimated';
 
 import { useScreenProperties } from './useScreenProperties';
+import { useScreenDimensions } from './useScreenDimensions';
 
 export const useScreenScrollable = () => {
   const { key } = useRoute();
-  const { height } = useWindowDimensions();
+  const { height } = useScreenDimensions();
   const { bottom, top } = useSafeAreaInsets();
   const {
     currentYPosition,

package/src/navigator/createReanimatedTopTabNavigator.tsx

@@ -1,6 +1,7 @@
 import {
   createNavigatorFactory,
   type ParamListBase,
+  TabActions,
   type TabNavigationState,
   TabRouter,
   useNavigationBuilder,
@@ -12,7 +13,7 @@ import { Provider } from '../context/Context';
 import { type ReanimatedTopTabNavigation } from '../types';
 import { omit } from 'lodash';
 import { useMemo } from 'react';
-import Reanimated, { type SharedValue } from 'react-native-reanimated';
+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';
@@ -47,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) => {
-      currentScreenIndex.value = index;
-      switch (_config[index]) {
-        case 'normal': {
-          gestureEnabled.value = true;
-          break;
-        }
-        case 'minimalized': {
-          gestureEnabled.value = false;
-          break;
-        }
-      }
-      navigation.navigate(state.routes[index]?.name ?? '');
-    };
+  const navigate = (index: number) => {
+    const route = state.routes[index];
+    if (!route) return;
+    navigation.dispatch(TabActions.jumpTo(route.name));
+  };
 
   const navigationState = useMemo(
     () => ({
@@ -101,12 +87,7 @@ const TabViewNavigator = ({
 
   return (
     <Provider config={_config} context={context}>
-      {({
-        currentScreenIndex,
-        gestureEnabled,
-        headerHeight,
-        transformationY,
-      }) => (
+      {({ headerHeight, transformationY }) => (
         <>
           <Reanimated.View
             onLayout={({ nativeEvent }) => {
@@ -124,10 +105,7 @@ const TabViewNavigator = ({
             <GestureWrapper>
               <ReanimatedTabView
                 navigationState={navigationState}
-                onIndexChange={onIndexChange(
-                  currentScreenIndex,
-                  gestureEnabled
-                )}
+                navigate={navigate}
                 renderScene={renderScene}
                 renderTabBar={TabBarComponent}
               />