react-native-collapsible-header-tab-view 1.0.3 → 1.0.4

package/dist/index.js

@@ -247,7 +247,7 @@ var CollapsibleTabView = (0, import_react4.forwardRef)(
           return { headerHeight: h, tabBarHeight: t, ready: true };
         });
       }
-    }, []);
+    }, [adjustY]);
     const handleHeaderLayout = (0, import_react4.useCallback)(
       (e) => {
         headerHeightRef.current = e.nativeEvent.layout.height;
@@ -309,24 +309,33 @@ var CollapsibleTabView = (0, import_react4.forwardRef)(
         }
       }
     }, []);
-    const syncTabOnSwitch = (0, import_react4.useCallback)(
-      (newIndex) => {
-        const currentY = tabScrollYMap.current.get(activeIndex) ?? 0;
-        const newTabSavedY = tabScrollYMap.current.get(newIndex) ?? 0;
-        const isCollapsed = currentY >= collapseRange - 1;
-        let targetY;
-        if (isCollapsed) {
-          targetY = Math.max(newTabSavedY, collapseRange);
-        } else {
-          targetY = Math.min(currentY, collapseRange);
+    const syncTabOnSwitch = (0, import_react4.useCallback)((newIndex) => {
+      const currentY = tabScrollYMap.current.get(activeIndex) ?? 0;
+      const newTabSavedY = tabScrollYMap.current.get(newIndex) ?? 0;
+      const isCollapsed = currentY >= collapseRange - 1;
+      const targetY = isCollapsed ? Math.max(newTabSavedY, collapseRange) : Math.min(currentY, collapseRange);
+      scrollTabTo(newIndex, targetY);
+      tabScrollYMap.current.set(newIndex, targetY);
+      scrollY.setValue(Math.min(targetY, collapseRange));
+    }, []);
+    const preSyncAdjacentTabs = (0, import_react4.useCallback)(() => {
+      const currentY = tabScrollYMap.current.get(activeIndex) ?? 0;
+      const isCollapsed = currentY >= collapseRange - 1;
+      for (const i of [activeIndex - 1, activeIndex + 1]) {
+        if (i < 0 || i >= pages.length) continue;
+        const savedY = tabScrollYMap.current.get(i) ?? 0;
+        const targetY = isCollapsed ? Math.max(savedY, collapseRange) : Math.min(currentY, collapseRange);
+        scrollTabTo(i, targetY);
+        tabScrollYMap.current.set(i, targetY);
+      }
+    }, [activeIndex, collapseRange, pages.length, scrollTabTo]);
+    const handlePageScrollStateChanged = (0, import_react4.useCallback)(
+      (e) => {
+        if (e.nativeEvent.pageScrollState === "dragging") {
+          preSyncAdjacentTabs();
         }
-        import_react_native3.InteractionManager.runAfterInteractions(() => {
-          scrollTabTo(newIndex, targetY);
-          tabScrollYMap.current.set(newIndex, targetY);
-          scrollY.setValue(Math.min(targetY, collapseRange));
-        });
       },
-      [activeIndex, collapseRange, scrollTabTo, scrollY]
+      [preSyncAdjacentTabs]
     );
     const handleTabPress = (0, import_react4.useCallback)(
       (index) => {
@@ -336,17 +345,18 @@ var CollapsibleTabView = (0, import_react4.forwardRef)(
         pagerRef.current?.setPageWithoutAnimation(index);
         onTabChange?.(index);
       },
-      [activeIndex, onTabChange, syncTabOnSwitch]
+      [activeIndex, syncTabOnSwitch, onTabChange]
     );
     const handlePageSelected = (0, import_react4.useCallback)(
       (e) => {
         const newIndex = e.nativeEvent.position;
         if (newIndex === activeIndex) return;
-        syncTabOnSwitch(newIndex);
+        const savedY = tabScrollYMap.current.get(newIndex) ?? 0;
+        scrollY.setValue(Math.min(savedY, collapseRange));
         setActiveIndex(newIndex);
         onTabChange?.(newIndex);
       },
-      [activeIndex, onTabChange, syncTabOnSwitch]
+      [activeIndex, collapseRange, scrollY, onTabChange]
     );
     const tabBarProps = (0, import_react4.useMemo)(
       () => ({
@@ -399,6 +409,7 @@ var CollapsibleTabView = (0, import_react4.forwardRef)(
           style: styles.pager,
           initialPage: initialTabIndex,
           onPageSelected: handlePageSelected,
+          onPageScrollStateChanged: handlePageScrollStateChanged,
           scrollEnabled: swipeEnabled
         },
         pages.map((page, i) => /* @__PURE__ */ import_react4.default.createElement(import_react_native3.View, { key: page?.key ?? i, style: styles.page }, /* @__PURE__ */ import_react4.default.createElement(TabIndexContext.Provider, { value: i }, page)))

package/dist/index.mjs

@@ -9,7 +9,6 @@ import React3, {
 } from "react";
 import {
   Animated as Animated3,
-  InteractionManager,
   StyleSheet,
   View as View2
 } from "react-native";
@@ -244,7 +243,7 @@ var CollapsibleTabView = forwardRef3(
           return { headerHeight: h, tabBarHeight: t, ready: true };
         });
       }
-    }, []);
+    }, [adjustY]);
     const handleHeaderLayout = useCallback3(
       (e) => {
         headerHeightRef.current = e.nativeEvent.layout.height;
@@ -306,24 +305,33 @@ var CollapsibleTabView = forwardRef3(
         }
       }
     }, []);
