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

package/lib/typescript/src/types.d.ts

@@ -1,7 +1,7 @@
 import { TabBarBaseComponent } from './components/elements/TabBarBaseComponent';
 import * as React from 'react';
 import { type ReactNode } from 'react';
-import { type LayoutRectangle } from 'react-native';
+import { SectionList, type LayoutRectangle, type StyleProp, type ViewStyle } from 'react-native';
 import { type NativeGesture } from 'react-native-gesture-handler';
 import Reanimated, { type SharedValue } from 'react-native-reanimated';
 import { type StackNavigationOptions } from '@react-navigation/stack';
@@ -17,8 +17,9 @@ export declare namespace ReanimatedTopTabNavigation {
         navHeight: SharedValue<number>;
         topTabHeight: SharedValue<number>;
         topTabNativeGesture: NativeGesture;
-        transformationX: SharedValue<number>;
+        positionX: SharedValue<number>;
         transformationY: SharedValue<number>;
+        scrollY: SharedValue<number>;
         context: {
             screen: {
                 properties: Record<string, {
@@ -27,12 +28,12 @@ export declare namespace ReanimatedTopTabNavigation {
                     outerLayout: SharedValue<LayoutRectangle>;
                     scrollY: SharedValue<number>;
                     scrollRef: {
-                        current: Reanimated.ScrollView | null;
+                        current: Reanimated.ScrollView | SectionList | null;
                     };
                 }>;
-                setRef(key: string, ref: Reanimated.ScrollView | null): void;
+                setRef(key: string, ref: Reanimated.ScrollView | SectionList | null): void;
                 getRef(key: string): {
-                    current: Reanimated.ScrollView | null;
+                    current: Reanimated.ScrollView | SectionList | null;
                 };
             };
             route: {
@@ -43,11 +44,13 @@ export declare namespace ReanimatedTopTabNavigation {
     }
     interface TabViewNavigatorProps {
         HeaderComponent?: React.ComponentType<Pick<ContextType, 'transformationY' | 'headerHeight'>>;
+        TopComponent?: React.ComponentType<Pick<ContextType, 'transformationY'>>;
         TabBarComponent?: typeof TabBarBaseComponent;
         children: ReactNode;
         config?: string[];
         initialRouteName?: string;
         screenOptions?: StackNavigationOptions;
+        bounces?: boolean;
     }
     type TopTabContextProps = Pick<ContextType, 'config' | 'context'> & {
         children: (props: ContextType) => React.ReactNode;
@@ -59,6 +62,9 @@ export declare namespace ReanimatedTopTabNavigation {
             title: string;
         }) => React.ReactNode;
         title?: string;
+        tabBarIndicatorStyle?: StyleProp<ViewStyle>;
+        tabBarItemStyle?: StyleProp<ViewStyle>;
+        tabBarStyle?: StyleProp<ViewStyle>;
     }
 }
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAChF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,UAAU,EAAE,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,yBAAiB,0BAA0B,CAAC;IAC1C,UAAiB,WAAW;QAC1B,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;QACjC,MAAM,EAAE,MAAM,EAAE,CAAC;QACjB,kBAAkB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;QACxC,gBAAgB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;QACtC,cAAc,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QACrC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;QAClC,iBAAiB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QACxC,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;QAC/B,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;QAClC,mBAAmB,EAAE,aAAa,CAAC;QACnC,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;QACrC,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;QACrC,OAAO,EAAE;YACP,MAAM,EAAE;gBACN,UAAU,EAAE,MAAM,CAChB,MAAM,EACN;oBACE,WAAW,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;oBAC1C,aAAa,EAAE,aAAa,CAAC;oBAC7B,WAAW,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;oBAC1C,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;oBAC7B,SAAS,EAAE;wBAAE,OAAO,EAAE,UAAU,CAAC,UAAU,GAAG,IAAI,CAAA;qBAAE,CAAC;iBACtD,CACF,CAAC;gBACF,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,UAAU,CAAC,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;gBAC7D,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG;oBAAE,OAAO,EAAE,UAAU,CAAC,UAAU,GAAG,IAAI,CAAA;iBAAE,CAAC;aAChE,CAAC;YACF,KAAK,EAAE;gBACL,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;gBAC5B,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;aACvC,CAAC;SACH,CAAC;KACH;IAED,UAAiB,qBAAqB;QACpC,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CACnC,IAAI,CAAC,WAAW,EAAE,iBAAiB,GAAG,cAAc,CAAC,CACtD,CAAC;QACF,eAAe,CAAC,EAAE,OAAO,mBAAmB,CAAC;QAC7C,QAAQ,EAAE,SAAS,CAAC;QACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;QAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,aAAa,CAAC,EAAE,sBAAsB,CAAC;KACxC;IAED,KAAY,kBAAkB,GAAG,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,SAAS,CAAC,GAAG;QACzE,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,KAAK,CAAC,SAAS,CAAC;KACnD,CAAC;IAEF,UAAiB,iBAAiB;QAChC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;YACpB,OAAO,EAAE,OAAO,CAAC;YACjB,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;SACf,KAAK,KAAK,CAAC,SAAS,CAAC;QACtB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB;CACF"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation-reanimated-top-tabs",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "react-navigation-reanimated-top-tabs",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

package/src/components/ReanimatedTopTab/AnimationHelper.ts

@@ -4,7 +4,7 @@ import type {
   PanGestureChangeEventPayload,
   PanGestureHandlerEventPayload,
 } from 'react-native-gesture-handler';
-import { withTiming as reanimatedWithTiming } from 'react-native-reanimated';
+import { withTiming } from 'react-native-reanimated';
 
 type NavigationState = { size: number; index: number };
 
@@ -32,14 +32,18 @@ const getIndex = (
   type: 'increment' | 'decrement'
 ) => {
   'worklet';
-  if (type === 'increment') {
-    return navigationState.index === navigationState.size - 1
-      ? navigationState.index
-      : navigationState.index + 1;
+  const max = navigationState.size - 1;
+  const current = navigationState.index;
+
+  if (type === 'increment' && current < max) {
+    return current + 1;
+  }
+
+  if (type === 'decrement' && current > 0) {
+    return current - 1;
   }
-  return navigationState.index === 0
-    ? navigationState.index
-    : navigationState.index - 1;
+
+  return current;
 };
 
 const onEnd = (
@@ -49,43 +53,31 @@ const onEnd = (
   navigationState: NavigationState
 ) => {
   'worklet';
-  if (event.velocityX < -200) {
+  const { velocityX, translationX } = event;
+
+  if (velocityX < -200 || translationX < -minimumValueToChangeView) {
+    const newIndex = getIndex(navigationState, 'increment');
     return {
-      index: getIndex(navigationState, 'increment'),
-      value: -width * (navigationState.index + 1),
+      index: newIndex,
+      value: -width * newIndex,
     };
   }
-  if (event.velocityX > 200) {
+  if (velocityX > 200 || translationX > minimumValueToChangeView) {
+    const newIndex = getIndex(navigationState, 'decrement');
     return {
-      index: getIndex(navigationState, 'decrement'),
-      value: -width * (navigationState.index - 1),
+      index: newIndex,
+      value: -width * newIndex,
     };
   }
-  if (event.translationX < 0) {
-    if (event.translationX < -minimumValueToChangeView) {
-      return {
-        index: getIndex(navigationState, 'increment'),
-        value: -width * (navigationState.index + 1),
-      };
-    }
-  }
-  if (event.translationX > 0) {
-    if (event.translationX > minimumValueToChangeView) {
-      return {
-        index: getIndex(navigationState, 'decrement'),
-        value: -width * (navigationState.index - 1),
-      };
-    }
-  }
   return {
     index: navigationState.index,
     value: -width * navigationState.index,
   };
 };
 
-const animation = (newValue: number, duration = 200) => {
+const animation = (newValue: number, duration = 350) => {
   'worklet';
-  return reanimatedWithTiming(newValue, { duration });
+  return withTiming(newValue, { duration });
 };
 
 export const AnimationHelper = {

package/src/components/ReanimatedTopTab/ReanimatedTabView.tsx

@@ -6,15 +6,16 @@ import {
   GestureHandlerRootView,
 } from 'react-native-gesture-handler';
 import Reanimated, {
-  Extrapolation,
   interpolate,
   LinearTransition,
   runOnJS,
   runOnUI,
+  useAnimatedReaction,
   useAnimatedStyle,
-  useDerivedValue,
   useSharedValue,
 } from 'react-native-reanimated';
+import type { ReanimatedTopTabNavigation } from 'react-navigation-reanimated-top-tabs';
+import { useTabContext } from '../../hooks/useTabContext';
 import { AnimationHelper } from './AnimationHelper';
 import type { ReanimatedTabViewTypes } from './types';
 
@@ -23,12 +24,12 @@ export interface ReanimatedTabViewProps {
   lazy?: boolean;
   navigationState: ReanimatedTabViewTypes.NavigationState;
   percentageTrigger?: number;
-  positionInterpolation?: ReanimatedTabViewTypes.PositionInterpolation;
   renderScene: (params: ReanimatedTabViewTypes.SceneProps) => React.ReactNode;
   renderTabBar?: (
     params: ReanimatedTabViewTypes.RenderTabsParams
   ) => React.ReactNode;
   navigate(index: number): void;
+  screenOptions?: ReanimatedTopTabNavigation.NavigationOptions;
 }
 
 export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
@@ -37,28 +38,29 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
     lazy = false,
     navigationState,
     percentageTrigger = 0.4,
-    positionInterpolation,
     renderScene,
     renderTabBar,
     navigate,
+    screenOptions,
   }) => {
     const { width } = useWindowDimensions();
     const loadedScreens = useRef([
       navigationState.routes[navigationState.index],
     ]);
     const scrollPosition = useSharedValue(navigationState.index);
+    const { positionX } = useTabContext();
 
-    const position = useDerivedValue(() => {
-      if (!positionInterpolation) {
-        return -scrollPosition.value;
+    useAnimatedReaction(
+      () => scrollPosition.value,
+      (value) => {
+        positionX.value = interpolate(
+          value,
+          navigationState.routes.map((_, i) => i * -width),
+          navigationState.routes.map((_, i) => i),
+          'clamp'
+        );
       }
-      return interpolate(
-        -scrollPosition.value,
-        positionInterpolation.input,
-        positionInterpolation.output,
-        Extrapolation.CLAMP
-      );
-    }, [positionInterpolation]);
+    );
 
     const _navigate = (index: number) => {
       scrollPosition.value = AnimationHelper.animation(-index * width);
@@ -105,7 +107,7 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
             _navigationState.value.index = state.index;
             runOnJS(navigate)(state.index);
           }),
-      [minimumValueToChangeView, width, _navigationState]
+      [minimumValueToChangeView, width]
     );
 
     const scrollPositionStyle = useAnimatedStyle(() => ({
@@ -115,7 +117,7 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
             scrollPosition.value,
             [-width * (navigationState.routes.length - 1), 0],
             [-width * (navigationState.routes.length - 1), 0],
-            Extrapolation.CLAMP
+            'clamp'
           ),
         },
       ],
@@ -176,8 +178,8 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
           {renderTabBar
             ? renderTabBar({
                 navigationState,
-                position,
                 navigate: _navigate,
+                screenOptions,
               })
             : null}
           <GestureDetector gesture={panGesture}>

package/src/components/ReanimatedTopTab/types.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import type { SharedValue } from 'react-native-reanimated';
+import type { ReanimatedTopTabNavigation } from 'react-navigation-reanimated-top-tabs';
 
 export namespace ReanimatedTabViewTypes {
   export interface Route {
     key: string;
     name: string;
-    tabBarLabel?: () => React.ReactNode;
+    tabBarLabel?: (focused: boolean) => React.ReactNode;
     title?: string;
   }
 
@@ -13,14 +13,12 @@ export namespace ReanimatedTabViewTypes {
 
   export interface RenderTabsParams {
     navigationState: NavigationState;
-    position: SharedValue<number>;
     navigate(index: number): void;
+    screenOptions?: ReanimatedTopTabNavigation.NavigationOptions;
   }
 
   export interface SceneProps {
     jumpTo?: (key: string) => void;
     route: Route;
   }
-
-  export type PositionInterpolation = { input: number[]; output: number[] };
 }

package/src/components/elements/TabBarBaseComponent.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
-import { Pressable, StyleSheet, Text, useWindowDimensions } from 'react-native';
+import { StyleSheet } from 'react-native';
 import Reanimated, {
-  type AnimatedStyle,
   interpolate,
-  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+  type AnimatedStyle,
 } from 'react-native-reanimated';
 
 import { useTabContext } from '../../hooks/useTabContext';
 import { type ReanimatedTabViewTypes } from '../ReanimatedTopTab/types';
+import { TabBarBaseItem } from './TabBarBaseItem';
 
 export interface TabBarProps extends ReanimatedTabViewTypes.RenderTabsParams {
   children?: React.ReactNode;
@@ -17,28 +19,32 @@ export interface TabBarProps extends ReanimatedTabViewTypes.RenderTabsParams {
 export const TabBarBaseComponent = ({
   children,
   navigationState,
-  position,
   style,
   navigate,
+  screenOptions,
 }: TabBarProps) => {
-  const layout = useWindowDimensions();
+  const { topTabHeight, positionX } = useTabContext();
+  const width = useSharedValue(0);
 
-  const { topTabHeight, transformationX } = useTabContext();
+  const { tabBarIndicatorStyle, tabBarItemStyle, tabBarStyle } =
+    screenOptions ?? {};
 
-  //Assign interpolated offsetX to transformationX
-  useAnimatedReaction(
-    () =>
-      interpolate(
-        position.value,
-        navigationState.routes.map((_, i) => i * layout.width),
-        navigationState.routes.map((_, i) => i),
-        'clamp'
-      ),
-    (value) => {
-      transformationX.value = value;
-    },
-    [navigationState.routes]
-  );
+  const inputRange = navigationState.routes.map((_, index) => index);
+
+  const indicatorStyle = useAnimatedStyle(() => {
+    const outputRange = navigationState.routes.map(
+      (_, index) => index * (width.value / navigationState.routes.length)
+    );
+
+    return {
+      transform: [
+        {
+          translateX: interpolate(positionX.value, inputRange, outputRange),
+        },
+      ],
+      width: width.value / navigationState.routes.length,
+    };
+  });
 
   return (
     <Reanimated.View
@@ -46,21 +52,26 @@ export const TabBarBaseComponent = ({
         topTabHeight.value = nativeEvent.layout.height;
       }}
     >
-      <Reanimated.View style={[styles.wrapper, style]}>
+      <Reanimated.View
+        onLayout={({ nativeEvent }) => {
+          width.value = nativeEvent.layout.width;
+        }}
+        style={[styles.wrapper, tabBarStyle, style]}
+      >
+        <Reanimated.View
+          style={[styles.indicator, indicatorStyle, tabBarIndicatorStyle]}
+        />
         {navigationState.routes.map((route, index) => (
-          <Pressable
-            style={styles.labelWrapper}
+          <TabBarBaseItem
+            index={index}
+            inputRange={inputRange}
             key={route.key}
             onPress={() => {
               navigate(index);
             }}
-          >
-            {route.tabBarLabel ? (
-              route.tabBarLabel()
-            ) : (
-              <Text style={styles.label}>{route.title}</Text>
-            )}
-          </Pressable>
+            route={route}
+            style={tabBarItemStyle}
+          />
         ))}
       </Reanimated.View>
       {children}
@@ -75,14 +86,14 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  label: {
-    color: 'red',
-  },
   wrapper: {
-    width: '100%',
     flexDirection: 'row',
     backgroundColor: 'white',
-    paddingVertical: 8,
-    height: 50,
+  },
+  indicator: {
+    backgroundColor: 'black',
+    bottom: 0,
+    height: 2,
+    position: 'absolute',
   },
 });

package/src/components/elements/TabBarBaseItem.tsx

@@ -0,0 +1,76 @@
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Animated, {
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import { useTabContext } from '../../hooks/useTabContext';
+import { type ReanimatedTabViewTypes } from '../ReanimatedTopTab/types';
+
+interface TabBarBaseItemProps {
+  index: number;
+  inputRange: Array<number>;
+  onPress: (index: number) => void;
+  route: ReanimatedTabViewTypes.Route;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const TabBarBaseItem = ({
+  index,
+  inputRange,
+  onPress,
+  route,
+  style,
+}: TabBarBaseItemProps) => {
+  const { positionX } = useTabContext();
+
+  const activeStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(
+      positionX.value,
+      inputRange,
+      inputRange.map((i) => (i === index ? 1 : 0))
+    ),
+    position: 'absolute',
+  }));
+
+  const inactiveStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(
+      positionX.value,
+      inputRange,
+      inputRange.map((i) => (i === index ? 0 : 1))
+    ),
+  }));
+
+  return (
+    <Pressable onPress={() => onPress(index)} style={[styles.container, style]}>
+      <Animated.View style={activeStyle}>
+        {route.tabBarLabel ? (
+          route.tabBarLabel(true)
+        ) : (
+          <Text>{route.title}</Text>
+        )}
+      </Animated.View>
+      <Animated.View style={inactiveStyle}>
+        {route.tabBarLabel ? (
+          route.tabBarLabel(false)
+        ) : (
+          <Text>{route.title}</Text>
+        )}
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+    minHeight: 50,
+  },
+});

package/src/components/elements/TabBarLabelBaseComponent.tsx

@@ -16,12 +16,12 @@ export const TabBarLabelBaseComponent = ({
   index,
   ...props
 }: TabBarLabelTypes) => {
-  const transformationX = useTabOffset();
+  const positionX = useTabOffset();
 
   const style = useAnimatedStyle(
     () => ({
       backgroundColor: interpolateColor(
-        transformationX.value,
+        positionX.value,
         [index - 1, index, index + 1],
         ['transparent', 'blue', 'transparent']
       ),
@@ -32,7 +32,7 @@ export const TabBarLabelBaseComponent = ({
   const textStyle = useAnimatedStyle(
     () => ({
       color: interpolateColor(
-        transformationX.value,
+        positionX.value,
         [index - 1, index, index + 1],
         ['black', 'white', 'black']
       ),

package/src/components/wrappers/GestureWrapper.tsx

@@ -2,7 +2,6 @@ import React, { useMemo, useRef, useState } from 'react';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Reanimated, {
   Easing,
-  interpolate,
   runOnJS,
   useAnimatedReaction,
   useAnimatedStyle,
@@ -12,12 +11,19 @@ import Reanimated, {
 } from 'react-native-reanimated';
 
 import { useTabContext } from '../../hooks/useTabContext';
+import { Platform, StyleSheet, View } from 'react-native';
 
 interface GestureWrapperProps {
   children: React.ReactNode;
+  bounces?: boolean;
 }
 
-export const GestureWrapper = ({ children }: GestureWrapperProps) => {
+export const GestureWrapper = ({ children, bounces }: GestureWrapperProps) => {
+  const _bounces = Platform.select({
+    ios: bounces,
+    default: false,
+  });
+
   const {
     context,
     currentScreenIndex,
@@ -25,6 +31,7 @@ export const GestureWrapper = ({ children }: GestureWrapperProps) => {
     gestureEnabled,
     headerHeight,
     transformationY,
+    scrollY,
   } = useTabContext();
 
   const movedY = useSharedValue(0);
@@ -105,26 +112,46 @@ export const GestureWrapper = ({ children }: GestureWrapperProps) => {
     [_gestureEnabled]
   );
 
-  const style = useAnimatedStyle(
-    () => ({
+  useAnimatedReaction(
+    () => {
+      if (transformationY.value > 0) {
+        if (_bounces) return transformationY.value * -0.3;
+        else return 0;
+      }
+      if (transformationY.value < -headerHeight.value) {
+        return headerHeight.value;
+      }
+
+      return -transformationY.value;
+    },
+    (value) => {
+      scrollY.value = value;
+    }
+  );
+
+  const style = useAnimatedStyle(() => {
+    return {
       flex: 1,
       transform: [
         {
-          translateY: interpolate(
-            transformationY.value,
-            [0, -headerHeight.value],
-            [0, -headerHeight.value],
-            'clamp'
-          ),
+          translateY: scrollY.value * -1,
         },
       ],
-    }),
-    []
-  );
+    };
+  }, []);
 
   return (
     <GestureDetector gesture={gesture}>
-      <Reanimated.View style={style}>{children}</Reanimated.View>
+      <View style={styles.container}>
+        <Reanimated.View style={style}>{children}</Reanimated.View>
+      </View>
     </GestureDetector>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    flex: 1,
+  },
+});