react-navigation-reanimated-top-tabs 0.2.0

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

@@ -0,0 +1,119 @@
+"use strict";
+
+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 Animated, { Extrapolation, interpolate, LinearTransition, runOnJS, useAnimatedStyle, useDerivedValue, useSharedValue } from 'react-native-reanimated';
+import { AnimationHelper } from "./AnimationHelper.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ReanimatedTabView = /*#__PURE__*/React.memo(({
+  LazyPlaceholder = () => null,
+  lazy = false,
+  navigationState,
+  onIndexChange,
+  percentageTrigger = 0.4,
+  positionInterpolation,
+  renderScene,
+  renderTabBar
+}) => {
+  const {
+    width
+  } = useWindowDimensions();
+  const loadedScreens = useRef([navigationState.routes[navigationState.index]]);
+  // const width = 160;
+  const scrollPosition = useSharedValue(navigationState.index);
+  const position = useDerivedValue(() => {
+    if (!positionInterpolation) {
+      return -scrollPosition.value;
+    }
+    return interpolate(-scrollPosition.value, positionInterpolation.input, positionInterpolation.output, Extrapolation.CLAMP);
+  }, [positionInterpolation]);
+  useEffect(() => {
+    scrollPosition.value = AnimationHelper.animation(-navigationState.index * width);
+  }, [navigationState.index, scrollPosition, width]);
+  const minimumValueToChangeView = useMemo(() => width * percentageTrigger, [percentageTrigger, width]);
+  const panGesture = React.useMemo(() => Gesture.Pan().failOffsetY(-10).failOffsetY(10).activeOffsetX([-20, 20]).onChange(event => {
+    scrollPosition.value = AnimationHelper.onChange(event, scrollPosition.value, width, navigationState);
+  }).onEnd(event => {
+    const state = AnimationHelper.onEnd(event, minimumValueToChangeView, width, navigationState);
+    scrollPosition.value = AnimationHelper.animation(state.value);
+    runOnJS(onIndexChange)(state.index);
+  }), [minimumValueToChangeView, navigationState, onIndexChange, scrollPosition, width]);
+  const scrollPositionStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: interpolate(scrollPosition.value, [-width * (navigationState.routes.length - 1), 0], [-width * (navigationState.routes.length - 1), 0], Extrapolation.CLAMP)
+    }]
+  }));
+  const jumpTo = React.useCallback(key => {
+    const newIndex = navigationState.routes.findIndex(r => r.key === key);
+    if (newIndex === -1) {
+      // throw
+      return;
+    }
+    scrollPosition.value = AnimationHelper.animation(-newIndex * width);
+    onIndexChange(newIndex);
+  }, [navigationState.routes, onIndexChange, scrollPosition, width]);
+  const chooseRender = useCallback((params, useRenderScene = true) => /*#__PURE__*/_jsx(View, {
+    style: {
+      width
+    },
+    children: useRenderScene ? renderScene(params) : LazyPlaceholder()
+  }, `RNNTabView_${params.route.key}`), [LazyPlaceholder, renderScene, width]);
+  const Routes = useMemo(() => navigationState.routes.map((route, index) => {
+    if (!lazy) {
+      return chooseRender({
+        jumpTo,
+        route
+      });
+    }
+    const screen = loadedScreens.current.find(loadedScreen => loadedScreen?.key === route.key);
+    if (screen !== undefined) {
+      return chooseRender({
+        jumpTo,
+        route
+      });
+    }
+    if (navigationState.index === index) {
+      loadedScreens.current.push(route);
+      return chooseRender({
+        jumpTo,
+        route
+      });
+    }
+    return chooseRender({
+      jumpTo,
+      route
+    }, false);
+  }), [navigationState.routes, navigationState.index, lazy, chooseRender, jumpTo]);
+  return /*#__PURE__*/_jsx(GestureHandlerRootView, {
+    style: defaultStyles.flex,
+    children: /*#__PURE__*/_jsxs(Animated.View, {
+      layout: LinearTransition,
+      style: defaultStyles.flex,
+      children: [renderTabBar ? renderTabBar({
+        navigationState,
+        position
+      }) : null, /*#__PURE__*/_jsx(GestureDetector, {
+        gesture: panGesture,
+        children: /*#__PURE__*/_jsx(Animated.View, {
+          layout: LinearTransition,
+          style: [scrollPositionStyle, defaultStyles.flex, {
+            width: width * navigationState.routes.length - 1
+          }, defaultStyles.viewsContainer],
+          children: Routes
+        })
+      })]
+    })
+  });
+});
+
+//NOTE: purposely use of StyleSheet - simplify migration to library
+const defaultStyles = StyleSheet.create({
+  flex: {
+    flex: 1
+  },
+  viewsContainer: {
+    flexDirection: 'row'
+  }
+});
+//# sourceMappingURL=ReanimatedTabView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","StyleSheet","useWindowDimensions","View","Gesture","GestureDetector","GestureHandlerRootView","Animated","Extrapolation","interpolate","LinearTransition","runOnJS","useAnimatedStyle","useDerivedValue","useSharedValue","AnimationHelper","jsx","_jsx","jsxs","_jsxs","ReanimatedTabView","memo","LazyPlaceholder","lazy","navigationState","onIndexChange","percentageTrigger","positionInterpolation","renderScene","renderTabBar","width","loadedScreens","routes","index","scrollPosition","position","value","input","output","CLAMP","animation","minimumValueToChangeView","panGesture","Pan","failOffsetY","activeOffsetX","onChange","event","onEnd","state","scrollPositionStyle","transform","translateX","length","jumpTo","key","newIndex","findIndex","r","chooseRender","params","useRenderScene","style","children","route","Routes","map","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/ReanimatedTopTab/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export let ReanimatedTabViewTypes;
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ReanimatedTabViewTypes"],"sourceRoot":"../../../../src","sources":["components/ReanimatedTopTab/types.ts"],"mappings":";;WAGiBA,sBAAsB","ignoreList":[]}

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

