react-native-collapsible-header-tab-view 1.0.5 → 1.0.6

package/dist/index.js

@@ -135,7 +135,17 @@ var import_react_native2 = require("react-native");
 var TabScrollView = (0, import_react3.forwardRef)(
   ({ contentContainerStyle, onScroll, children, ...props }, ref) => {
     const index = useTabIndex();
-    const { scrollY, activeIndex, headerHeight, tabBarHeight, registerRef, syncScrollY } = useCollapsible();
+    const {
+      scrollY,
+      activeIndex,
+      stickyEnabled,
+      headerHeight,
+      tabBarHeight,
+      renderHeader,
+      renderTabBar,
+      registerRef,
+      syncScrollY
+    } = useCollapsible();
     const innerRef = (0, import_react3.useRef)(null);
     const isActive = activeIndex === index;
     (0, import_react3.useEffect)(() => {
@@ -151,8 +161,12 @@ var TabScrollView = (0, import_react3.forwardRef)(
       },
       [index, onScroll, syncScrollY]
     );
-    const paddingTop = headerHeight + tabBarHeight;
-    const collapseRange = headerHeight;
+    const mergedChildren = (0, import_react3.useMemo)(() => {
+      if (stickyEnabled) return children;
+      return /* @__PURE__ */ import_react3.default.createElement(import_react_native2.View, null, renderHeader?.(), renderTabBar?.(), children);
+    }, [stickyEnabled, children, renderHeader, renderTabBar]);
+    const paddingTop = stickyEnabled ? headerHeight + tabBarHeight : 0;
+    const collapseRange = stickyEnabled ? headerHeight : 0;
     const [containerHeight, setContainerHeight] = (0, import_react3.useState)(0);
     const handleLayout = (0, import_react3.useCallback)((e) => {
       setContainerHeight(e.nativeEvent.layout.height);
@@ -165,18 +179,21 @@ var TabScrollView = (0, import_react3.forwardRef)(
         ...props,
         onLayout: handleLayout,
         contentContainerStyle: [
-          { paddingTop },
+          paddingTop > 0 && { paddingTop },
           minHeight > 0 && { minHeight },
           contentContainerStyle
         ],
-        onScroll: isActive ? import_react_native2.Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
-          useNativeDriver: true,
-          listener: handleScroll
-        }) : handleScroll,
+        onScroll: isActive && stickyEnabled ? import_react_native2.Animated.event(
+          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+          {
+            useNativeDriver: true,
+            listener: handleScroll
+          }
+        ) : handleScroll,
         scrollEventThrottle: 16,
         showsVerticalScrollIndicator: false
       },
-      children
+      mergedChildren
     );
   }
 );
@@ -337,14 +354,11 @@ var CollapsibleTabView = (0, import_react5.forwardRef)(
       /* @__PURE__ */ new Map()
     );
     const collapseRange = stickyEnabled ? Math.max(headerHeight - stickyTop, 0) : 0;
