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

package/lib/module/components/ReanimatedTopTab/ReanimatedTabView.js

@@ -3,7 +3,8 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
-import Reanimated, { Extrapolation, interpolate, LinearTransition, runOnJS, runOnUI, useAnimatedStyle, useDerivedValue, useSharedValue } from 'react-native-reanimated';
+import Reanimated, { interpolate, LinearTransition, runOnJS, runOnUI, useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { useTabContext } from '../../hooks/useTabContext';
 import { AnimationHelper } from './AnimationHelper';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ReanimatedTabView = /*#__PURE__*/React.memo(({
@@ -11,22 +12,22 @@ export const ReanimatedTabView = /*#__PURE__*/React.memo(({
   lazy = false,
   navigationState,
   percentageTrigger = 0.4,
-  positionInterpolation,
   renderScene,
   renderTabBar,
-  navigate
+  navigate,
+  screenOptions
 }) => {
   const {
     width
   } = useWindowDimensions();
   const loadedScreens = useRef([navigationState.routes[navigationState.index]]);
   const scrollPosition = useSharedValue(navigationState.index);
-  const position = useDerivedValue(() => {
-    if (!positionInterpolation) {
-      return -scrollPosition.value;
-    }
-    return interpolate(-scrollPosition.value, positionInterpolation.input, positionInterpolation.output, Extrapolation.CLAMP);
-  }, [positionInterpolation]);
+  const {
+    positionX
+  } = useTabContext();
+  useAnimatedReaction(() => scrollPosition.value, value => {
+    positionX.value = interpolate(value, navigationState.routes.map((_, i) => i * -width), navigationState.routes.map((_, i) => i), 'clamp');
+  });
   const _navigate = index => {
     scrollPosition.value = AnimationHelper.animation(-index * width);
     navigate(index);
@@ -53,10 +54,10 @@ export const ReanimatedTabView = /*#__PURE__*/React.memo(({
     scrollPosition.value = AnimationHelper.animation(state.value);
     _navigationState.value.index = state.index;
     runOnJS(navigate)(state.index);
-  }), [minimumValueToChangeView, width, _navigationState]);
+  }), [minimumValueToChangeView, width]);
   const scrollPositionStyle = useAnimatedStyle(() => ({
     transform: [{
-      translateX: interpolate(scrollPosition.value, [-width * (navigationState.routes.length - 1), 0], [-width * (navigationState.routes.length - 1), 0], Extrapolation.CLAMP)
+      translateX: interpolate(scrollPosition.value, [-width * (navigationState.routes.length - 1), 0], [-width * (navigationState.routes.length - 1), 0], 'clamp')
     }]
   }));
   const jumpTo = React.useCallback(key => {
@@ -105,8 +106,8 @@ export const ReanimatedTabView = /*#__PURE__*/React.memo(({
       style: defaultStyles.flex,
       children: [renderTabBar ? renderTabBar({
         navigationState,
-        position,
-        navigate: _navigate
+        navigate: _navigate,
+        screenOptions
       }) : null, /*#__PURE__*/_jsx(GestureDetector, {
         gesture: panGesture,
         children: /*#__PURE__*/_jsx(Reanimated.View, {

package/lib/module/components/ReanimatedTopTab/ReanimatedTabView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","StyleSheet","useWindowDimensions","View","Gesture","GestureDetector","GestureHandlerRootView","Reanimated","Extrapolation","interpolate","LinearTransition","runOnJS","runOnUI","useAnimatedStyle","useDerivedValue","useSharedValue","AnimationHelper","jsx","_jsx","jsxs","_jsxs","ReanimatedTabView","memo","LazyPlaceholder","lazy","navigationState","percentageTrigger","positionInterpolation","renderScene","renderTabBar","navigate","width","loadedScreens","routes","index","scrollPosition","position","value","input","output","CLAMP","_navigate","animation","minimumValueToChangeView","_navigationState","size","length","panGesture","Pan","failOffsetY","activeOffsetX","onChange","event","onEnd","state","scrollPositionStyle","transform","translateX","jumpTo","key","newIndex","findIndex","route","chooseRender","params","useRenderScene","style","children","Routes","map","screen","current","find","loadedScreen","undefined","push","defaultStyles","flex","layout","gesture","viewsContainer","create","flexDirection"],"sourceRoot":"../../../../src","sources":["components/ReanimatedTopTab/ReanimatedTabView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACtE,SAASC,UAAU,EAAEC,mBAAmB,EAAEC,IAAI,QAAQ,cAAc;AACpE,SACEC,OAAO,EACPC,eAAe,EACfC,sBAAsB,QACjB,8BAA8B;AACrC,OAAOC,UAAU,IACfC,aAAa,EACbC,WAAW,EACXC,gBAAgB,EAChBC,OAAO,EACPC,OAAO,EACPC,gBAAgB,EAChBC,eAAe,EACfC,cAAc,QACT,yBAAyB;AAChC,SAASC,eAAe,QAAQ,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAgBpD,OAAO,MAAMC,iBAAiB,gBAAGzB,KAAK,CAAC0B,IAAI,CACzC,CAAC;EACCC,eAAe,GAAGA,CAAA,KAAM,IAAI;EAC5BC,IAAI,GAAG,KAAK;EACZC,eAAe;EACfC,iBAAiB,GAAG,GAAG;EACvBC,qBAAqB;EACrBC,WAAW;EACXC,YAAY;EACZC;AACF,CAAC,KAAK;EACJ,MAAM;IAAEC;EAAM,CAAC,GAAG7B,mBAAmB,CAAC,CAAC;EACvC,MAAM8B,aAAa,GAAGhC,MAAM,CAAC,CAC3ByB,eAAe,CAACQ,MAAM,CAACR,eAAe,CAACS,KAAK,CAAC,CAC9C,CAAC;EACF,MAAMC,cAAc,GAAGpB,cAAc,CAACU,eAAe,CAACS,KAAK,CAAC;EAE5D,MAAME,QAAQ,GAAGtB,eAAe,CAAC,MAAM;IACrC,IAAI,CAACa,qBAAqB,EAAE;MAC1B,OAAO,CAACQ,cAAc,CAACE,KAAK;IAC9B;IACA,OAAO5B,WAAW,CAChB,CAAC0B,cAAc,CAACE,KAAK,EACrBV,qBAAqB,CAACW,KAAK,EAC3BX,qBAAqB,CAACY,MAAM,EAC5B/B,aAAa,CAACgC,KAChB,CAAC;EACH,CAAC,EAAE,CAACb,qBAAqB,CAAC,CAAC;EAE3B,MAAMc,SAAS,GAAIP,KAAa,IAAK;IACnCC,cAAc,CAACE,KAAK,GAAGrB,eAAe,CAAC0B,SAAS,CAAC,CAACR,KAAK,GAAGH,KAAK,CAAC;IAChED,QAAQ,CAACI,KAAK,CAAC;EACjB,CAAC;EAED,MAAMS,wBAAwB,GAAG5C,OAAO,CACtC,MAAMgC,KAAK,GAAGL,iBAAiB,EAC/B,CAACA,iBAAiB,EAAEK,KAAK,CAC3B,CAAC;EAED,MAAMa,gBAAgB,GAAG7B,cAAc,CAAC;IAAE8B,IAAI,EAAE,CAAC;IAAEX,KAAK,EAAE;EAAE,CAAC,CAAC;EAE9DpC,SAAS,CAAC,MAAM;IACdc,OAAO,CAAC,MAAM;MACZgC,gBAAgB,CAACP,KAAK,CAACQ,IAAI,GAAGpB,eAAe,CAACQ,MAAM,CAACa,MAAM;MAC3DF,gBAAgB,CAACP,KAAK,CAACH,KAAK,GAAGT,eAAe,CAACS,KAAK;IACtD,CAAC,CAAC,CAAC,CAAC;EACN,CAAC,EAAE,CAACT,eAAe,CAAC,CAAC;EAErB,MAAMsB,UAAU,GAAGnD,KAAK,CAACG,OAAO,CAC9B,MACEK,OAAO,CAAC4C,GAAG,CAAC,CAAC,CACVC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CACtBC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CACxBC,QAAQ,CAAEC,KAAK,IAAK;IACnB,SAAS;;IACTjB,cAAc,CAACE,KAAK,GAAGrB,eAAe,CAACmC,QAAQ,CAC7CC,KAAK,EACLjB,cAAc,CAACE,KAAK,EACpBN,KAAK,EACLa,gBAAgB,CAACP,KACnB,CAAC;EACH,CAAC,CAAC,CACDgB,KAAK,CAAED,KAAK,IAAK;IAChB,SAAS;;IACT,MAAME,KAAK,GAAGtC,eAAe,CAACqC,KAAK,CACjCD,KAAK,EACLT,wBAAwB,EACxBZ,KAAK,EACLa,gBAAgB,CAACP,KACnB,CAAC;IACDF,cAAc,CAACE,KAAK,GAAGrB,eAAe,CAAC0B,SAAS,CAACY,KAAK,CAACjB,KAAK,CAAC;IAC7DO,gBAAgB,CAACP,KAAK,CAACH,KAAK,GAAGoB,KAAK,CAACpB,KAAK;IAC1CvB,OAAO,CAACmB,QAAQ,CAAC,CAACwB,KAAK,CAACpB,KAAK,CAAC;EAChC,CAAC,CAAC,EACN,CAACS,wBAAwB,EAAEZ,KAAK,EAAEa,gBAAgB,CACpD,CAAC;EAED,MAAMW,mBAAmB,GAAG1C,gBAAgB,CAAC,OAAO;IAClD2C,SAAS,EAAE,CACT;MACEC,UAAU,EAAEhD,WAAW,CACrB0B,cAAc,CAACE,KAAK,EACpB,CAAC,CAACN,KAAK,IAAIN,eAAe,CAACQ,MAAM,CAACa,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EACjD,CAAC,CAACf,KAAK,IAAIN,eAAe,CAACQ,MAAM,CAACa,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EACjDtC,aAAa,CAACgC,KAChB;IACF,CAAC;EAEL,CAAC,CAAC,CAAC;EAEH,MAAMkB,MAAM,GAAG9D,KAAK,CAACC,WAAW,CAC7B8D,GAAW,IAAK;IACf,MAAMC,QAAQ,GAAGnC,eAAe,CAACQ,MAAM,CAAC4B,SAAS,CAC9CC,KAAK,IAAKA,KAAK,CAACH,GAAG,KAAKA,GAC3B,CAAC;IACD,IAAIC,QAAQ,KAAK,CAAC,CAAC,EAAE;MACnB;IACF;IACAzB,cAAc,CAACE,KAAK,GAAGrB,eAAe,CAAC0B,SAAS,CAAC,CAACkB,QAAQ,GAAG7B,KAAK,CAAC;EACrE,CAAC,EACD,CAACN,eAAe,CAACQ,MAAM,EAAEE,cAAc,EAAEJ,KAAK,CAChD,CAAC;EAED,MAAMgC,YAAY,GAAGlE,WAAW,CAC9B,CAACmE,MAAyC,EAAEC,cAAc,GAAG,IAAI,kBAC/D/C,IAAA,CAACf,IAAI;IAAwC+D,KAAK,EAAE;MAAEnC;IAAM,CAAE;IAAAoC,QAAA,EAC3DF,cAAc,GAAGrC,WAAW,CAACoC,MAAM,CAAC,GAAGzC,eAAe,CAAC;EAAC,GADhD,cAAcyC,MAAM,CAACF,KAAK,CAACH,GAAG,EAEnC,CACP,EACD,CAACpC,eAAe,EAAEK,WAAW,EAAEG,KAAK,CACtC,CAAC;EAED,MAAMqC,MAAM,GAAGrE,OAAO,CACpB,MACE0B,eAAe,CAACQ,MAAM,CAACoC,GAAG,CAAC,CAACP,KAAK,EAAE5B,KAAK,KAAK;IAC3C,IAAI,CAACV,IAAI,EAAE;MACT,OAAOuC,YAAY,CAAC;QAAEL,MAAM;QAAEI;MAAM,CAAC,CAAC;IACxC;IACA,MAAMQ,MAAM,GAAGtC,aAAa,CAACuC,OAAO,CAACC,IAAI,CACtCC,YAAY,IAAKA,YAAY,EAAEd,GAAG,KAAKG,KAAK,CAACH,GAChD,CAAC;IACD,IAAIW,MAAM,KAAKI,SAAS,EAAE;MACxB,OAAOX,YAAY,CAAC;QAAEL,MAAM;QAAEI;MAAM,CAAC,CAAC;IACxC;IACA,IAAIrC,eAAe,CAACS,KAAK,KAAKA,KAAK,EAAE;MACnCF,aAAa,CAACuC,OAAO,CAACI,IAAI,CAACb,KAAK,CAAC;MACjC,OAAOC,YAAY,CAAC;QAAEL,MAAM;QAAEI;MAAM,CAAC,CAAC;IACxC;IACA,OAAOC,YAAY,CAAC;MAAEL,MAAM;MAAEI;IAAM,CAAC,EAAE,KAAK,CAAC;EAC/C,CAAC,CAAC,EACJ,CACErC,eAAe,CAACQ,MAAM,EACtBR,eAAe,CAACS,KAAK,EACrBV,IAAI,EACJuC,YAAY,EACZL,MAAM,CAEV,CAAC;EAED,oBACExC,IAAA,CAACZ,sBAAsB;IAAC4D,KAAK,EAAEU,aAAa,CAACC,IAAK;IAAAV,QAAA,eAChD/C,KAAA,CAACb,UAAU,CAACJ,IAAI;MAAC2E,MAAM,EAAEpE,gBAAiB;MAACwD,KAAK,EAAEU,aAAa,CAACC,IAAK;MAAAV,QAAA,GAClEtC,YAAY,GACTA,YAAY,CAAC;QACXJ,eAAe;QACfW,QAAQ;QACRN,QAAQ,EAAEW;MACZ,CAAC,CAAC,GACF,IAAI,eACRvB,IAAA,CAACb,eAAe;QAAC0E,OAAO,EAAEhC,UAAW;QAAAoB,QAAA,eACnCjD,IAAA,CAACX,UAAU,CAACJ,IAAI;UACd2E,MAAM,EAAEpE,gBAAiB;UACzBwD,KAAK,EAAE,CACLX,mBAAmB,EACnBqB,aAAa,CAACC,IAAI,EAClB;YAAE9C,KAAK,EAAEA,KAAK,GAAGN,eAAe,CAACQ,MAAM,CAACa,MAAM,GAAG;UAAE,CAAC,EACpD8B,aAAa,CAACI,cAAc,CAC5B;UAAAb,QAAA,EAEDC;QAAM,CACQ;MAAC,CACH,CAAC;IAAA,CACH;EAAC,CACI,CAAC;AAE7B,CACF,CAAC;AAED,MAAMQ,aAAa,GAAG3E,UAAU,CAACgF,MAAM,CAAC;EACtCJ,IAAI,EAAE;IACJA,IAAI,EAAE;EACR,CAAC;EACDG,cAAc,EAAE;IACdE,aAAa,EAAE;EACjB;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","StyleSheet","useWindowDimensions","View","Gesture","GestureDetector","GestureHandlerRootView","Reanimated","interpolate","LinearTransition","runOnJS","runOnUI","useAnimatedReaction","useAnimatedStyle","useSharedValue","useTabContext","AnimationHelper","jsx","_jsx","jsxs","_jsxs","ReanimatedTabView","memo","LazyPlaceholder","lazy","navigationState","percentageTrigger","renderScene","renderTabBar","navigate","screenOptions","width","loadedScreens","routes","index","scrollPosition","positionX","value","map","_","i","_navigate","animation","minimumValueToChangeView","_navigationState","size","length","panGesture","Pan","failOffsetY","activeOffsetX","onChange","event","onEnd","state","scrollPositionStyle","transform","translateX","jumpTo","key","newIndex","findIndex","route","chooseRender","params","useRenderScene","style","children","Routes","screen","current","find","loadedScreen","undefined","push","defaultStyles","flex","layout","gesture","viewsContainer","create","flexDirection"],"sourceRoot":"../../../../src","sources":["components/ReanimatedTopTab/ReanimatedTabView.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/elements/TabBarBaseComponent.js

@@ -1,45 +1,62 @@
 "use strict";
 
 import * as React from 'react';
-import { Pressable, StyleSheet, Text, useWindowDimensions } from 'react-native';
-import Reanimated, { interpolate, useAnimatedReaction } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native';
+import Reanimated, { interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { useTabContext } from '../../hooks/useTabContext';
+import { TabBarBaseItem } from './TabBarBaseItem';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const TabBarBaseComponent = ({
   children,
   navigationState,
-  position,
   style,
-  navigate
+  navigate,
+  screenOptions
 }) => {
-  const layout = useWindowDimensions();
   const {
     topTabHeight,
-    transformationX
+    positionX
   } = useTabContext();
-
-  //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 width = useSharedValue(0);
+  const {
+    tabBarIndicatorStyle,
+    tabBarItemStyle,
+    tabBarStyle
+  } = screenOptions ?? {};
+  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 /*#__PURE__*/_jsxs(Reanimated.View, {
     onLayout: ({
       nativeEvent
     }) => {
       topTabHeight.value = nativeEvent.layout.height;
     },
-    children: [/*#__PURE__*/_jsx(Reanimated.View, {
-      style: [styles.wrapper, style],
-      children: navigationState.routes.map((route, index) => /*#__PURE__*/_jsx(Pressable, {
-        style: styles.labelWrapper,
+    children: [/*#__PURE__*/_jsxs(Reanimated.View, {
+      onLayout: ({
+        nativeEvent
+      }) => {
+        width.value = nativeEvent.layout.width;
+      },
+      style: [styles.wrapper, tabBarStyle, style],
+      children: [/*#__PURE__*/_jsx(Reanimated.View, {
+        style: [styles.indicator, indicatorStyle, tabBarIndicatorStyle]
+      }), navigationState.routes.map((route, index) => /*#__PURE__*/_jsx(TabBarBaseItem, {
+        index: index,
+        inputRange: inputRange,
         onPress: () => {
           navigate(index);
         },
-        children: route.tabBarLabel ? route.tabBarLabel() : /*#__PURE__*/_jsx(Text, {
-          style: styles.label,
-          children: route.title
-        })
-      }, route.key))
+        route: route,
+        style: tabBarItemStyle
+      }, route.key))]
     }), children]
   });
 };
@@ -51,15 +68,15 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center'
   },
-  label: {
-    color: 'red'
-  },
   wrapper: {
-    width: '100%',
     flexDirection: 'row',
-    backgroundColor: 'white',
-    paddingVertical: 8,
-    height: 50
+    backgroundColor: 'white'
+  },
+  indicator: {
+    backgroundColor: 'black',
+    bottom: 0,
+    height: 2,
+    position: 'absolute'
   }
 });
 //# sourceMappingURL=TabBarBaseComponent.js.map

package/lib/module/components/elements/TabBarBaseComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","StyleSheet","Text","useWindowDimensions","Reanimated","interpolate","useAnimatedReaction","useTabContext","jsx","_jsx","jsxs","_jsxs","TabBarBaseComponent","children","navigationState","position","style","navigate","layout","topTabHeight","transformationX","value","routes","map","_","i","width","View","onLayout","nativeEvent","height","styles","wrapper","route","index","labelWrapper","onPress","tabBarLabel","label","title","key","create","flex","alignItems","justifyContent","color","flexDirection","backgroundColor","paddingVertical"],"sourceRoot":"../../../../src","sources":["components/elements/TabBarBaseComponent.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,EAAEC,UAAU,EAAEC,IAAI,EAAEC,mBAAmB,QAAQ,cAAc;AAC/E,OAAOC,UAAU,IAEfC,WAAW,EACXC,mBAAmB,QACd,yBAAyB;AAEhC,SAASC,aAAa,QAAQ,2BAA2B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQ1D,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAClCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,KAAK;EACLC;AACW,CAAC,KAAK;EACjB,MAAMC,MAAM,GAAGf,mBAAmB,CAAC,CAAC;EAEpC,MAAM;IAAEgB,YAAY;IAAEC;EAAgB,CAAC,GAAGb,aAAa,CAAC,CAAC;;EAEzD;EACAD,mBAAmB,CACjB,MACED,WAAW,CACTU,QAAQ,CAACM,KAAK,EACdP,eAAe,CAACQ,MAAM,CAACC,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKA,CAAC,GAAGP,MAAM,CAACQ,KAAK,CAAC,EACtDZ,eAAe,CAACQ,MAAM,CAACC,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKA,CAAC,CAAC,EACvC,OACF,CAAC,EACFJ,KAAK,IAAK;IACTD,eAAe,CAACC,KAAK,GAAGA,KAAK;EAC/B,CAAC,EACD,CAACP,eAAe,CAACQ,MAAM,CACzB,CAAC;EAED,oBACEX,KAAA,CAACP,UAAU,CAACuB,IAAI;IACdC,QAAQ,EAAEA,CAAC;MAAEC;IAAY,CAAC,KAAK;MAC7BV,YAAY,CAACE,KAAK,GAAGQ,WAAW,CAACX,MAAM,CAACY,MAAM;IAChD,CAAE;IAAAjB,QAAA,gBAEFJ,IAAA,CAACL,UAAU,CAACuB,IAAI;MAACX,KAAK,EAAE,CAACe,MAAM,CAACC,OAAO,EAAEhB,KAAK,CAAE;MAAAH,QAAA,EAC7CC,eAAe,CAACQ,MAAM,CAACC,GAAG,CAAC,CAACU,KAAK,EAAEC,KAAK,kBACvCzB,IAAA,CAACT,SAAS;QACRgB,KAAK,EAAEe,MAAM,CAACI,YAAa;QAE3BC,OAAO,EAAEA,CAAA,KAAM;UACbnB,QAAQ,CAACiB,KAAK,CAAC;QACjB,CAAE;QAAArB,QAAA,EAEDoB,KAAK,CAACI,WAAW,GAChBJ,KAAK,CAACI,WAAW,CAAC,CAAC,gBAEnB5B,IAAA,CAACP,IAAI;UAACc,KAAK,EAAEe,MAAM,CAACO,KAAM;UAAAzB,QAAA,EAAEoB,KAAK,CAACM;QAAK,CAAO;MAC/C,GATIN,KAAK,CAACO,GAUF,CACZ;IAAC,CACa,CAAC,EACjB3B,QAAQ;EAAA,CACM,CAAC;AAEtB,CAAC;;AAED;AACA,MAAMkB,MAAM,GAAG9B,UAAU,CAACwC,MAAM,CAAC;EAC/BN,YAAY,EAAE;IACZO,IAAI,EAAE,CAAC;IACPC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDN,KAAK,EAAE;IACLO,KAAK,EAAE;EACT,CAAC;EACDb,OAAO,EAAE;IACPN,KAAK,EAAE,MAAM;IACboB,aAAa,EAAE,KAAK;IACpBC,eAAe,EAAE,OAAO;IACxBC,eAAe,EAAE,CAAC;IAClBlB,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","StyleSheet","Reanimated","interpolate","useAnimatedStyle","useSharedValue","useTabContext","TabBarBaseItem","jsx","_jsx","jsxs","_jsxs","TabBarBaseComponent","children","navigationState","style","navigate","screenOptions","topTabHeight","positionX","width","tabBarIndicatorStyle","tabBarItemStyle","tabBarStyle","inputRange","routes","map","_","index","indicatorStyle","outputRange","value","length","transform","translateX","View","onLayout","nativeEvent","layout","height","styles","wrapper","indicator","route","onPress","key","create","labelWrapper","flex","alignItems","justifyContent","flexDirection","backgroundColor","bottom","position"],"sourceRoot":"../../../../src","sources":["components/elements/TabBarBaseComponent.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/elements/TabBarBaseItem.js

@@ -0,0 +1,48 @@
+"use strict";
+
+import { Pressable, StyleSheet, Text } from 'react-native';
+import Animated, { interpolate, useAnimatedStyle } from 'react-native-reanimated';
+import { useTabContext } from '../../hooks/useTabContext';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const TabBarBaseItem = ({
+  index,
+  inputRange,
+  onPress,
+  route,
+  style
+}) => {
+  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 /*#__PURE__*/_jsxs(Pressable, {
+    onPress: () => onPress(index),
+    style: [styles.container, style],
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: activeStyle,
+      children: route.tabBarLabel ? route.tabBarLabel(true) : /*#__PURE__*/_jsx(Text, {
+        children: route.title
+      })
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: inactiveStyle,
+      children: route.tabBarLabel ? route.tabBarLabel(false) : /*#__PURE__*/_jsx(Text, {
+        children: route.title
+      })
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+    minHeight: 50
+  }
+});
+//# sourceMappingURL=TabBarBaseItem.js.map

package/lib/module/components/elements/TabBarBaseItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Pressable","StyleSheet","Text","Animated","interpolate","useAnimatedStyle","useTabContext","jsx","_jsx","jsxs","_jsxs","TabBarBaseItem","index","inputRange","onPress","route","style","positionX","activeStyle","opacity","value","map","i","position","inactiveStyle","styles","container","children","View","tabBarLabel","title","create","alignItems","flex","justifyContent","minHeight"],"sourceRoot":"../../../../src","sources":["components/elements/TabBarBaseItem.tsx"],"mappings":";;AAAA,SACEA,SAAS,EACTC,UAAU,EACVC,IAAI,QAGC,cAAc;AACrB,OAAOC,QAAQ,IACbC,WAAW,EACXC,gBAAgB,QACX,yBAAyB;AAChC,SAASC,aAAa,QAAQ,2BAA2B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAW1D,OAAO,MAAMC,cAAc,GAAGA,CAAC;EAC7BC,KAAK;EACLC,UAAU;EACVC,OAAO;EACPC,KAAK;EACLC;AACmB,CAAC,KAAK;EACzB,MAAM;IAAEC;EAAU,CAAC,GAAGX,aAAa,CAAC,CAAC;EAErC,MAAMY,WAAW,GAAGb,gBAAgB,CAAC,OAAO;IAC1Cc,OAAO,EAAEf,WAAW,CAClBa,SAAS,CAACG,KAAK,EACfP,UAAU,EACVA,UAAU,CAACQ,GAAG,CAAEC,CAAC,IAAMA,CAAC,KAAKV,KAAK,GAAG,CAAC,GAAG,CAAE,CAC7C,CAAC;IACDW,QAAQ,EAAE;EACZ,CAAC,CAAC,CAAC;EAEH,MAAMC,aAAa,GAAGnB,gBAAgB,CAAC,OAAO;IAC5Cc,OAAO,EAAEf,WAAW,CAClBa,SAAS,CAACG,KAAK,EACfP,UAAU,EACVA,UAAU,CAACQ,GAAG,CAAEC,CAAC,IAAMA,CAAC,KAAKV,KAAK,GAAG,CAAC,GAAG,CAAE,CAC7C;EACF,CAAC,CAAC,CAAC;EAEH,oBACEF,KAAA,CAACV,SAAS;IAACc,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACF,KAAK,CAAE;IAACI,KAAK,EAAE,CAACS,MAAM,CAACC,SAAS,EAAEV,KAAK,CAAE;IAAAW,QAAA,gBACzEnB,IAAA,CAACL,QAAQ,CAACyB,IAAI;MAACZ,KAAK,EAAEE,WAAY;MAAAS,QAAA,EAC/BZ,KAAK,CAACc,WAAW,GAChBd,KAAK,CAACc,WAAW,CAAC,IAAI,CAAC,gBAEvBrB,IAAA,CAACN,IAAI;QAAAyB,QAAA,EAAEZ,KAAK,CAACe;MAAK,CAAO;IAC1B,CACY,CAAC,eAChBtB,IAAA,CAACL,QAAQ,CAACyB,IAAI;MAACZ,KAAK,EAAEQ,aAAc;MAAAG,QAAA,EACjCZ,KAAK,CAACc,WAAW,GAChBd,KAAK,CAACc,WAAW,CAAC,KAAK,CAAC,gBAExBrB,IAAA,CAACN,IAAI;QAAAyB,QAAA,EAAEZ,KAAK,CAACe;MAAK,CAAO;IAC1B,CACY,CAAC;EAAA,CACP,CAAC;AAEhB,CAAC;AAED,MAAML,MAAM,GAAGxB,UAAU,CAAC8B,MAAM,CAAC;EAC/BL,SAAS,EAAE;IACTM,UAAU,EAAE,QAAQ;IACpBC,IAAI,EAAE,CAAC;IACPC,cAAc,EAAE,QAAQ;IACxBC,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/elements/TabBarLabelBaseComponent.js

@@ -8,12 +8,12 @@ export const TabBarLabelBaseComponent = ({
   index,
   ...props
 }) => {
-  const transformationX = useTabOffset();
+  const positionX = useTabOffset();
   const style = useAnimatedStyle(() => ({
-    backgroundColor: interpolateColor(transformationX.value, [index - 1, index, index + 1], ['transparent', 'blue', 'transparent'])
+    backgroundColor: interpolateColor(positionX.value, [index - 1, index, index + 1], ['transparent', 'blue', 'transparent'])
   }), []);
   const textStyle = useAnimatedStyle(() => ({
-    color: interpolateColor(transformationX.value, [index - 1, index, index + 1], ['black', 'white', 'black'])
+    color: interpolateColor(positionX.value, [index - 1, index, index + 1], ['black', 'white', 'black'])
   }), []);
   return /*#__PURE__*/_jsx(Reanimated.View, {
     style: [style, styles.wrapper],

package/lib/module/components/elements/TabBarLabelBaseComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","Reanimated","interpolateColor","useAnimatedStyle","useTabOffset","jsx","_jsx","TabBarLabelBaseComponent","index","props","transformationX","style","backgroundColor","value","textStyle","color","View","styles","wrapper","children","Text","text","title","create","fontWeight","textTransform","borderRadius","height","justifyContent","paddingHorizontal","paddingVertical"],"sourceRoot":"../../../../src","sources":["components/elements/TabBarLabelBaseComponent.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,OAAOC,UAAU,IACfC,gBAAgB,EAChBC,gBAAgB,QACX,yBAAyB;AAEhC,SAASC,YAAY,QAAQ,0BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQxD,OAAO,MAAMC,wBAAwB,GAAGA,CAAC;EACvCC,KAAK;EACL,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,eAAe,GAAGN,YAAY,CAAC,CAAC;EAEtC,MAAMO,KAAK,GAAGR,gBAAgB,CAC5B,OAAO;IACLS,eAAe,EAAEV,gBAAgB,CAC/BQ,eAAe,CAACG,KAAK,EACrB,CAACL,KAAK,GAAG,CAAC,EAAEA,KAAK,EAAEA,KAAK,GAAG,CAAC,CAAC,EAC7B,CAAC,aAAa,EAAE,MAAM,EAAE,aAAa,CACvC;EACF,CAAC,CAAC,EACF,EACF,CAAC;EAED,MAAMM,SAAS,GAAGX,gBAAgB,CAChC,OAAO;IACLY,KAAK,EAAEb,gBAAgB,CACrBQ,eAAe,CAACG,KAAK,EACrB,CAACL,KAAK,GAAG,CAAC,EAAEA,KAAK,EAAEA,KAAK,GAAG,CAAC,CAAC,EAC7B,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAC5B;EACF,CAAC,CAAC,EACF,EACF,CAAC;EAED,oBACEF,IAAA,CAACL,UAAU,CAACe,IAAI;IAACL,KAAK,EAAE,CAACA,KAAK,EAAEM,MAAM,CAACC,OAAO,CAAE;IAAAC,QAAA,eAC9Cb,IAAA,CAACL,UAAU,CAACmB,IAAI;MAACT,KAAK,EAAE,CAACG,SAAS,EAAEG,MAAM,CAACI,IAAI,CAAE;MAAAF,QAAA,EAC9CV,KAAK,CAACa;IAAK,CACG;EAAC,CACH,CAAC;AAEtB,CAAC;AAED,MAAML,MAAM,GAAGjB,UAAU,CAACuB,MAAM,CAAC;EAC/BF,IAAI,EAAE;IACJG,UAAU,EAAE,MAAM;IAClBC,aAAa,EAAE;EACjB,CAAC;EACDP,OAAO,EAAE;IACPQ,YAAY,EAAE,EAAE;IAChBC,MAAM,EAAE,EAAE;IACVC,cAAc,EAAE,QAAQ;IACxBC,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE;EACnB;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["StyleSheet","Reanimated","interpolateColor","useAnimatedStyle","useTabOffset","jsx","_jsx","TabBarLabelBaseComponent","index","props","positionX","style","backgroundColor","value","textStyle","color","View","styles","wrapper","children","Text","text","title","create","fontWeight","textTransform","borderRadius","height","justifyContent","paddingHorizontal","paddingVertical"],"sourceRoot":"../../../../src","sources":["components/elements/TabBarLabelBaseComponent.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,OAAOC,UAAU,IACfC,gBAAgB,EAChBC,gBAAgB,QACX,yBAAyB;AAEhC,SAASC,YAAY,QAAQ,0BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQxD,OAAO,MAAMC,wBAAwB,GAAGA,CAAC;EACvCC,KAAK;EACL,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,SAAS,GAAGN,YAAY,CAAC,CAAC;EAEhC,MAAMO,KAAK,GAAGR,gBAAgB,CAC5B,OAAO;IACLS,eAAe,EAAEV,gBAAgB,CAC/BQ,SAAS,CAACG,KAAK,EACf,CAACL,KAAK,GAAG,CAAC,EAAEA,KAAK,EAAEA,KAAK,GAAG,CAAC,CAAC,EAC7B,CAAC,aAAa,EAAE,MAAM,EAAE,aAAa,CACvC;EACF,CAAC,CAAC,EACF,EACF,CAAC;EAED,MAAMM,SAAS,GAAGX,gBAAgB,CAChC,OAAO;IACLY,KAAK,EAAEb,gBAAgB,CACrBQ,SAAS,CAACG,KAAK,EACf,CAACL,KAAK,GAAG,CAAC,EAAEA,KAAK,EAAEA,KAAK,GAAG,CAAC,CAAC,EAC7B,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAC5B;EACF,CAAC,CAAC,EACF,EACF,CAAC;EAED,oBACEF,IAAA,CAACL,UAAU,CAACe,IAAI;IAACL,KAAK,EAAE,CAACA,KAAK,EAAEM,MAAM,CAACC,OAAO,CAAE;IAAAC,QAAA,eAC9Cb,IAAA,CAACL,UAAU,CAACmB,IAAI;MAACT,KAAK,EAAE,CAACG,SAAS,EAAEG,MAAM,CAACI,IAAI,CAAE;MAAAF,QAAA,EAC9CV,KAAK,CAACa;IAAK,CACG;EAAC,CACH,CAAC;AAEtB,CAAC;AAED,MAAML,MAAM,GAAGjB,UAAU,CAACuB,MAAM,CAAC;EAC/BF,IAAI,EAAE;IACJG,UAAU,EAAE,MAAM;IAClBC,aAAa,EAAE;EACjB,CAAC;EACDP,OAAO,EAAE;IACPQ,YAAY,EAAE,EAAE;IAChBC,MAAM,EAAE,EAAE;IACVC,cAAc,EAAE,QAAQ;IACxBC,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE;EACnB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/wrappers/GestureWrapper.js

@@ -2,19 +2,26 @@
 
 import React, { useMemo, useRef, useState } from 'react';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Reanimated, { Easing, interpolate, runOnJS, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
+import Reanimated, { Easing, runOnJS, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
 import { useTabContext } from '../../hooks/useTabContext';
+import { Platform, StyleSheet, View } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GestureWrapper = ({
-  children
+  children,
+  bounces
 }) => {
+  const _bounces = Platform.select({
+    ios: bounces,
+    default: false
+  });
   const {
     context,
     currentScreenIndex,
     currentYPosition,
     gestureEnabled,
     headerHeight,
-    transformationY
+    transformationY,
+    scrollY
   } = useTabContext();
   const movedY = useSharedValue(0);
   const gestureRef = useRef(Gesture.Pan());
@@ -67,18 +74,40 @@ export const GestureWrapper = ({
   }).simultaneousWithExternalGesture(...Object.values(context.screen.properties).map(({
     nativeGesture
   }) => nativeGesture)).withRef(gestureRef).enabled(_gestureEnabled), [_gestureEnabled]);
-  const style = useAnimatedStyle(() => ({
-    flex: 1,
-    transform: [{
-      translateY: interpolate(transformationY.value, [0, -headerHeight.value], [0, -headerHeight.value], 'clamp')
-    }]
-  }), []);
+  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: scrollY.value * -1
+      }]
+    };
+  }, []);
   return /*#__PURE__*/_jsx(GestureDetector, {
     gesture: gesture,
-    children: /*#__PURE__*/_jsx(Reanimated.View, {
-      style: style,
-      children: children
+    children: /*#__PURE__*/_jsx(View, {
+      style: styles.container,
+      children: /*#__PURE__*/_jsx(Reanimated.View, {
+        style: style,
+        children: children
+      })
     })
   });
 };
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    flex: 1
+  }
+});
 //# sourceMappingURL=GestureWrapper.js.map

package/lib/module/components/wrappers/GestureWrapper.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","useRef","useState","Gesture","GestureDetector","Reanimated","Easing","interpolate","runOnJS","useAnimatedReaction","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","useTabContext","jsx","_jsx","GestureWrapper","children","context","currentScreenIndex","currentYPosition","gestureEnabled","headerHeight","transformationY","movedY","gestureRef","Pan","currentScreenScrollOffset","Object","values","screen","properties","map","scrollY","value","withTimingConfig","duration","easing","bezier","_gestureEnabled","setGestureEnabled","next","prev","gesture","activeOffsetY","onTouchesMove","_","stateManager","fail","onUpdate","translationY","onEnd","velocityY","gestureValue","changeOffset","destination","onFinalize","simultaneousWithExternalGesture","nativeGesture","withRef","enabled","style","flex","transform","translateY","View"],"sourceRoot":"../../../../src","sources":["components/wrappers/GestureWrapper.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useMemo","useRef","useState","Gesture","GestureDetector","Reanimated","Easing","runOnJS","useAnimatedReaction","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","useTabContext","Platform","StyleSheet","View","jsx","_jsx","GestureWrapper","children","bounces","_bounces","select","ios","default","context","currentScreenIndex","currentYPosition","gestureEnabled","headerHeight","transformationY","scrollY","movedY","gestureRef","Pan","currentScreenScrollOffset","Object","values","screen","properties","map","value","withTimingConfig","duration","easing","bezier","_gestureEnabled","setGestureEnabled","next","prev","gesture","activeOffsetY","onTouchesMove","_","stateManager","fail","onUpdate","translationY","onEnd","velocityY","gestureValue","changeOffset","destination","onFinalize","simultaneousWithExternalGesture","nativeGesture","withRef","enabled","style","flex","transform","translateY","styles","container","create","overflow"],"sourceRoot":"../../../../src","sources":["components/wrappers/GestureWrapper.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/wrappers/SectionList.js

@@ -0,0 +1,66 @@
+"use strict";
+
+import { SectionList as RNSectionList, StyleSheet } from 'react-native';
+import { GestureDetector } from 'react-native-gesture-handler';
+import Reanimated from 'react-native-reanimated';
+import { useRef } from 'react';
+import { useRoute } from '@react-navigation/native';
+import { useTabContext } from '../../hooks/useTabContext';
+import { useScreenGesture } from '../../hooks/useScreenGesture';
+import { useScreenScrollable } from '../../hooks/useScreenScrollable';
+import { useScreenProperties } from '../../hooks/useScreenProperties';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SectionList = ({
+  children,
+  style,
+  contentContainerStyle,
+  onLayout,
+  ...props
+}) => {
+  const gesture = useScreenGesture();
+  const {
+    style: _style,
+    contentContainerStyle: _contentContainerStyle,
+    onScroll,
+    bounces,
+    animatedProps,
+    overScrollMode
+  } = useScreenScrollable();
+  const {
+    innerLayout
+  } = useScreenProperties();
+  const {
+    context
+  } = useTabContext();
+  const {
+    key
+  } = useRoute();
+  const _ref = useRef(null);
+  const _onLayout = event => {
+    onLayout?.(event);
+    innerLayout.value = event.nativeEvent.layout;
+    context.screen.setRef(key, _ref.current);
+  };
+  return /*#__PURE__*/_jsx(GestureDetector, {
+    gesture: gesture,
+    children: /*#__PURE__*/_jsx(AnimatedSectionList, {
+      ref: _ref,
+      contentContainerStyle: [_contentContainerStyle, styleSheet.contentContainerStyle, contentContainerStyle],
+      onLayout: _onLayout,
+      style: [_style, style],
+      onScroll: onScroll,
+      bounces: bounces,
+      animatedProps: animatedProps,
+      overScrollMode: overScrollMode,
+      ...props,
+      children: children
+    })
+  });
+};
+const styleSheet = StyleSheet.create({
+  contentContainerStyle: {
+    flexGrow: 1
+  }
+});
+const AnimatedSectionList = Reanimated.createAnimatedComponent(RNSectionList);
+//# sourceMappingURL=SectionList.js.map

package/lib/module/components/wrappers/SectionList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SectionList","RNSectionList","StyleSheet","GestureDetector","Reanimated","useRef","useRoute","useTabContext","useScreenGesture","useScreenScrollable","useScreenProperties","jsx","_jsx","children","style","contentContainerStyle","onLayout","props","gesture","_style","_contentContainerStyle","onScroll","bounces","animatedProps","overScrollMode","innerLayout","context","key","_ref","_onLayout","event","value","nativeEvent","layout","screen","setRef","current","AnimatedSectionList","ref","styleSheet","create","flexGrow","createAnimatedComponent"],"sourceRoot":"../../../../src","sources":["components/wrappers/SectionList.tsx"],"mappings":";;AAAA,SAIEA,WAAW,IAAIC,aAAa,EAC5BC,UAAU,QACL,cAAc;AACrB,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,OAAOC,UAAU,MAAM,yBAAyB;AAChD,SAASC,MAAM,QAAQ,OAAO;AAC9B,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,mBAAmB,QAAQ,iCAAiC;AACrE,SAASC,mBAAmB,QAAQ,iCAAiC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtE,OAAO,MAAMZ,WAAW,GAAGA,CAAoC;EAC7Da,QAAQ;EACRC,KAAK;EACLC,qBAAqB;EACrBC,QAAQ;EACR,GAAGC;AAC8B,CAAC,KAAK;EACvC,MAAMC,OAAO,GAAGV,gBAAgB,CAAC,CAAC;EAClC,MAAM;IACJM,KAAK,EAAEK,MAAM;IACbJ,qBAAqB,EAAEK,sBAAsB;IAC7CC,QAAQ;IACRC,OAAO;IACPC,aAAa;IACbC;EACF,CAAC,GAAGf,mBAAmB,CAAC,CAAC;EACzB,MAAM;IAAEgB;EAAY,CAAC,GAAGf,mBAAmB,CAAC,CAAC;EAC7C,MAAM;IAAEgB;EAAQ,CAAC,GAAGnB,aAAa,CAAC,CAAC;EAEnC,MAAM;IAAEoB;EAAI,CAAC,GAAGrB,QAAQ,CAAC,CAAC;EAC1B,MAAMsB,IAAI,GAAGvB,MAAM,CAAqB,IAAI,CAAC;EAE7C,MAAMwB,SAAS,GAAIC,KAAwB,IAAK;IAC9Cd,QAAQ,GAAGc,KAAK,CAAC;IACjBL,WAAW,CAACM,KAAK,GAAGD,KAAK,CAACE,WAAW,CAACC,MAAM;IAC5CP,OAAO,CAACQ,MAAM,CAACC,MAAM,CAACR,GAAG,EAAEC,IAAI,CAACQ,OAAO,CAAC;EAC1C,CAAC;EAED,oBACExB,IAAA,CAACT,eAAe;IAACe,OAAO,EAAEA,OAAQ;IAAAL,QAAA,eAChCD,IAAA,CAACyB,mBAAmB;MAClBC,GAAG,EAAEV,IAAK;MACVb,qBAAqB,EAAE,CACrBK,sBAAsB,EACtBmB,UAAU,CAACxB,qBAAqB,EAChCA,qBAAqB,CACrB;MACFC,QAAQ,EAAEa,SAAU;MACpBf,KAAK,EAAE,CAACK,MAAM,EAAEL,KAAK,CAAE;MACvBO,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBC,aAAa,EAAEA,aAAc;MAC7BC,cAAc,EAAEA,cAAe;MAAA,GAC3BP,KAAK;MAAAJ,QAAA,EAERA;IAAQ,CACU;EAAC,CACP,CAAC;AAEtB,CAAC;AAED,MAAM0B,UAAU,GAAGrC,UAAU,CAACsC,MAAM,CAAC;EACnCzB,qBAAqB,EAAE;IACrB0B,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEF,MAAMJ,mBAAmB,GACvBjC,UAAU,CAACsC,uBAAuB,CAA6BzC,aAAa,CAAC","ignoreList":[]}

package/lib/module/context/Context.hooks.js

@@ -5,13 +5,14 @@ import { useRef } from 'react';
 import { Gesture } from 'react-native-gesture-handler';
 import { assign, throttle } from 'lodash';
 import { ContextHelpers } from './Context.helpers';
+import { SectionList } from 'react-native';
 
 /**
  * Hook to reset the scroll offset for the approaching screen in a tab navigation context.
  *
  * @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,
@@ -21,7 +22,7 @@ import { ContextHelpers } from './Context.helpers';
  */
 const useResetApproachingScreenScrollOffset = ({
   context,
-  transformationX,
+  positionX,
   currentYPosition
 }) => {
   const screenOffsets = useDerivedValue(() => Object.values(context.screen.properties).map(({
@@ -29,19 +30,21 @@ const useResetApproachingScreenScrollOffset = ({
   }) => scrollY.value));
   const resetApproachingScreenOffset = (index, shouldReset) => {
     if (shouldReset) {
-      const {
-        scrollTo
-      } = context.screen.getRef(context.route.getKeyForIndex(index)).current ?? {
-        scrollTo: () => {}
-      };
-      //NOTE: use reanimated scrollTo does not work
-      scrollTo({
+      const ref = context.screen.getRef(context.route.getKeyForIndex(index)).current;
+      if (ref instanceof SectionList) {
+        ref.scrollToLocation({
+          animated: false,
+          sectionIndex: 0,
+          itemIndex: 0,
+          viewOffset: 0
+        });
+      } else ref?.scrollTo({
         y: 0,
         animated: false
       });
     }
   };
-  useAnimatedReaction(() => transformationX.value, (current, previous) => {
+  useAnimatedReaction(() => positionX.value, (current, previous) => {
     const approachingIndex = ContextHelpers.getTargetIndex(current, previous);
     const approachingScreenOffset = screenOffsets.value[approachingIndex] ?? -1;
     runOnJS(resetApproachingScreenOffset)(approachingIndex, approachingScreenOffset > 0 && currentYPosition.value === 0);
@@ -170,7 +173,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.
  */
@@ -180,7 +183,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
@@ -211,21 +215,22 @@ const useTransformHeaderOnTabChange = ({
       runOnJS(debouncedSetIsHeaderSet)();
     }
   }, []);
-  useAnimatedReaction(() => transformationX.value, value => {
+  useAnimatedReaction(() => positionX.value, value => {
     if (currentYPosition.value === -headerHeight.value) return;
     transformationY.value = interpolate(value, inputRange.value, outputRange.value, 'clamp');
   });
   return {
     transformationY,
-    transformationX,
+    positionX,
     currentYPosition,
     headerHeight,
-    isHeaderHeightSet
+    isHeaderHeightSet,
+    scrollY
   };
 };
 const useApproachingTabChange = ({
   config,
-  transformationX,
+  positionX,
   gestureEnabled,
   currentScreenIndex
 }) => {
@@ -246,7 +251,7 @@ const useApproachingTabChange = ({
         }
     }
   };
-  useAnimatedReaction(() => transformationX.value, (current, previous) => {
+  useAnimatedReaction(() => positionX.value, (current, previous) => {
     const approachingIndex = ContextHelpers.getTargetIndex(current, previous);
     onIndexApproach(approachingIndex);
   });