@@ -0,0 +1,64 @@
+"use strict";
+
+import * as React from 'react';
+import { Pressable, StyleSheet, Text, useWindowDimensions } from 'react-native';
+import Reanimated, { interpolate, useAnimatedReaction } from 'react-native-reanimated';
+import { useTabContext } from "../../hooks/TopTab.hooks.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const TabBarBaseComponent = ({
+  children,
+  navigate,
+  navigationState,
+  position,
+  style
+}) => {
+  const layout = useWindowDimensions();
+  const {
+    topTabHeight,
+    transformationX
+  } = 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]);
+  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 => /*#__PURE__*/_jsx(Pressable, {
+        style: styles.labelWrapper,
+        onPress: () => {
+          navigate(route);
+        },
+        children: route.tabBarLabel ? route.tabBarLabel() : /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: 'red'
+          },
+          children: route.title
+        })
+      }, route.key))
+    }), children]
+  });
+};
+
+// Static styles
+const styles = StyleSheet.create({
+  labelWrapper: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  wrapper: {
+    width: '100%',
+    flexDirection: 'row',
+    backgroundColor: 'white',
+    paddingVertical: 8,
+    height: 50
+  }
+});
+//# sourceMappingURL=TabBarBaseComponent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Pressable","StyleSheet","Text","useWindowDimensions","Reanimated","interpolate","useAnimatedReaction","useTabContext","jsx","_jsx","jsxs","_jsxs","TabBarBaseComponent","children","navigate","navigationState","position","style","layout","topTabHeight","transformationX","value","routes","map","_","i","width","View","onLayout","nativeEvent","height","styles","wrapper","route","labelWrapper","onPress","tabBarLabel","color","title","key","create","flex","alignItems","justifyContent","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,EAEXC,mBAAmB,QACd,yBAAyB;AAChC,SAASC,aAAa,QAAQ,6BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAsBzD,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAClCC,QAAQ;EACRC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC;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,CACTW,QAAQ,CAACK,KAAK,EACdN,eAAe,CAACO,MAAM,CAACC,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKA,CAAC,GAAGP,MAAM,CAACQ,KAAK,CAAC,EACtDX,eAAe,CAACO,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,CAACN,eAAe,CAACO,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;MAACV,KAAK,EAAE,CAACc,MAAM,CAACC,OAAO,EAAEf,KAAK,CAAE;MAAAJ,QAAA,EAC7CE,eAAe,CAACO,MAAM,CAACC,GAAG,CAAEU,KAAK,iBAChCxB,IAAA,CAACT,SAAS;QACRiB,KAAK,EAAEc,MAAM,CAACG,YAAa;QAE3BC,OAAO,EAAEA,CAAA,KAAM;UACbrB,QAAQ,CAACmB,KAAK,CAAC;QACjB,CAAE;QAAApB,QAAA,EAEDoB,KAAK,CAACG,WAAW,GAChBH,KAAK,CAACG,WAAW,CAAC,CAAC,gBAEnB3B,IAAA,CAACP,IAAI;UAACe,KAAK,EAAE;YAAEoB,KAAK,EAAE;UAAM,CAAE;UAAAxB,QAAA,EAAEoB,KAAK,CAACK;QAAK,CAAO;MACnD,GATIL,KAAK,CAACM,GAUF,CACZ;IAAC,CACa,CAAC,EACjB1B,QAAQ;EAAA,CACM,CAAC;AAEtB,CAAC;;AAED;AACA,MAAMkB,MAAM,GAAG9B,UAAU,CAACuC,MAAM,CAAC;EAC/BN,YAAY,EAAE;IACZO,IAAI,EAAE,CAAC;IACPC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDX,OAAO,EAAE;IACPN,KAAK,EAAE,MAAM;IACbkB,aAAa,EAAE,KAAK;IACpBC,eAAe,EAAE,OAAO;IACxBC,eAAe,EAAE,CAAC;IAClBhB,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,41 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+import Reanimated, { interpolateColor, useAnimatedStyle } from 'react-native-reanimated';
+import { useTabContext } from "../../hooks/TopTab.hooks.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TabBarLabelBaseComponent = ({
+  index,
+  ...props
+}) => {
+  const {
+    transformationX
+  } = useTabContext();
+  const style = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(transformationX.value, [index - 1, index, index + 1], ['transparent', 'blue', 'transparent'])
+  }), []);
+  const textStyle = useAnimatedStyle(() => ({
+    color: interpolateColor(transformationX.value, [index - 1, index, index + 1], ['black', 'white', 'black'])
+  }), []);
+  return /*#__PURE__*/_jsx(Reanimated.View, {
+    style: [style, styles.wrapper],
+    children: /*#__PURE__*/_jsx(Reanimated.Text, {
+      style: [textStyle, styles.text],
+      children: props.title
+    })
+  });
+};
+const styles = StyleSheet.create({
+  text: {
+    fontWeight: 'bold',
+    textTransform: 'uppercase'
+  },
+  wrapper: {
+    borderRadius: 10,
+    height: 35,
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 8
+  }
+});
+//# sourceMappingURL=TabBarLabelBaseComponent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","Reanimated","interpolateColor","useAnimatedStyle","useTabContext","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;AAChC,SAASC,aAAa,QAAQ,6BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQzD,OAAO,MAAMC,wBAAwB,GAAGA,CAAC;EACvCC,KAAK;EACL,GAAGC;AACa,CAAC,KAAK;EACtB,MAAM;IAAEC;EAAgB,CAAC,GAAGN,aAAa,CAAC,CAAC;EAE3C,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":[]}

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