-    const headerTranslateY = (0, import_react5.useMemo)(
-      () => collapseRange > 0 ? scrollY.interpolate({
-        inputRange: [0, collapseRange],
-        outputRange: [0, -collapseRange],
-        extrapolate: "clamp"
-      }) : new import_react_native4.Animated.Value(0),
-      [scrollY, collapseRange]
-    );
+    const headerTranslateY = scrollY.interpolate({
+      inputRange: [0, Math.max(collapseRange, 1)],
+      outputRange: [0, -collapseRange],
+      extrapolate: "clamp"
+    });
     const registerRef = (0, import_react5.useCallback)(
       (index, ref2) => {
         if (ref2) {

package/dist/index.mjs

@@ -3,14 +3,14 @@ import React4, {
   forwardRef as forwardRef4,
   useCallback as useCallback4,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo3,
+  useMemo as useMemo4,
   useRef as useRef4,
   useState as useState4
 } from "react";
 import {
   Animated as Animated4,
   StyleSheet,
-  View as View3
+  View as View4
 } from "react-native";
 import PagerView from "react-native-pager-view";
 
@@ -121,16 +121,28 @@ import React2, {
   useCallback as useCallback2,
   useEffect as useEffect2,
   useImperativeHandle as useImperativeHandle2,
+  useMemo as useMemo2,
   useRef as useRef2,
   useState as useState2
 } from "react";
 import {
-  Animated as Animated2
+  Animated as Animated2,
+  View as View2
 } from "react-native";
 var TabScrollView = forwardRef2(
   ({ contentContainerStyle, onScroll, children, ...props }, ref) => {
     const index = useTabIndex();
-    const { scrollY, activeIndex, headerHeight, tabBarHeight, registerRef, syncScrollY } = useCollapsible();
+    const {
+      scrollY,
+      activeIndex,
+      stickyEnabled,
+      headerHeight,
+      tabBarHeight,
+      renderHeader,
+      renderTabBar,
+      registerRef,
+      syncScrollY
+    } = useCollapsible();
     const innerRef = useRef2(null);
     const isActive = activeIndex === index;
     useEffect2(() => {
@@ -146,8 +158,12 @@ var TabScrollView = forwardRef2(
       },
       [index, onScroll, syncScrollY]
     );
-    const paddingTop = headerHeight + tabBarHeight;
-    const collapseRange = headerHeight;
+    const mergedChildren = useMemo2(() => {
+      if (stickyEnabled) return children;
+      return /* @__PURE__ */ React2.createElement(View2, null, renderHeader?.(), renderTabBar?.(), children);
+    }, [stickyEnabled, children, renderHeader, renderTabBar]);
+    const paddingTop = stickyEnabled ? headerHeight + tabBarHeight : 0;
+    const collapseRange = stickyEnabled ? headerHeight : 0;
     const [containerHeight, setContainerHeight] = useState2(0);
     const handleLayout = useCallback2((e) => {
       setContainerHeight(e.nativeEvent.layout.height);
@@ -160,18 +176,21 @@ var TabScrollView = forwardRef2(
         ...props,
         onLayout: handleLayout,
         contentContainerStyle: [
-          { paddingTop },
+          paddingTop > 0 && { paddingTop },
           minHeight > 0 && { minHeight },
           contentContainerStyle
         ],
-        onScroll: isActive ? Animated2.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
-          useNativeDriver: true,
-          listener: handleScroll
-        }) : handleScroll,
+        onScroll: isActive && stickyEnabled ? Animated2.event(
+          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+          {
+            useNativeDriver: true,
+            listener: handleScroll
+          }
+        ) : handleScroll,
         scrollEventThrottle: 16,
         showsVerticalScrollIndicator: false
       },
-      children
+      mergedChildren
     );
   }
 );
@@ -182,14 +201,14 @@ import React3, {
   useCallback as useCallback3,
   useEffect as useEffect3,
   useImperativeHandle as useImperativeHandle3,
-  useMemo as useMemo2,
+  useMemo as useMemo3,
   useRef as useRef3,
   useState as useState3
 } from "react";
 import {
   Animated as Animated3,
   SectionList,
-  View as View2
+  View as View3
 } from "react-native";
 var AnimatedSectionListComponent = Animated3.createAnimatedComponent(SectionList);
 var AnimatedSectionList = AnimatedSectionListComponent;
@@ -221,10 +240,10 @@ var TabSectionListInner = ({ contentContainerStyle, onScroll, ListHeaderComponen
     },
     [index, onScroll, syncScrollY]
   );
-  const mergedHeader = useMemo2(() => {
+  const mergedHeader = useMemo3(() => {
     if (stickyEnabled) return ListHeaderComponent;
     const OriginalHeader = typeof ListHeaderComponent === "function" ? /* @__PURE__ */ React3.createElement(ListHeaderComponent, null) : ListHeaderComponent ?? null;
-    return /* @__PURE__ */ React3.createElement(View2, null, renderHeader?.(), renderTabBar?.(), OriginalHeader);
+    return /* @__PURE__ */ React3.createElement(View3, null, renderHeader?.(), renderTabBar?.(), OriginalHeader);
   }, [stickyEnabled, ListHeaderComponent, renderHeader, renderTabBar]);
   const paddingTop = stickyEnabled ? headerHeight + tabBarHeight : 0;
   const collapseRange = stickyEnabled ? headerHeight : 0;
@@ -274,7 +293,7 @@ var CollapsibleTabView = forwardRef4(
   }, ref) => {
     const [activeIndex, setActiveIndex] = useState4(initialTabIndex);
     const pagerRef = useRef4(null);
-    const pages = useMemo3(
+    const pages = useMemo4(
       () => React4.Children.toArray(children).filter(React4.isValidElement),
       [children]
     );
@@ -344,14 +363,11 @@ var CollapsibleTabView = forwardRef4(
       /* @__PURE__ */ new Map()
     );
     const collapseRange = stickyEnabled ? Math.max(headerHeight - stickyTop, 0) : 0;
-    const headerTranslateY = useMemo3(
-      () => collapseRange > 0 ? scrollY.interpolate({
-        inputRange: [0, collapseRange],
-        outputRange: [0, -collapseRange],
-        extrapolate: "clamp"
-      }) : new Animated4.Value(0),
-      [scrollY, collapseRange]
-    );
+    const headerTranslateY = scrollY.interpolate({
+      inputRange: [0, Math.max(collapseRange, 1)],
+      outputRange: [0, -collapseRange],
+      extrapolate: "clamp"
+    });
     const registerRef = useCallback4(
       (index, ref2) => {
         if (ref2) {
@@ -434,7 +450,7 @@ var CollapsibleTabView = forwardRef4(
       },
       [activeIndex, collapseRange, scrollY, onTabChange]
     );
-    const tabBarProps = useMemo3(
+    const tabBarProps = useMemo4(
       () => ({
         activeIndex,
         onTabPress: handleTabPress
@@ -445,7 +461,7 @@ var CollapsibleTabView = forwardRef4(
       () => renderTabBar(tabBarProps),
       [renderTabBar, tabBarProps]
     );
-    const contextValue = useMemo3(
+    const contextValue = useMemo4(
       () => ({
         scrollY,
         activeIndex,
@@ -469,7 +485,7 @@ var CollapsibleTabView = forwardRef4(
         syncScrollY
       ]
     );
-    return /* @__PURE__ */ React4.createElement(CollapsibleContext.Provider, { value: contextValue }, /* @__PURE__ */ React4.createElement(View3, { style: [styles.container, style] }, /* @__PURE__ */ React4.createElement(
+    return /* @__PURE__ */ React4.createElement(CollapsibleContext.Provider, { value: contextValue }, /* @__PURE__ */ React4.createElement(View4, { style: [styles.container, style] }, /* @__PURE__ */ React4.createElement(
       Animated4.View,
       {
         style: [
@@ -488,7 +504,7 @@ var CollapsibleTabView = forwardRef4(
           onPageScrollStateChanged: handlePageScrollStateChanged,
           scrollEnabled: swipeEnabled
         },
-        pages.map((page, i) => /* @__PURE__ */ React4.createElement(View3, { key: page?.key ?? i, style: styles.page }, /* @__PURE__ */ React4.createElement(TabIndexContext.Provider, { value: i }, page)))
+        pages.map((page, i) => /* @__PURE__ */ React4.createElement(View4, { key: page?.key ?? i, style: styles.page }, /* @__PURE__ */ React4.createElement(TabIndexContext.Provider, { value: i }, page)))
       )
     ), stickyEnabled && /* @__PURE__ */ React4.createElement(
       Animated4.View,
@@ -499,8 +515,8 @@ var CollapsibleTabView = forwardRef4(
         ],
         pointerEvents: "box-none"
       },
-      /* @__PURE__ */ React4.createElement(View3, { pointerEvents: "box-none", onLayout: handleHeaderLayout }, renderHeader()),
-      /* @__PURE__ */ React4.createElement(View3, { onLayout: handleTabBarLayout }, renderTabBarNode())
+      /* @__PURE__ */ React4.createElement(View4, { pointerEvents: "box-none", onLayout: handleHeaderLayout }, renderHeader()),
+      /* @__PURE__ */ React4.createElement(View4, { onLayout: handleTabBarLayout }, renderTabBarNode())
     )));
   }
 );

package/dist/src/TabScrollView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabScrollView.d.ts","sourceRoot":"","sources":["../../src/TabScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAA;AACd,OAAO,EAGL,iBAAiB,EACjB,oBAAoB,EACpB,UAAU,EACV,eAAe,EAChB,MAAM,cAAc,CAAA;AAIrB,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IACnE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;CAChE,CAAA;AAED,QAAA,MAAM,aAAa;eAHN,CAAC,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI;oCA+DhE,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"TabScrollView.d.ts","sourceRoot":"","sources":["../../src/TabScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAGL,iBAAiB,EACjB,oBAAoB,EACpB,UAAU,EACV,eAAe,EAEhB,MAAM,cAAc,CAAC;AAItB,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IACnE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACjE,CAAC;AAEF,QAAA,MAAM,aAAa;eAHN,CAAC,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI;oCAsFhE,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/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,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EACV,uBAAuB,EACvB,qBAAqB,EACrB,WAAW,GACZ,MAAM,SAAS,CAAC;AAEjB,QAAA,MAAM,kBAAkB,uGA0TvB,CAAC;AAwBF,eAAe,kBAAkB,CAAC"}
+{"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,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EACV,uBAAuB,EACvB,qBAAqB,EACrB,WAAW,GACZ,MAAM,SAAS,CAAC;AAEjB,QAAA,MAAM,kBAAkB,uGAuTvB,CAAC;AAwBF,eAAe,kBAAkB,CAAC"}

package/package.json

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