@orionarm/react-native-collapse-tabs 1.0.3 → 1.0.4

package/lib/CollapseTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollapseTabs.d.ts","sourceRoot":"","sources":["../src/CollapseTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAkBf,OAAO,EACL,iBAAiB,EAOlB,MAAM,eAAe,CAAC;AAIvB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgLpD,CAAC"}
+{"version":3,"file":"CollapseTabs.d.ts","sourceRoot":"","sources":["../src/CollapseTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAkBtE,OAAO,EACL,iBAAiB,EAOlB,MAAM,eAAe,CAAC;AAIvB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkLpD,CAAC"}

package/lib/CollapseTabs.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef, useState, } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import PagerView from "react-native-pager-view";
 import Animated, { useAnimatedReaction, useAnimatedStyle, useEvent, useHandler, useSharedValue, withTiming, } from "react-native-reanimated";
@@ -25,7 +25,7 @@ export const CollapseTabs = ({ children, initialTabName, headerHeight, tabBarHei
         const y = scrollY.value[tab] ?? 0;
         return {
             tab,
-            translateY: -Math.min(y, headerScrollDistance),
+            translateY: -Math.min(Math.max(y, 0), headerScrollDistance),
         };
     }, (next, prev) => {
         if (prev && prev.tab !== next.tab) {
@@ -103,9 +103,7 @@ export const CollapseTabs = ({ children, initialTabName, headerHeight, tabBarHei
             {renderHeader?.(headerProps)}
           </View>
           <View style={{ height: tabBarHeight }}>
-            {renderTabBar
-            ? renderTabBar(headerProps)
-            : <DefaultTabBar {...headerProps}/>}
+            {renderTabBar ? (renderTabBar(headerProps)) : (<DefaultTabBar {...headerProps}/>)}
           </View>
         </Animated.View>
       </View>

package/lib/FlatList.d.ts

@@ -3,6 +3,6 @@ import { FlatListProps } from "react-native";
 type Props<T> = FlatListProps<T> & {
     name: string;
 };
-export declare function FlatList<T>({ name, contentContainerStyle, ...rest }: Props<T>): React.JSX.Element;
+export declare function FlatList<T>({ name, contentContainerStyle, onScroll: userOnScroll, ...rest }: Props<T>): React.JSX.Element;
 export {};
 //# sourceMappingURL=FlatList.d.ts.map

package/lib/FlatList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlatList.d.ts","sourceRoot":"","sources":["../src/FlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAA0B,aAAa,EAAE,MAAM,cAAc,CAAC;AAOrE,KAAK,KAAK,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpD,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,qBAoC7E"}
+{"version":3,"file":"FlatList.d.ts","sourceRoot":"","sources":["../src/FlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAA0B,aAAa,EAAE,MAAM,cAAc,CAAC;AAQrE,KAAK,KAAK,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpD,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAC1B,IAAI,EACJ,qBAAqB,EACrB,QAAQ,EAAE,YAAY,EACtB,GAAG,IAAI,EACR,EAAE,KAAK,CAAC,CAAC,CAAC,qBA+CV"}

package/lib/FlatList.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
-import Animated, { useAnimatedRef, useAnimatedScrollHandler, } from "react-native-reanimated";
+import Animated, { runOnJS, useAnimatedRef, useAnimatedScrollHandler, } from "react-native-reanimated";
 import { useTabsContext } from "./hooks";
-export function FlatList({ name, contentContainerStyle, ...rest }) {
+export function FlatList({ name, contentContainerStyle, onScroll: userOnScroll, ...rest }) {
     const { headerHeight, tabBarHeight, scrollY, focusedTab, setRef, } = useTabsContext();
     const ref = useAnimatedRef();
     useEffect(() => {
@@ -9,13 +9,21 @@ export function FlatList({ name, contentContainerStyle, ...rest }) {
     }, [name, ref, setRef]);
     const handler = useAnimatedScrollHandler({
         onScroll: (event) => {
-            if (focusedTab.value !== name)
-                return;
-            const map = { ...scrollY.value };
-            map[name] = event.contentOffset.y;
-            scrollY.value = map;
+            if (focusedTab.value === name) {
+                const map = { ...scrollY.value };
+                map[name] = event.contentOffset.y;
+                scrollY.value = map;
+            }
+            if (userOnScroll) {
+                if (userOnScroll.worklet === true) {
+                    userOnScroll(event);
+                }
+                else {
+                    runOnJS(userOnScroll)(event);
+                }
+            }
         },
-    });
+    }, [name, userOnScroll]);
     return (<Animated.FlatList {...rest} ref={ref} onScroll={handler} scrollEventThrottle={16} contentContainerStyle={[
             { paddingTop: headerHeight + tabBarHeight },
             contentContainerStyle,

package/lib/ScrollView.d.ts

@@ -4,6 +4,6 @@ type Props = ScrollViewProps & {
     name: string;
     children?: React.ReactNode;
 };
-export declare function ScrollView({ name, contentContainerStyle, children, ...rest }: Props): React.JSX.Element;
+export declare function ScrollView({ name, contentContainerStyle, children, onScroll: userOnScroll, ...rest }: Props): React.JSX.Element;
 export {};
 //# sourceMappingURL=ScrollView.d.ts.map

package/lib/ScrollView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../src/ScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,eAAe,EAA8B,MAAM,cAAc,CAAC;AAO3E,KAAK,KAAK,GAAG,eAAe,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAE5E,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,qBAAqB,EACrB,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,KAAK,qBAsCP"}
+{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../src/ScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,eAAe,EAA8B,MAAM,cAAc,CAAC;AAQ3E,KAAK,KAAK,GAAG,eAAe,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAE5E,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,qBAAqB,EACrB,QAAQ,EACR,QAAQ,EAAE,YAAY,EACtB,GAAG,IAAI,EACR,EAAE,KAAK,qBAiDP"}

package/lib/ScrollView.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
-import Animated, { useAnimatedRef, useAnimatedScrollHandler, } from "react-native-reanimated";
+import Animated, { runOnJS, useAnimatedRef, useAnimatedScrollHandler, } from "react-native-reanimated";
 import { useTabsContext } from "./hooks";
-export function ScrollView({ name, contentContainerStyle, children, ...rest }) {
+export function ScrollView({ name, contentContainerStyle, children, onScroll: userOnScroll, ...rest }) {
     const { headerHeight, tabBarHeight, scrollY, focusedTab, setRef, } = useTabsContext();
     const ref = useAnimatedRef();
     useEffect(() => {
@@ -9,13 +9,21 @@ export function ScrollView({ name, contentContainerStyle, children, ...rest }) {
     }, [name, ref, setRef]);
     const handler = useAnimatedScrollHandler({
         onScroll: (event) => {
-            if (focusedTab.value !== name)
-                return;
-            const map = { ...scrollY.value };
-            map[name] = event.contentOffset.y;
-            scrollY.value = map;
+            if (focusedTab.value === name) {
+                const map = { ...scrollY.value };
+                map[name] = event.contentOffset.y;
+                scrollY.value = map;
+            }
+            if (userOnScroll) {
+                if (userOnScroll.worklet === true) {
+                    userOnScroll(event);
+                }
+                else {
+                    runOnJS(userOnScroll)(event);
+                }
+            }
         },
-    });
+    }, [name, userOnScroll]);
     return (<Animated.ScrollView {...rest} ref={ref} onScroll={handler} scrollEventThrottle={16} contentContainerStyle={[
             { paddingTop: headerHeight + tabBarHeight },
             contentContainerStyle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orionarm/react-native-collapse-tabs",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A React Native collapsible tabs component",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/CollapseTabs.tsx

@@ -1,9 +1,4 @@
-import React, {
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import PagerView, {
   PagerViewOnPageScrollEventData,
@@ -48,20 +43,20 @@ export const CollapseTabs: React.FC<CollapseTabsProps> = ({
 }) => {
   const tabs = useMemo(
     () =>
-      React.Children.toArray(children).filter(
-        (c): c is TabReactElement => React.isValidElement(c)
+      React.Children.toArray(children).filter((c): c is TabReactElement =>
+        React.isValidElement(c),
       ),
-    [children]
+    [children],
   );
 
   const tabNames = useMemo(
     () => tabs.map((t) => (t.props as TabProps).name),
-    [tabs]
+    [tabs],
   );
 
   const initialIndex = Math.max(
     0,
-    initialTabName ? tabNames.indexOf(initialTabName) : 0
+    initialTabName ? tabNames.indexOf(initialTabName) : 0,
   );
 
   const headerScrollDistance = headerHeight - minHeaderHeight;
@@ -85,7 +80,7 @@ export const CollapseTabs: React.FC<CollapseTabsProps> = ({
       const y = scrollY.value[tab] ?? 0;
       return {
         tab,
-        translateY: -Math.min(y, headerScrollDistance),
+        translateY: -Math.min(Math.max(y, 0), headerScrollDistance),
       };
     },
     (next, prev) => {
@@ -95,7 +90,7 @@ export const CollapseTabs: React.FC<CollapseTabsProps> = ({
         headerTranslateY.value = next.translateY;
       }
     },
-    [headerScrollDistance]
+    [headerScrollDistance],
   );
 
   const refMap = useRef<Record<TabName, AnimatedRef<RefComponent>>>({}).current;
@@ -105,16 +100,19 @@ export const CollapseTabs: React.FC<CollapseTabsProps> = ({
       refMap[key] = ref as unknown as AnimatedRef<RefComponent>;
       return ref;
     },
-    [refMap]
+    [refMap],
   );
 
   const containerRef = useRef<ContainerRef>(null);
 
-  const onTabPress = useCallback((name: TabName) => {
-    const i = tabNames.indexOf(name);
-    if (i < 0) return;
-    containerRef.current?.setPage(i);
-  }, [tabNames]);
+  const onTabPress = useCallback(
+    (name: TabName) => {
+      const i = tabNames.indexOf(name);
+      if (i < 0) return;
+      containerRef.current?.setPage(i);
+    },
+    [tabNames],
+  );
 
   const [renderIndex, setRenderIndex] = useState(initialIndex);
 
@@ -125,7 +123,7 @@ export const CollapseTabs: React.FC<CollapseTabsProps> = ({
       indexDecimal.value = e.position + e.offset;
     },
     ["onPageScroll"],
-    doDependenciesDiffer
+    doDependenciesDiffer,
   );
 
   const onPageSelected = useCallback(
@@ -136,7 +134,7 @@ export const CollapseTabs: React.FC<CollapseTabsProps> = ({
       setRenderIndex(i);
       onIndexChange?.(i);
     },
-    [tabNames, index, focusedTab, onIndexChange]
+    [tabNames, index, focusedTab, onIndexChange],
   );
 
   const headerAnimStyle = useAnimatedStyle(() => ({
@@ -194,16 +192,15 @@ export const CollapseTabs: React.FC<CollapseTabsProps> = ({
             headerAnimStyle,
           ]}
         >
-          <View
-            pointerEvents="box-none"
-            style={{ height: headerHeight }}
-          >
+          <View pointerEvents="box-none" style={{ height: headerHeight }}>
             {renderHeader?.(headerProps)}
           </View>
           <View style={{ height: tabBarHeight }}>
-            {renderTabBar
-              ? renderTabBar(headerProps)
-              : <DefaultTabBar {...headerProps} />}
+            {renderTabBar ? (
+              renderTabBar(headerProps)
+            ) : (
+              <DefaultTabBar {...headerProps} />
+            )}
           </View>
         </Animated.View>
       </View>

package/src/FlatList.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import { FlatList as RNFlatList, FlatListProps } from "react-native";
 import Animated, {
+  runOnJS,
   useAnimatedRef,
   useAnimatedScrollHandler,
 } from "react-native-reanimated";
@@ -8,7 +9,12 @@ import { useTabsContext } from "./hooks";
 
 type Props<T> = FlatListProps<T> & { name: string };
 
-export function FlatList<T>({ name, contentContainerStyle, ...rest }: Props<T>) {
+export function FlatList<T>({
+  name,
+  contentContainerStyle,
+  onScroll: userOnScroll,
+  ...rest
+}: Props<T>) {
   const {
     headerHeight,
     tabBarHeight,
@@ -23,14 +29,25 @@ export function FlatList<T>({ name, contentContainerStyle, ...rest }: Props<T>)
     setRef(name, ref);
   }, [name, ref, setRef]);
 
-  const handler = useAnimatedScrollHandler({
-    onScroll: (event) => {
-      if (focusedTab.value !== name) return;
-      const map = { ...scrollY.value };
-      map[name] = event.contentOffset.y;
-      scrollY.value = map;
+  const handler = useAnimatedScrollHandler(
+    {
+      onScroll: (event) => {
+        if (focusedTab.value === name) {
+          const map = { ...scrollY.value };
+          map[name] = event.contentOffset.y;
+          scrollY.value = map;
+        }
+        if (userOnScroll) {
+          if ((userOnScroll as any).worklet === true) {
+            (userOnScroll as any)(event);
+          } else {
+            runOnJS(userOnScroll as any)(event);
+          }
+        }
+      },
     },
-  });
+    [name, userOnScroll],
+  );
 
   return (
     <Animated.FlatList

package/src/ScrollView.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import { ScrollViewProps, ScrollView as RNScrollView } from "react-native";
 import Animated, {
+  runOnJS,
   useAnimatedRef,
   useAnimatedScrollHandler,
 } from "react-native-reanimated";
@@ -12,6 +13,7 @@ export function ScrollView({
   name,
   contentContainerStyle,
   children,
+  onScroll: userOnScroll,
   ...rest
 }: Props) {
   const {
@@ -28,14 +30,25 @@ export function ScrollView({
     setRef(name, ref);
   }, [name, ref, setRef]);
 
-  const handler = useAnimatedScrollHandler({
-    onScroll: (event) => {
-      if (focusedTab.value !== name) return;
-      const map = { ...scrollY.value };
-      map[name] = event.contentOffset.y;
-      scrollY.value = map;
+  const handler = useAnimatedScrollHandler(
+    {
+      onScroll: (event) => {
+        if (focusedTab.value === name) {
+          const map = { ...scrollY.value };
+          map[name] = event.contentOffset.y;
+          scrollY.value = map;
+        }
+        if (userOnScroll) {
+          if ((userOnScroll as any).worklet === true) {
+            (userOnScroll as any)(event);
+          } else {
+            runOnJS(userOnScroll as any)(event);
+          }
+        }
+      },
     },
-  });
+    [name, userOnScroll],
+  );
 
   return (
     <Animated.ScrollView