@@ -0,0 +1,94 @@
+"use strict";
+
+import { useMemo, useRef, useState } from 'react';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Reanimated, { Easing, interpolate, runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { useTabContext } from "../../hooks/TopTab.hooks.js";
+
+//TODO: types
+import { jsx as _jsx } from "react/jsx-runtime";
+export const GestureWrapper = ({
+  children
+}) => {
+  const {
+    currentScreenIndex,
+    currentYPosition,
+    gestureEnabled,
+    headerHeight,
+    screenProperties,
+    transformationY,
+    screenRefs
+  } = useTabContext();
+  const movedY = useSharedValue(0);
+  const gestureRef = useRef(Gesture.Pan());
+  const withTimingConfig = {
+    duration: 300,
+    easing: Easing.bezier(0.25, 0.1, 0.25, 1)
+  };
+  const [_gestureEnabled, setGestureEnabled] = useState(gestureEnabled.value);
+  useAnimatedReaction(() => gestureEnabled.value, nextValue => {
+    runOnJS(setGestureEnabled)(nextValue);
+  }, []);
+  const _scrollTo = (index, value = 0) => {
+    const {
+      scrollTo
+    } = Object.values(screenRefs.refs.current)[index]?.current ?? {
+      scrollTo: () => null
+    };
+    scrollTo({
+      y: value,
+      animated: false
+    });
+  };
+  const gesture = useMemo(() => Gesture.Pan().activeOffsetY([-10, 10]).onTouchesMove(({
+    state
+  }, stateManager) => {
+    const current = Object.values(screenProperties).map(({
+      scrollY
+    }) => scrollY)[currentScreenIndex.value];
+    if ((current?.value ?? 0) > 0 && state !== 4 && state !== 3) {
+      stateManager.fail();
+    }
+  }).onUpdate(({
+    translationY
+  }) => {
+    if (translationY <= -headerHeight.value) {
+      runOnJS(_scrollTo)(currentScreenIndex.value, Math.abs(translationY + headerHeight.value));
+    }
+    transformationY.value = currentYPosition.value + translationY - movedY.value;
+  }).onEnd(({
+    translationY,
+    velocityY
+  }) => {
+    const gestureValue = translationY + velocityY * 0.2;
+    const changeOffset = 0.2 * headerHeight.value;
+    if (gestureValue < -changeOffset && transformationY.value < 0) {
+      transformationY.value = withTiming(-headerHeight.value, withTimingConfig);
+      currentYPosition.value = -headerHeight.value;
+    } else if (gestureValue > changeOffset) {
+      const destination = 0;
+      transformationY.value = withTiming(destination, withTimingConfig);
+      currentYPosition.value = destination;
+    } else {
+      transformationY.value = withTiming(currentYPosition.value, withTimingConfig);
+    }
+  }).onFinalize(() => {
+    movedY.value = 0;
+  }).simultaneousWithExternalGesture(...Object.values(screenProperties).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')
+    }]
+  }), []);
+  return /*#__PURE__*/_jsx(GestureDetector, {
+    gesture: gesture,
+    children: /*#__PURE__*/_jsx(Reanimated.View, {
+      style: style,
+      children: children
+    })
+  });
+};
+//# sourceMappingURL=GestureWrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","useRef","useState","Gesture","GestureDetector","Reanimated","Easing","interpolate","runOnJS","useAnimatedReaction","useAnimatedStyle","useSharedValue","withTiming","useTabContext","jsx","_jsx","GestureWrapper","children","currentScreenIndex","currentYPosition","gestureEnabled","headerHeight","screenProperties","transformationY","screenRefs","movedY","gestureRef","Pan","withTimingConfig","duration","easing","bezier","_gestureEnabled","setGestureEnabled","value","nextValue","_scrollTo","index","scrollTo","Object","values","refs","current","y","animated","gesture","activeOffsetY","onTouchesMove","state","stateManager","map","scrollY","fail","onUpdate","translationY","Math","abs","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":[]}

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

