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

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/components/wrappers/ScrollView.tsx

@@ -31,6 +31,7 @@ export const ScrollView = ({
     onScroll,
     bounces,
     animatedProps,
+    overScrollMode,
   } = useScreenScrollable();
   const { innerLayout } = useScreenProperties();
   const { context } = useTabContext();
@@ -58,6 +59,7 @@ export const ScrollView = ({
         onScroll={onScroll}
         bounces={bounces}
         animatedProps={animatedProps}
+        overScrollMode={overScrollMode}
         {...props}
       >
         {children}

package/src/context/Context.hooks.ts

@@ -13,7 +13,7 @@ import type {
   TabNavigationState,
 } from '@react-navigation/native';
 import { Gesture } from 'react-native-gesture-handler';
-import { assign } from 'lodash';
+import { assign, throttle } from 'lodash';
 import { ContextHelpers } from './Context.helpers';
 
 /**
@@ -205,6 +205,7 @@ const useTransformHeaderOnTabChange = ({
   config,
 }: Pick<ReanimatedTopTabNavigation.ContextType, 'config'>) => {
   const headerHeight = useSharedValue(0);
+  const isHeaderHeightSet = useSharedValue(false);
   const transformationY = useSharedValue(0);
   const transformationX = useSharedValue(0);
   const currentYPosition = useSharedValue(0);
@@ -230,6 +231,29 @@ const useTransformHeaderOnTabChange = ({
     [config]
   );
 
+  // NOTE: headerHeight is setting onLayout, so at very first render it has value equal 0,
+  // but right after the header content renders onLayout calls once again.
+  // That's why we use debounce
+  const debouncedSetIsHeaderSet = throttle(() => {
+    isHeaderHeightSet.value = true;
+  }, 10);
+
+  const cancel = () => {
+    debouncedSetIsHeaderSet.cancel();
+  };
+
+  useAnimatedReaction(
+    () => headerHeight.value,
+    (prepared, previous) => {
+      runOnJS(cancel)();
+
+      if (previous !== prepared) {
+        runOnJS(debouncedSetIsHeaderSet)();
+      }
+    },
+    []
+  );
+
   useAnimatedReaction(
     () => transformationX.value,
     (value) => {
@@ -243,7 +267,13 @@ const useTransformHeaderOnTabChange = ({
     }
   );
 
-  return { transformationY, transformationX, currentYPosition, headerHeight };
+  return {
+    transformationY,
+    transformationX,
+    currentYPosition,
+    headerHeight,
+    isHeaderHeightSet,
+  };
 };
 
 export const ContextHooks = {

package/src/context/Context.tsx

@@ -23,8 +23,13 @@ export const Provider = memo(
 
     const topTabNativeGesture = useRef(Gesture.Native()).current;
 
-    const { transformationX, transformationY, currentYPosition, headerHeight } =
-      ContextHooks.useTransformHeaderOnTabChange({ config });
+    const {
+      transformationX,
+      transformationY,
+      currentYPosition,
+      headerHeight,
+      isHeaderHeightSet,
+    } = ContextHooks.useTransformHeaderOnTabChange({ config });
 
     ContextHooks.useResetApproachingScreenScrollOffset({
       currentYPosition,
@@ -47,6 +52,7 @@ export const Provider = memo(
           transformationX,
           transformationY,
           context,
+          isHeaderHeightSet,
         }}
       >
         {children({
@@ -62,6 +68,7 @@ export const Provider = memo(
           transformationX,
           transformationY,
           context,
+          isHeaderHeightSet,
         })}
       </Context.Provider>
     );

package/src/hooks/useScreenScrollable.ts

@@ -25,6 +25,7 @@ export const useScreenScrollable = () => {
     context,
     topTabHeight,
     transformationY,
+    isHeaderHeightSet,
   } = useTabContext();
 
   const screen = useScreenProperties();
@@ -33,7 +34,8 @@ export const useScreenScrollable = () => {
 
   const animatedProps = useAnimatedProps(() => ({
     scrollEnabled:
-      !gestureEnabled.value || currentYPosition.value === -headerHeight.value,
+      isHeaderHeightSet.value &&
+      (!gestureEnabled.value || currentYPosition.value === -headerHeight.value),
   }));
 
   const onScroll = useAnimatedScrollHandler(({ contentOffset }) => {
@@ -69,6 +71,7 @@ export const useScreenScrollable = () => {
     bounces: false,
     contentContainerStyle: { paddingBottom: bottom },
     onScroll,
+    overScrollMode: 'never' as const,
     style,
   };
 };

package/src/navigator/createReanimatedTopTabNavigator.tsx

@@ -1,21 +1,17 @@
 import {
   createNavigatorFactory,
   type ParamListBase,
-  TabActions,
   type TabNavigationState,
   TabRouter,
   useNavigationBuilder,
 } 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 { useMemo } from 'react';
 import Reanimated, { type SharedValue } from 'react-native-reanimated';
 import type { ReanimatedTabViewTypes } from '../components/ReanimatedTopTab/types';
 import { ReanimatedTabView } from '../components/ReanimatedTopTab/ReanimatedTabView';
@@ -58,7 +54,6 @@ const TabViewNavigator = ({
       gestureEnabled: SharedValue<boolean>
     ) =>
     (index: number) => {
-      navigation.navigate(state.routes[index]?.name ?? '');
       currentScreenIndex.value = index;
       switch (_config[index]) {
         case 'normal': {
@@ -70,6 +65,7 @@ const TabViewNavigator = ({
           break;
         }
       }
+      navigation.navigate(state.routes[index]?.name ?? '');
     };
 
   const navigationState = useMemo(
@@ -100,20 +96,6 @@ 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();
 
@@ -147,7 +129,7 @@ const TabViewNavigator = ({
                   gestureEnabled
                 )}
                 renderScene={renderScene}
-                renderTabBar={renderTabBar}
+                renderTabBar={TabBarComponent}
               />
             </GestureWrapper>
           </NavigationContent>

package/src/types.ts

@@ -14,6 +14,7 @@ export namespace ReanimatedTopTabNavigation {
     currentYPosition: SharedValue<number>;
     gestureEnabled: SharedValue<boolean>;
     headerHeight: SharedValue<number>;
+    isHeaderHeightSet: SharedValue<boolean>;
     navHeight: SharedValue<number>;
     topTabHeight: SharedValue<number>;
     topTabNativeGesture: NativeGesture;