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

package/src/components/ReanimatedTopTab/ReanimatedTabView.tsx

@@ -6,16 +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';
 
@@ -24,7 +24,6 @@ export interface ReanimatedTabViewProps {
   lazy?: boolean;
   navigationState: ReanimatedTabViewTypes.NavigationState;
   percentageTrigger?: number;
-  positionInterpolation?: ReanimatedTabViewTypes.PositionInterpolation;
   renderScene: (params: ReanimatedTabViewTypes.SceneProps) => React.ReactNode;
   renderTabBar?: (
     params: ReanimatedTabViewTypes.RenderTabsParams
@@ -39,7 +38,6 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
     lazy = false,
     navigationState,
     percentageTrigger = 0.4,
-    positionInterpolation,
     renderScene,
     renderTabBar,
     navigate,
@@ -50,18 +48,19 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
       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);
@@ -108,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(() => ({
@@ -118,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'
           ),
         },
       ],
@@ -179,7 +178,6 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
           {renderTabBar
             ? renderTabBar({
                 navigationState,
-                position,
                 navigate: _navigate,
                 screenOptions,
               })

package/src/components/ReanimatedTopTab/types.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { SharedValue } from 'react-native-reanimated';
 import type { ReanimatedTopTabNavigation } from 'react-navigation-reanimated-top-tabs';
 
 export namespace ReanimatedTabViewTypes {
@@ -14,7 +13,6 @@ export namespace ReanimatedTabViewTypes {
 
   export interface RenderTabsParams {
     navigationState: NavigationState;
-    position: SharedValue<number>;
     navigate(index: number): void;
     screenOptions?: ReanimatedTopTabNavigation.NavigationOptions;
   }
@@ -23,6 +21,4 @@ export namespace ReanimatedTabViewTypes {
     jumpTo?: (key: string) => void;
     route: Route;
   }
-
-  export type PositionInterpolation = { input: number[]; output: number[] };
 }

package/src/components/elements/TabBarBaseComponent.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { StyleSheet, useWindowDimensions } from 'react-native';
+import { StyleSheet } from 'react-native';
 import Reanimated, {
   interpolate,
-  useAnimatedReaction,
   useAnimatedStyle,
   useSharedValue,
   type AnimatedStyle,
@@ -20,13 +19,11 @@ export interface TabBarProps extends ReanimatedTabViewTypes.RenderTabsParams {
 export const TabBarBaseComponent = ({
   children,
   navigationState,
-  position,
   style,
   navigate,
   screenOptions,
 }: TabBarProps) => {
-  const layout = useWindowDimensions();
-  const { topTabHeight, transformationX } = useTabContext();
+  const { topTabHeight, positionX } = useTabContext();
   const width = useSharedValue(0);
 
   const { tabBarIndicatorStyle, tabBarItemStyle, tabBarStyle } =
@@ -42,32 +39,13 @@ export const TabBarBaseComponent = ({
     return {
       transform: [
         {
-          translateX: interpolate(
-            transformationX.value,
-            inputRange,
-            outputRange
-          ),
+          translateX: interpolate(positionX.value, inputRange, outputRange),
         },
       ],
       width: width.value / navigationState.routes.length,
     };
   });
 
-  //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]
-  );
-
   return (
     <Reanimated.View
       onLayout={({ nativeEvent }) => {
@@ -87,7 +65,6 @@ export const TabBarBaseComponent = ({
           <TabBarBaseItem
             index={index}
             inputRange={inputRange}
-            position={transformationX}
             key={route.key}
             onPress={() => {
               navigate(index);

package/src/components/elements/TabBarBaseItem.tsx

@@ -6,14 +6,13 @@ import {
   type ViewStyle,
 } from 'react-native';
 import Animated, {
-  type SharedValue,
-  useAnimatedStyle,
   interpolate,
+  useAnimatedStyle,
 } from 'react-native-reanimated';
+import { useTabContext } from '../../hooks/useTabContext';
 import { type ReanimatedTabViewTypes } from '../ReanimatedTopTab/types';
 
 interface TabBarBaseItemProps {
-  position: SharedValue<number>;
   index: number;
   inputRange: Array<number>;
   onPress: (index: number) => void;
@@ -22,16 +21,17 @@ interface TabBarBaseItemProps {
 }
 
 export const TabBarBaseItem = ({
-  position,
   index,
   inputRange,
   onPress,
   route,
   style,
 }: TabBarBaseItemProps) => {
+  const { positionX } = useTabContext();
+
   const activeStyle = useAnimatedStyle(() => ({
     opacity: interpolate(
-      position.value,
+      positionX.value,
       inputRange,
       inputRange.map((i) => (i === index ? 1 : 0))
     ),
@@ -40,7 +40,7 @@ export const TabBarBaseItem = ({
 
   const inactiveStyle = useAnimatedStyle(() => ({
     opacity: interpolate(
-      position.value,
+      positionX.value,
       inputRange,
       inputRange.map((i) => (i === index ? 0 : 1))
     ),

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,13 +11,19 @@ import Reanimated, {
 } from 'react-native-reanimated';
 
 import { useTabContext } from '../../hooks/useTabContext';
-import { StyleSheet, View } from 'react-native';
+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,
@@ -26,6 +31,7 @@ export const GestureWrapper = ({ children }: GestureWrapperProps) => {
     gestureEnabled,
     headerHeight,
     transformationY,
+    scrollY,
   } = useTabContext();
 
   const movedY = useSharedValue(0);
@@ -106,22 +112,33 @@ 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}>

package/src/context/Context.hooks.ts

@@ -22,7 +22,7 @@ import { SectionList } from 'react-native';
  *
  * @param {Object} params - The parameters for configuring the scroll offset reset.
  * @param {ReanimatedTopTabNavigation.ContextType["context"]} params.context - The context containing navigation and screen information.
- * @param {ReanimatedTopTabNavigation.ContextType["transformationX"]} params.transformationX - The horizontal transformation value used in animations.
+ * @param {ReanimatedTopTabNavigation.ContextType["positionX"]} params.positionX - The horizontal transformation value used in animations.
  * @param {ReanimatedTopTabNavigation.ContextType["currentYPosition"]} params.currentYPosition - The current vertical scroll position.
  *
  * The hook is responsible for resetting the vertical scroll offset of the "approaching" screen within a tabbed navigation interface,
@@ -32,11 +32,11 @@ import { SectionList } from 'react-native';
  */
 const useResetApproachingScreenScrollOffset = ({
   context,
-  transformationX,
+  positionX,
   currentYPosition,
 }: Pick<
   ReanimatedTopTabNavigation.ContextType,
-  'context' | 'currentYPosition' | 'transformationX'
+  'context' | 'currentYPosition' | 'positionX'
 >) => {
   const screenOffsets = useDerivedValue(() =>
     Object.values(context.screen.properties).map(({ scrollY }) => scrollY.value)
@@ -63,7 +63,7 @@ const useResetApproachingScreenScrollOffset = ({
   };
 
   useAnimatedReaction(
-    () => transformationX.value,
+    () => positionX.value,
     (current, previous) => {
       const approachingIndex = ContextHelpers.getTargetIndex(current, previous);
 
@@ -205,7 +205,7 @@ const usePrepareContext = ({
  * @param {Array} params.config - An array of configuration settings to determine the header's transformation.
  * @returns {Object} An object containing shared values for header transformations and positioning:
  * - transformationY: The derived Y-axis transformation value for the header.
- * - transformationX: The shared X-axis transformation value to be observed.
+ * - positionX: The shared X-axis transformation value to be observed.
  * - currentYPosition: The shared Y-axis position of the header.
  * - headerHeight: The shared height value of the header.
  */
@@ -215,7 +215,8 @@ const useTransformHeaderOnTabChange = ({
   const headerHeight = useSharedValue(0);
   const isHeaderHeightSet = useSharedValue(false);
   const transformationY = useSharedValue(0);
-  const transformationX = useSharedValue(0);
+  const scrollY = useSharedValue(0);
+  const positionX = useSharedValue(0);
   const currentYPosition = useSharedValue(0);
 
   //Hide header base on config
@@ -263,7 +264,7 @@ const useTransformHeaderOnTabChange = ({
   );
 
   useAnimatedReaction(
-    () => transformationX.value,
+    () => positionX.value,
     (value) => {
       if (currentYPosition.value === -headerHeight.value) return;
       transformationY.value = interpolate(
@@ -277,21 +278,22 @@ const useTransformHeaderOnTabChange = ({
 
   return {
     transformationY,
-    transformationX,
+    positionX,
     currentYPosition,
     headerHeight,
     isHeaderHeightSet,
+    scrollY,
   };
 };
 
 const useApproachingTabChange = ({
   config,
-  transformationX,
+  positionX,
   gestureEnabled,
   currentScreenIndex,
 }: Pick<
   ReanimatedTopTabNavigation.ContextType,
-  'config' | 'transformationX' | 'currentScreenIndex' | 'gestureEnabled'
+  'config' | 'positionX' | 'currentScreenIndex' | 'gestureEnabled'
 >) => {
   const onIndexApproach = (index: number) => {
     'worklet';
@@ -309,7 +311,7 @@ const useApproachingTabChange = ({
   };
 
   useAnimatedReaction(
-    () => transformationX.value,
+    () => positionX.value,
     (current, previous) => {
       const approachingIndex = ContextHelpers.getTargetIndex(current, previous);
       onIndexApproach(approachingIndex);

package/src/context/Context.tsx

@@ -24,23 +24,24 @@ export const Provider = memo(
     const topTabNativeGesture = useRef(Gesture.Native()).current;
 
     const {
-      transformationX,
+      positionX,
       transformationY,
       currentYPosition,
       headerHeight,
       isHeaderHeightSet,
+      scrollY,
     } = ContextHooks.useTransformHeaderOnTabChange({ config });
 
     ContextHooks.useResetApproachingScreenScrollOffset({
       currentYPosition,
-      transformationX,
+      positionX,
       context,
     });
 
     ContextHooks.useApproachingTabChange({
       config,
       gestureEnabled,
-      transformationX,
+      positionX,
       currentScreenIndex,
     });
 
@@ -56,10 +57,11 @@ export const Provider = memo(
           navHeight,
           topTabHeight,
           topTabNativeGesture,
-          transformationX,
+          positionX,
           transformationY,
           context,
           isHeaderHeightSet,
+          scrollY,
         }}
       >
         {children({
@@ -72,10 +74,11 @@ export const Provider = memo(
           navHeight,
           topTabHeight,
           topTabNativeGesture,
-          transformationX,
+          positionX,
           transformationY,
           context,
           isHeaderHeightSet,
+          scrollY,
         })}
       </Context.Provider>
     );

package/src/hooks/useHeader.ts

@@ -2,10 +2,10 @@ import { useTabContext } from './useTabContext';
 import { withTiming } from 'react-native-reanimated';
 
 export const useHeader = () => {
-  const { headerHeight, transformationX } = useTabContext();
+  const { headerHeight, transformationY } = useTabContext();
 
   const hideHeader = () => {
-    transformationX.value = withTiming(-headerHeight.value);
+    transformationY.value = withTiming(-headerHeight.value);
   };
 
   return { hideHeader };

package/src/hooks/useTabOffset.ts

@@ -3,6 +3,6 @@ import { useTabContext } from './useTabContext';
 import { useDerivedValue } from 'react-native-reanimated';
 
 export const useTabOffset = () => {
-  const { transformationX } = useTabContext();
-  return useDerivedValue(() => transformationX.value);
+  const { positionX } = useTabContext();
+  return useDerivedValue(() => positionX.value);
 };

package/src/navigator/createReanimatedTopTabNavigator.tsx

@@ -26,6 +26,7 @@ const TabViewNavigator = ({
   config,
   initialRouteName,
   screenOptions = {},
+  bounces,
 }: ReanimatedTopTabNavigation.TabViewNavigatorProps) => {
   const { NavigationContent, descriptors, navigation, state } =
     useNavigationBuilder<
@@ -94,7 +95,7 @@ const TabViewNavigator = ({
           {TopComponent ? (
             <TopComponent transformationY={transformationY} />
           ) : null}
-          <GestureWrapper>
+          <GestureWrapper bounces={bounces}>
             <Reanimated.View
               onLayout={({ nativeEvent }) => {
                 headerHeight.value = nativeEvent.layout.height;

package/src/types.ts

@@ -23,8 +23,9 @@ export 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<
@@ -62,6 +63,7 @@ export namespace ReanimatedTopTabNavigation {
     config?: string[];
     initialRouteName?: string;
     screenOptions?: StackNavigationOptions;
+    bounces?: boolean;
   }
 
   export type TopTabContextProps = Pick<ContextType, 'config' | 'context'> & {