@@ -0,0 +1,28 @@
+"use strict";
+
+import { useRoute } from '@react-navigation/native';
+import Reanimated from 'react-native-reanimated';
+import { useTabContext } from "../../hooks/TopTab.hooks.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ScreenWrapper = ({
+  children,
+  ...viewProps
+}) => {
+  const {
+    key
+  } = useRoute();
+  const {
+    screenProperties
+  } = useTabContext();
+  const onLayout = event => {
+    const screen = screenProperties[key];
+    if (!screen) throw 'No screen property registered for this route';
+    screen.outerLayout.value = event.nativeEvent.layout;
+  };
+  return /*#__PURE__*/_jsx(Reanimated.View, {
+    ...viewProps,
+    onLayout: onLayout,
+    children: children
+  });
+};
+//# sourceMappingURL=ScreenWrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useRoute","Reanimated","useTabContext","jsx","_jsx","ScreenWrapper","children","viewProps","key","screenProperties","onLayout","event","screen","outerLayout","value","nativeEvent","layout","View"],"sourceRoot":"../../../../src","sources":["components/wrappers/ScreenWrapper.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AAEnD,OAAOC,UAAU,MAA8B,yBAAyB;AACxE,SAASC,aAAa,QAAQ,6BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKzD,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,QAAQ;EACR,GAAGC;AACe,CAAC,KAAK;EACxB,MAAM;IAAEC;EAAI,CAAC,GAAGR,QAAQ,CAAC,CAAC;EAC1B,MAAM;IAAES;EAAiB,CAAC,GAAGP,aAAa,CAAC,CAAC;EAE5C,MAAMQ,QAAQ,GAAIC,KAAwB,IAAK;IAC7C,MAAMC,MAAM,GAAGH,gBAAgB,CAACD,GAAG,CAAC;IACpC,IAAI,CAACI,MAAM,EAAE,MAAM,8CAA8C;IACjEA,MAAM,CAACC,WAAW,CAACC,KAAK,GAAGH,KAAK,CAACI,WAAW,CAACC,MAAM;EACrD,CAAC;EAED,oBACEZ,IAAA,CAACH,UAAU,CAACgB,IAAI;IAAA,GAAKV,SAAS;IAAEG,QAAQ,EAAEA,QAAS;IAAAJ,QAAA,EAChDA;EAAQ,CACM,CAAC;AAEtB,CAAC","ignoreList":[]}

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