-    const syncTabOnSwitch = useCallback3(
-      (newIndex) => {
-        const currentY = tabScrollYMap.current.get(activeIndex) ?? 0;
-        const newTabSavedY = tabScrollYMap.current.get(newIndex) ?? 0;
-        const isCollapsed = currentY >= collapseRange - 1;
-        let targetY;
-        if (isCollapsed) {
-          targetY = Math.max(newTabSavedY, collapseRange);
-        } else {
-          targetY = Math.min(currentY, collapseRange);
+    const syncTabOnSwitch = useCallback3((newIndex) => {
+      const currentY = tabScrollYMap.current.get(activeIndex) ?? 0;
+      const newTabSavedY = tabScrollYMap.current.get(newIndex) ?? 0;
+      const isCollapsed = currentY >= collapseRange - 1;
+      const targetY = isCollapsed ? Math.max(newTabSavedY, collapseRange) : Math.min(currentY, collapseRange);
+      scrollTabTo(newIndex, targetY);
+      tabScrollYMap.current.set(newIndex, targetY);
+      scrollY.setValue(Math.min(targetY, collapseRange));
+    }, []);
+    const preSyncAdjacentTabs = useCallback3(() => {
+      const currentY = tabScrollYMap.current.get(activeIndex) ?? 0;
+      const isCollapsed = currentY >= collapseRange - 1;
+      for (const i of [activeIndex - 1, activeIndex + 1]) {
+        if (i < 0 || i >= pages.length) continue;
+        const savedY = tabScrollYMap.current.get(i) ?? 0;
+        const targetY = isCollapsed ? Math.max(savedY, collapseRange) : Math.min(currentY, collapseRange);
+        scrollTabTo(i, targetY);
+        tabScrollYMap.current.set(i, targetY);
+      }
+    }, [activeIndex, collapseRange, pages.length, scrollTabTo]);
+    const handlePageScrollStateChanged = useCallback3(
+      (e) => {
+        if (e.nativeEvent.pageScrollState === "dragging") {
+          preSyncAdjacentTabs();
         }
-        InteractionManager.runAfterInteractions(() => {
-          scrollTabTo(newIndex, targetY);
-          tabScrollYMap.current.set(newIndex, targetY);
-          scrollY.setValue(Math.min(targetY, collapseRange));
-        });
       },
-      [activeIndex, collapseRange, scrollTabTo, scrollY]
+      [preSyncAdjacentTabs]
     );
     const handleTabPress = useCallback3(
       (index) => {
@@ -333,17 +341,18 @@ var CollapsibleTabView = forwardRef3(
         pagerRef.current?.setPageWithoutAnimation(index);
         onTabChange?.(index);
       },
-      [activeIndex, onTabChange, syncTabOnSwitch]
+      [activeIndex, syncTabOnSwitch, onTabChange]
     );
     const handlePageSelected = useCallback3(
       (e) => {
         const newIndex = e.nativeEvent.position;
         if (newIndex === activeIndex) return;
-        syncTabOnSwitch(newIndex);
+        const savedY = tabScrollYMap.current.get(newIndex) ?? 0;
+        scrollY.setValue(Math.min(savedY, collapseRange));
         setActiveIndex(newIndex);
         onTabChange?.(newIndex);
       },
-      [activeIndex, onTabChange, syncTabOnSwitch]
+      [activeIndex, collapseRange, scrollY, onTabChange]
     );
     const tabBarProps = useMemo2(
       () => ({
@@ -396,6 +405,7 @@ var CollapsibleTabView = forwardRef3(
           style: styles.pager,
           initialPage: initialTabIndex,
           onPageSelected: handlePageSelected,
+          onPageScrollStateChanged: handlePageScrollStateChanged,
           scrollEnabled: swipeEnabled
         },
         pages.map((page, i) => /* @__PURE__ */ React3.createElement(View2, { key: page?.key ?? i, style: styles.page }, /* @__PURE__ */ React3.createElement(TabIndexContext.Provider, { value: i }, page)))

package/dist/{index.d.ts.map → src/index.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAaf,OAAO,EAEL,uBAAuB,EACvB,qBAAqB,EAEtB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,uBAAuB,EACvB,qBAAqB,EACrB,WAAW,GACZ,MAAM,SAAS,CAAC;AAEjB,QAAA,MAAM,kBAAkB,uGAySvB,CAAC;AAwBF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAYf,OAAO,EAEL,uBAAuB,EACvB,qBAAqB,EAEtB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,uBAAuB,EACvB,qBAAqB,EACrB,WAAW,GACZ,MAAM,SAAS,CAAC;AAEjB,QAAA,MAAM,kBAAkB,uGA0TvB,CAAC;AAwBF,eAAe,kBAAkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-collapsible-header-tab-view",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "不依赖 react-native-reanimated ，可吸顶的tab view",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",