@@ -0,0 +1,52 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+import { GestureDetector } from 'react-native-gesture-handler';
+import Reanimated from 'react-native-reanimated';
+import { useScreenGesture, useScreenProperties, useScreenScrollable, useTabContext } from "../../hooks/TopTab.hooks.js";
+import { useRef } from 'react';
+import { useRoute } from '@react-navigation/native';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ScrollView = ({
+  children,
+  style,
+  ...props
+}) => {
+  const gesture = useScreenGesture();
+  const {
+    style: animatedStyle,
+    ...scrollProps
+  } = useScreenScrollable();
+  const {
+    innerLayout
+  } = useScreenProperties();
+  const {
+    screenRefs
+  } = useTabContext();
+  const {
+    key
+  } = useRoute();
+  const _ref = useRef(null);
+  const onLayout = event => {
+    innerLayout.value = event.nativeEvent.layout;
+    screenRefs.setRef(key, _ref);
+  };
+  return /*#__PURE__*/_jsx(GestureDetector, {
+    gesture: gesture,
+    children: /*#__PURE__*/_jsx(Reanimated.ScrollView, {
+      ...scrollProps,
+      ...props,
+      ref: _ref,
+      contentContainerStyle: _style.contentContainerStyle,
+      onLayout: onLayout,
+      style: [style, animatedStyle],
+      children: children
+    })
+  });
+};
+const _style = StyleSheet.create({
+  contentContainerStyle: {
+    flexGrow: 1
+  }
+});
+//# sourceMappingURL=ScrollView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","GestureDetector","Reanimated","useScreenGesture","useScreenProperties","useScreenScrollable","useTabContext","useRef","useRoute","jsx","_jsx","ScrollView","children","style","props","gesture","animatedStyle","scrollProps","innerLayout","screenRefs","key","_ref","onLayout","event","value","nativeEvent","layout","setRef","ref","contentContainerStyle","_style","create","flexGrow"],"sourceRoot":"../../../../src","sources":["components/wrappers/ScrollView.tsx"],"mappings":";;AAAA,SAGEA,UAAU,QACL,cAAc;AACrB,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,OAAOC,UAAU,MAA8B,yBAAyB;AACxE,SACEC,gBAAgB,EAChBC,mBAAmB,EACnBC,mBAAmB,EACnBC,aAAa,QACR,6BAA0B;AACjC,SAASC,MAAM,QAAQ,OAAO;AAC9B,SAASC,QAAQ,QAAQ,0BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKpD,OAAO,MAAMC,UAAU,GAAGA,CAAC;EACzBC,QAAQ;EACRC,KAAK;EACL,GAAGC;AACe,CAAC,KAAK;EACxB,MAAMC,OAAO,GAAGZ,gBAAgB,CAAC,CAAC;EAClC,MAAM;IAAEU,KAAK,EAAEG,aAAa;IAAE,GAAGC;EAAY,CAAC,GAAGZ,mBAAmB,CAAC,CAAC;EACtE,MAAM;IAAEa;EAAY,CAAC,GAAGd,mBAAmB,CAAC,CAAC;EAC7C,MAAM;IAAEe;EAAW,CAAC,GAAGb,aAAa,CAAC,CAAC;EAEtC,MAAM;IAAEc;EAAI,CAAC,GAAGZ,QAAQ,CAAC,CAAC;EAE1B,MAAMa,IAAI,GAAGd,MAAM,CAAwB,IAAI,CAAC;EAEhD,MAAMe,QAAQ,GAAIC,KAAwB,IAAK;IAC7CL,WAAW,CAACM,KAAK,GAAGD,KAAK,CAACE,WAAW,CAACC,MAAM;IAC5CP,UAAU,CAACQ,MAAM,CAACP,GAAG,EAAEC,IAAI,CAAC;EAC9B,CAAC;EAED,oBACEX,IAAA,CAACT,eAAe;IAACc,OAAO,EAAEA,OAAQ;IAAAH,QAAA,eAChCF,IAAA,CAACR,UAAU,CAACS,UAAU;MAAA,GAChBM,WAAW;MAAA,GACXH,KAAK;MACTc,GAAG,EAAEP,IAAK;MACVQ,qBAAqB,EAAEC,MAAM,CAACD,qBAAsB;MACpDP,QAAQ,EAAEA,QAAS;MACnBT,KAAK,EAAE,CAACA,KAAK,EAAEG,aAAa,CAAE;MAAAJ,QAAA,EAE7BA;IAAQ,CACY;EAAC,CACT,CAAC;AAEtB,CAAC;AAED,MAAMkB,MAAM,GAAG9B,UAAU,CAAC+B,MAAM,CAAC;EAC/BF,qBAAqB,EAAE;IACrBG,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,44 @@
+"use strict";
+
+import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
+const useResetApproachingScreenScrollOffset = ({
+  screenRefs,
+  transformationX,
+  screenProperties,
+  currentYPosition
+}) => {
+  const resetApproachingScreenOffset = (index, shouldReset) => {
+    if (shouldReset) {
+      //NOTE: use reanimated scrollTo does not work
+      const {
+        scrollTo
+      } = Object.values(screenRefs.refs.current)[index]?.current ?? {
+        scrollTo: () => null
+      };
+      scrollTo({
+        y: 0,
+        animated: false
+      });
+    }
+  };
+  useAnimatedReaction(() => transformationX.value, (current, previous) => {
+    const approachingIndex = getTargetIndex(current, previous);
+    const approachingScreenOffset = Object.values(screenProperties).map(({
+      scrollY
+    }) => scrollY.value)[approachingIndex] ?? -1;
+    runOnJS(resetApproachingScreenOffset)(approachingIndex, approachingScreenOffset > 0 && currentYPosition.value === 0);
+  });
+};
+function getTargetIndex(currentValue, previousValue) {
+  'worklet';
+
+  if (currentValue > (previousValue ?? 0)) {
+    return Math.ceil(currentValue);
+  } else {
+    return Math.floor(currentValue);
+  }
+}
+export const TopTabContextHooks = {
+  useResetApproachingScreenScrollOffset
+};
+//# sourceMappingURL=TopTabContext.hooks.js.map

package/lib/module/context/TopTabContext.hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["runOnJS","useAnimatedReaction","useResetApproachingScreenScrollOffset","screenRefs","transformationX","screenProperties","currentYPosition","resetApproachingScreenOffset","index","shouldReset","scrollTo","Object","values","refs","current","y","animated","value","previous","approachingIndex","getTargetIndex","approachingScreenOffset","map","scrollY","currentValue","previousValue","Math","ceil","floor","TopTabContextHooks"],"sourceRoot":"../../../src","sources":["context/TopTabContext.hooks.ts"],"mappings":";;AAAA,SAASA,OAAO,EAAEC,mBAAmB,QAAQ,yBAAyB;AAGtE,MAAMC,qCAAqC,GAAGA,CAAC;EAC7CC,UAAU;EACVC,eAAe;EACfC,gBAAgB;EAChBC;AAIF,CAAC,KAAK;EACJ,MAAMC,4BAA4B,GAAGA,CACnCC,KAAa,EACbC,WAAoB,KACjB;IACH,IAAIA,WAAW,EAAE;MACf;MACA,MAAM;QAAEC;MAAS,CAAC,GAAGC,MAAM,CAACC,MAAM,CAACT,UAAU,CAACU,IAAI,CAACC,OAAO,CAAC,CAACN,KAAK,CAAC,EAC9DM,OAAO,IAAI;QAAEJ,QAAQ,EAAEA,CAAA,KAAM;MAAK,CAAC;MAEvCA,QAAQ,CAAC;QAAEK,CAAC,EAAE,CAAC;QAAEC,QAAQ,EAAE;MAAM,CAAC,CAAC;IACrC;EACF,CAAC;EAEDf,mBAAmB,CACjB,MAAMG,eAAe,CAACa,KAAK,EAC3B,CAACH,OAAO,EAAEI,QAAQ,KAAK;IACrB,MAAMC,gBAAgB,GAAGC,cAAc,CAACN,OAAO,EAAEI,QAAQ,CAAC;IAE1D,MAAMG,uBAAuB,GAC3BV,MAAM,CAACC,MAAM,CAACP,gBAAgB,CAAC,CAACiB,GAAG,CAAC,CAAC;MAAEC;IAAQ,CAAC,KAAKA,OAAO,CAACN,KAAK,CAAC,CACjEE,gBAAgB,CACjB,IAAI,CAAC,CAAC;IAETnB,OAAO,CAACO,4BAA4B,CAAC,CACnCY,gBAAgB,EAChBE,uBAAuB,GAAG,CAAC,IAAIf,gBAAgB,CAACW,KAAK,KAAK,CAC5D,CAAC;EACH,CACF,CAAC;AACH,CAAC;AAED,SAASG,cAAcA,CAACI,YAAoB,EAAEC,aAA4B,EAAE;EAC1E,SAAS;;EACT,IAAID,YAAY,IAAIC,aAAa,IAAI,CAAC,CAAC,EAAE;IACvC,OAAOC,IAAI,CAACC,IAAI,CAACH,YAAY,CAAC;EAChC,CAAC,MAAM;IACL,OAAOE,IAAI,CAACE,KAAK,CAACJ,YAAY,CAAC;EACjC;AACF;AAEA,OAAO,MAAMK,kBAAkB,GAAG;EAChC3B;AACF,CAAC","ignoreList":[]}

package/lib/module/context/TopTabContext.js

@@ -0,0 +1,82 @@
+"use strict";
+
+import { createContext, memo, useRef } from 'react';
+import { Gesture } from 'react-native-gesture-handler';
+import { interpolate, useAnimatedReaction, useDerivedValue, useSharedValue } from 'react-native-reanimated';
+import { useScreenRefs } from "../hooks/TopTab.hooks.js";
+import { TopTabContextHooks } from "./TopTabContext.hooks.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Context = /*#__PURE__*/createContext({});
+export const Provider = /*#__PURE__*/memo(({
+  children,
+  config,
+  screenProperties
+}) => {
+  const transformationY = useSharedValue(0);
+  const transformationX = useSharedValue(0);
+  const currentYPosition = useSharedValue(0);
+  const gestureEnabled = useSharedValue(true);
+  const currentScreenIndex = useSharedValue(0);
+  const navHeight = useSharedValue(0);
+  const headerHeight = useSharedValue(0);
+  const closeOffset = useSharedValue(0);
+  const topTabHeight = useSharedValue(0);
+  const topTapNativeRef = useRef(Gesture.Native()).current;
+  const screenRefs = useScreenRefs(Object.keys(screenProperties));
+
+  //Hide header base on config
+  const inputRange = useDerivedValue(() => config.map((_, idx) => idx), [config]);
+  const outputRange = useDerivedValue(() => config.map(type => {
+    switch (type) {
+      case 'normal':
+        return 0;
+      case 'minimalized':
+        return -headerHeight.value;
+      default:
+        return 0;
+    }
+  }), [config]);
+  useAnimatedReaction(() => transformationX.value, value => {
+    if (currentYPosition.value === -headerHeight.value) return;
+    transformationY.value = interpolate(value, inputRange.value, outputRange.value, 'clamp');
+  });
+  TopTabContextHooks.useResetApproachingScreenScrollOffset({
+    screenRefs,
+    currentYPosition,
+    screenProperties,
+    transformationX
+  });
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: {
+      closeOffset,
+      config,
+      currentScreenIndex,
+      currentYPosition,
+      gestureEnabled,
+      headerHeight,
+      navHeight,
+      screenProperties,
+      topTabHeight,
+      topTapNativeRef,
+      transformationX,
+      transformationY,
+      screenRefs
+    },
+    children: children({
+      screenRefs,
+      closeOffset,
+      config,
+      currentScreenIndex,
+      currentYPosition,
+      gestureEnabled,
+      headerHeight,
+      navHeight,
+      screenProperties,
+      topTabHeight,
+      topTapNativeRef,
+      transformationX,
+      transformationY
+    })
+  });
+});
+//# sourceMappingURL=TopTabContext.js.map

package/lib/module/context/TopTabContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","memo","useRef","Gesture","interpolate","useAnimatedReaction","useDerivedValue","useSharedValue","useScreenRefs","TopTabContextHooks","jsx","_jsx","Context","Provider","children","config","screenProperties","transformationY","transformationX","currentYPosition","gestureEnabled","currentScreenIndex","navHeight","headerHeight","closeOffset","topTabHeight","topTapNativeRef","Native","current","screenRefs","Object","keys","inputRange","map","_","idx","outputRange","type","value","useResetApproachingScreenScrollOffset"],"sourceRoot":"../../../src","sources":["context/TopTabContext.tsx"],"mappings":"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","ignoreList":[]}