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

package/README.md

@@ -9,7 +9,7 @@
 ✨ **轻量级** - 不依赖 react-native-reanimated  
 🎯 **高性能** - 优化的滚动性能  
 📱 **吸顶效果** - 完整的粘性头部和标签栏支持  
-🔄 **灵活** - 支持 FlatList 和 ScrollView  
+🔄 **灵活** - 支持 FlatList、SectionList 和 ScrollView  
 ⚡ **TypeScript** - 完整的类型支持  
 
 ## 安装
@@ -31,8 +31,18 @@ npm install react-native-pager-view
 
 ### 基础示例
 
+`TabFlatList`、`TabSectionList`、`TabScrollView` 可以在同一个 `CollapsibleTabView` 中混合使用，每个子组件对应一个 Tab 页。
+
 ```jsx
-import CollapsibleTabView , { TabFlatList } from 'react-native-collapsible-header-tab-view';
+import CollapsibleTabView, {
+  TabFlatList,
+  TabSectionList,
+} from 'react-native-collapsible-header-tab-view';
+
+const sections = [
+  { title: 'A', data: ['Alice', 'Amy'] },
+  { title: 'B', data: ['Bob', 'Ben'] },
+];
 
 export function App() {
   return (
@@ -40,15 +50,18 @@ export function App() {
       renderHeader={() => <HeaderComponent />}
       renderTabBar={(props) => <TabBarComponent {...props} />}
     >
+      {/* Tab 1: FlatList */}
       <TabFlatList
-        data={data1}
+        data={data}
         renderItem={({ item }) => <ItemComponent item={item} />}
         keyExtractor={(item) => item.id}
       />
-      <TabFlatList
-        data={data2}
-        renderItem={({ item }) => <ItemComponent item={item} />}
-        keyExtractor={(item) => item.id}
+      {/* Tab 2: SectionList */}
+      <TabSectionList
+        sections={sections}
+        renderItem={({ item }) => <Text>{item}</Text>}
+        renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
+        keyExtractor={(item, index) => item + index}
       />
     </CollapsibleTabView>
   );
@@ -75,13 +88,25 @@ export function App() {
 
 ### TabFlatList
 
+继承所有 `FlatList` 的 Props。
+
 | 属性 | 类型 | 说明 |
 |------|------|------|
-| index | `number` | 必需，标签页索引 |
 | data | `T[]` | 列表数据 |
 | renderItem | `(info: { item: T, index: number }) => ReactNode` | 列表项渲染函数 |
 | keyExtractor | `(item: T, index: number) => string` | 列表项 key |
 
+### TabSectionList
+
+继承所有 `SectionList` 的 Props。
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| sections | `SectionListData[]` | 分组数据 |
+| renderItem | `(info: { item: T, index: number, section: S }) => ReactNode` | 列表项渲染函数 |
+| renderSectionHeader | `(info: { section: S }) => ReactNode` | 分组头部渲染函数 |
+| keyExtractor | `(item: T, index: number) => string` | 列表项 key |
+
 ## Ref Methods
 
 ```typescript

package/dist/index.js

@@ -32,11 +32,12 @@ var index_exports = {};
 __export(index_exports, {
   TabFlatList: () => TabFlatList,
   TabScrollView: () => TabScrollView,
+  TabSectionList: () => TabSectionList,
   default: () => index_default
 });
 module.exports = __toCommonJS(index_exports);
-var import_react4 = __toESM(require("react"));
-var import_react_native3 = require("react-native");
+var import_react5 = __toESM(require("react"));
+var import_react_native4 = require("react-native");
 var import_react_native_pager_view = __toESM(require("react-native-pager-view"));
 
 // src/context.ts
@@ -180,8 +181,76 @@ var TabScrollView = (0, import_react3.forwardRef)(
   }
 );
 
+// src/TabSectionList.tsx
+var import_react4 = __toESM(require("react"));
+var import_react_native3 = require("react-native");
+var AnimatedSectionListComponent = import_react_native3.Animated.createAnimatedComponent(import_react_native3.SectionList);
+var AnimatedSectionList = AnimatedSectionListComponent;
+var TabSectionListInner = ({ contentContainerStyle, onScroll, ListHeaderComponent, ...props }, ref) => {
+  const index = useTabIndex();
+  const {
+    scrollY,
+    activeIndex,
+    stickyEnabled,
+    headerHeight,
+    tabBarHeight,
+    renderHeader,
+    renderTabBar,
+    registerRef,
+    syncScrollY
+  } = useCollapsible();
+  const innerRef = (0, import_react4.useRef)(null);
+  const isActive = activeIndex === index;
+  (0, import_react4.useEffect)(() => {
+    registerRef(index, innerRef.current);
+    return () => registerRef(index, null);
+  }, [index]);
+  (0, import_react4.useImperativeHandle)(ref, () => innerRef.current, []);
+  const handleScroll = (0, import_react4.useCallback)(
+    (e) => {
+      const y = e.nativeEvent.contentOffset.y;
+      syncScrollY(index, y);
+      onScroll?.(e);
+    },
+    [index, onScroll, syncScrollY]
+  );
+  const mergedHeader = (0, import_react4.useMemo)(() => {
+    if (stickyEnabled) return ListHeaderComponent;
+    const OriginalHeader = typeof ListHeaderComponent === "function" ? /* @__PURE__ */ import_react4.default.createElement(ListHeaderComponent, null) : ListHeaderComponent ?? null;
+    return /* @__PURE__ */ import_react4.default.createElement(import_react_native3.View, null, renderHeader?.(), renderTabBar?.(), OriginalHeader);
+  }, [stickyEnabled, ListHeaderComponent, renderHeader, renderTabBar]);
+  const paddingTop = stickyEnabled ? headerHeight + tabBarHeight : 0;
+  const collapseRange = stickyEnabled ? headerHeight : 0;
+  const [containerHeight, setContainerHeight] = (0, import_react4.useState)(0);
+  const handleLayout = (0, import_react4.useCallback)((e) => {
+    setContainerHeight(e.nativeEvent.layout.height);
+  }, []);
+  const minHeight = containerHeight > 0 ? containerHeight + collapseRange : 0;
+  return /* @__PURE__ */ import_react4.default.createElement(
+    AnimatedSectionList,
+    {
+      ...props,
+      ref: innerRef,
+      onLayout: handleLayout,
+      ListHeaderComponent: mergedHeader,
+      contentContainerStyle: [
+        paddingTop > 0 && { paddingTop },
+        minHeight > 0 && { minHeight },
+        contentContainerStyle
+      ],
+      onScroll: isActive && stickyEnabled ? import_react_native3.Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+        useNativeDriver: true,
+        listener: handleScroll
+      }) : handleScroll,
+      scrollEventThrottle: 16,
+      showsVerticalScrollIndicator: false
+    }
+  );
+};
+var TabSectionList = (0, import_react4.forwardRef)(TabSectionListInner);
+
 // src/index.tsx
-var CollapsibleTabView = (0, import_react4.forwardRef)(
+var CollapsibleTabView = (0, import_react5.forwardRef)(
   ({
     children,
     renderHeader,
@@ -196,13 +265,13 @@ var CollapsibleTabView = (0, import_react4.forwardRef)(
     swipeEnabled = true,
     style
   }, ref) => {
-    const [activeIndex, setActiveIndex] = (0, import_react4.useState)(initialTabIndex);
-    const pagerRef = (0, import_react4.useRef)(null);
-    const pages = (0, import_react4.useMemo)(
-      () => import_react4.default.Children.toArray(children).filter(import_react4.default.isValidElement),
+    const [activeIndex, setActiveIndex] = (0, import_react5.useState)(initialTabIndex);
+    const pagerRef = (0, import_react5.useRef)(null);
+    const pages = (0, import_react5.useMemo)(
+      () => import_react5.default.Children.toArray(children).filter(import_react5.default.isValidElement),
       [children]
     );
-    (0, import_react4.useImperativeHandle)(ref, () => ({
+    (0, import_react5.useImperativeHandle)(ref, () => ({
       scrollToTab: (index, animated = true) => {
         if (index === activeIndex || index < 0 || index >= pages.length) return;
         syncTabOnSwitch(index);
@@ -217,17 +286,17 @@ var CollapsibleTabView = (0, import_react4.forwardRef)(
       getActiveIndex: () => activeIndex
     }));
     const hasEstimate = estimatedHeaderHeight > 0;
-    const headerHeightRef = (0, import_react4.useRef)(0);
-    const tabBarHeightRef = (0, import_react4.useRef)(0);
-    const [layout, setLayout] = (0, import_react4.useState)({
+    const headerHeightRef = (0, import_react5.useRef)(0);
+    const tabBarHeightRef = (0, import_react5.useRef)(0);
+    const [layout, setLayout] = (0, import_react5.useState)({
       headerHeight: estimatedHeaderHeight,
       tabBarHeight: estimatedTabBarHeight,
       ready: hasEstimate
     });
     const { headerHeight, tabBarHeight } = layout;
     const visible = layout.ready;
-    const adjustY = (0, import_react4.useRef)(new import_react_native3.Animated.Value(0)).current;
-    const tryCommitLayout = (0, import_react4.useCallback)(() => {
+    const adjustY = (0, import_react5.useRef)(new import_react_native4.Animated.Value(0)).current;
+    const tryCommitLayout = (0, import_react5.useCallback)(() => {
       const h = headerHeightRef.current;
       const t = tabBarHeightRef.current;
       if (h > 0 && t > 0) {
@@ -238,7 +307,7 @@ var CollapsibleTabView = (0, import_react4.forwardRef)(
           const diff = h + t - (prev.headerHeight + prev.tabBarHeight);
           if (prev.ready && Math.abs(diff) > 1) {
             adjustY.setValue(-diff);
-            import_react_native3.Animated.timing(adjustY, {
+            import_react_native4.Animated.timing(adjustY, {
               toValue: 0,
               duration: 200,
               useNativeDriver: true
@@ -247,36 +316,36 @@ var CollapsibleTabView = (0, import_react4.forwardRef)(
           return { headerHeight: h, tabBarHeight: t, ready: true };
         });
       }
-    }, []);
-    const handleHeaderLayout = (0, import_react4.useCallback)(
+    }, [adjustY]);
+    const handleHeaderLayout = (0, import_react5.useCallback)(
       (e) => {
         headerHeightRef.current = e.nativeEvent.layout.height;
         tryCommitLayout();
       },
       [tryCommitLayout]
     );
-    const handleTabBarLayout = (0, import_react4.useCallback)(
+    const handleTabBarLayout = (0, import_react5.useCallback)(
       (e) => {
         tabBarHeightRef.current = e.nativeEvent.layout.height;
         tryCommitLayout();
       },
       [tryCommitLayout]
     );
-    const scrollY = (0, import_react4.useRef)(new import_react_native3.Animated.Value(0)).current;
-    const tabScrollYMap = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
-    const tabRefs = (0, import_react4.useRef)(
+    const scrollY = (0, import_react5.useRef)(new import_react_native4.Animated.Value(0)).current;
+    const tabScrollYMap = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
+    const tabRefs = (0, import_react5.useRef)(
       /* @__PURE__ */ new Map()
     );
     const collapseRange = stickyEnabled ? Math.max(headerHeight - stickyTop, 0) : 0;
-    const headerTranslateY = (0, import_react4.useMemo)(
+    const headerTranslateY = (0, import_react5.useMemo)(
       () => collapseRange > 0 ? scrollY.interpolate({
         inputRange: [0, collapseRange],
         outputRange: [0, -collapseRange],
         extrapolate: "clamp"
-      }) : new import_react_native3.Animated.Value(0),
+      }) : new import_react_native4.Animated.Value(0),
       [scrollY, collapseRange]
     );
-    const registerRef = (0, import_react4.useCallback)(
+    const registerRef = (0, import_react5.useCallback)(
       (index, ref2) => {
         if (ref2) {
           tabRefs.current.set(index, ref2);
@@ -286,14 +355,14 @@ var CollapsibleTabView = (0, import_react4.forwardRef)(
       },
       []
     );
-    const syncScrollY = (0, import_react4.useCallback)(
+    const syncScrollY = (0, import_react5.useCallback)(
       (index, y) => {
         tabScrollYMap.current.set(index, y);
         onScrollProp?.(y);
       },
       [onScrollProp]
     );
-    const scrollTabTo = (0, import_react4.useCallback)((index, offset) => {
+    const scrollTabTo = (0, import_react5.useCallback)((index, offset) => {
       const ref2 = tabRefs.current.get(index);
       if (!ref2) return;
       if (ref2.scrollToOffset) {
@@ -309,26 +378,35 @@ 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_react5.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_react5.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_react5.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)(
+    const handleTabPress = (0, import_react5.useCallback)(
       (index) => {
         if (index === activeIndex) return;
         syncTabOnSwitch(index);
@@ -336,30 +414,31 @@ var CollapsibleTabView = (0, import_react4.forwardRef)(
         pagerRef.current?.setPageWithoutAnimation(index);
         onTabChange?.(index);
       },
-      [activeIndex, onTabChange, syncTabOnSwitch]
+      [activeIndex, syncTabOnSwitch, onTabChange]
     );
-    const handlePageSelected = (0, import_react4.useCallback)(
+    const handlePageSelected = (0, import_react5.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)(
+    const tabBarProps = (0, import_react5.useMemo)(
       () => ({
         activeIndex,
         onTabPress: handleTabPress
       }),
       [activeIndex, handleTabPress]
     );
-    const renderTabBarNode = (0, import_react4.useCallback)(
+    const renderTabBarNode = (0, import_react5.useCallback)(
       () => renderTabBar(tabBarProps),
       [renderTabBar, tabBarProps]
     );
-    const contextValue = (0, import_react4.useMemo)(
+    const contextValue = (0, import_react5.useMemo)(
       () => ({
         scrollY,
         activeIndex,
@@ -383,8 +462,8 @@ var CollapsibleTabView = (0, import_react4.forwardRef)(
         syncScrollY
       ]
     );
-    return /* @__PURE__ */ import_react4.default.createElement(CollapsibleContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react4.default.createElement(import_react_native3.View, { style: [styles.container, style] }, /* @__PURE__ */ import_react4.default.createElement(
-      import_react_native3.Animated.View,
+    return /* @__PURE__ */ import_react5.default.createElement(CollapsibleContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react5.default.createElement(import_react_native4.View, { style: [styles.container, style] }, /* @__PURE__ */ import_react5.default.createElement(
+      import_react_native4.Animated.View,
       {
         style: [
           styles.pager,
@@ -392,19 +471,20 @@ var CollapsibleTabView = (0, import_react4.forwardRef)(
           { transform: [{ translateY: adjustY }] }
         ]
       },
-      /* @__PURE__ */ import_react4.default.createElement(
+      /* @__PURE__ */ import_react5.default.createElement(
         import_react_native_pager_view.default,
         {
           ref: pagerRef,
           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)))
+        pages.map((page, i) => /* @__PURE__ */ import_react5.default.createElement(import_react_native4.View, { key: page?.key ?? i, style: styles.page }, /* @__PURE__ */ import_react5.default.createElement(TabIndexContext.Provider, { value: i }, page)))
       )
-    ), stickyEnabled && /* @__PURE__ */ import_react4.default.createElement(
-      import_react_native3.Animated.View,
+    ), stickyEnabled && /* @__PURE__ */ import_react5.default.createElement(
+      import_react_native4.Animated.View,
       {
         style: [
           styles.overlay,
@@ -412,12 +492,12 @@ var CollapsibleTabView = (0, import_react4.forwardRef)(
         ],
         pointerEvents: "box-none"
       },
-      /* @__PURE__ */ import_react4.default.createElement(import_react_native3.View, { pointerEvents: "box-none", onLayout: handleHeaderLayout }, renderHeader()),
-      /* @__PURE__ */ import_react4.default.createElement(import_react_native3.View, { onLayout: handleTabBarLayout }, renderTabBarNode())
+      /* @__PURE__ */ import_react5.default.createElement(import_react_native4.View, { pointerEvents: "box-none", onLayout: handleHeaderLayout }, renderHeader()),
+      /* @__PURE__ */ import_react5.default.createElement(import_react_native4.View, { onLayout: handleTabBarLayout }, renderTabBarNode())
     )));
   }
 );
-var styles = import_react_native3.StyleSheet.create({
+var styles = import_react_native4.StyleSheet.create({
   container: {
     flex: 1
   },
@@ -442,5 +522,6 @@ var index_default = CollapsibleTabView;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   TabFlatList,
-  TabScrollView
+  TabScrollView,
+  TabSectionList
 });

package/dist/index.mjs

@@ -1,17 +1,16 @@
 // src/index.tsx
-import React3, {
-  forwardRef as forwardRef3,
-  useCallback as useCallback3,
-  useImperativeHandle as useImperativeHandle3,
-  useMemo as useMemo2,
-  useRef as useRef3,
-  useState as useState3
+import React4, {
+  forwardRef as forwardRef4,
+  useCallback as useCallback4,
+  useImperativeHandle as useImperativeHandle4,
+  useMemo as useMemo3,
+  useRef as useRef4,
+  useState as useState4
 } from "react";
 import {
-  Animated as Animated3,
-  InteractionManager,
+  Animated as Animated4,
   StyleSheet,
-  View as View2
+  View as View3
 } from "react-native";
 import PagerView from "react-native-pager-view";
 
@@ -177,8 +176,88 @@ var TabScrollView = forwardRef2(
   }
 );
 
+// src/TabSectionList.tsx
+import React3, {
+  forwardRef as forwardRef3,
+  useCallback as useCallback3,
+  useEffect as useEffect3,
+  useImperativeHandle as useImperativeHandle3,
+  useMemo as useMemo2,
+  useRef as useRef3,
+  useState as useState3
+} from "react";
+import {
+  Animated as Animated3,
+  SectionList,
+  View as View2
+} from "react-native";
+var AnimatedSectionListComponent = Animated3.createAnimatedComponent(SectionList);
+var AnimatedSectionList = AnimatedSectionListComponent;
+var TabSectionListInner = ({ contentContainerStyle, onScroll, ListHeaderComponent, ...props }, ref) => {
+  const index = useTabIndex();
+  const {
+    scrollY,
+    activeIndex,
+    stickyEnabled,
+    headerHeight,
+    tabBarHeight,
+    renderHeader,
+    renderTabBar,
+    registerRef,
+    syncScrollY
+  } = useCollapsible();
+  const innerRef = useRef3(null);
+  const isActive = activeIndex === index;
+  useEffect3(() => {
+    registerRef(index, innerRef.current);
+    return () => registerRef(index, null);
+  }, [index]);
+  useImperativeHandle3(ref, () => innerRef.current, []);
+  const handleScroll = useCallback3(
+    (e) => {
+      const y = e.nativeEvent.contentOffset.y;
+      syncScrollY(index, y);
+      onScroll?.(e);
+    },
+    [index, onScroll, syncScrollY]
+  );
+  const mergedHeader = useMemo2(() => {
+    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);
+  }, [stickyEnabled, ListHeaderComponent, renderHeader, renderTabBar]);
+  const paddingTop = stickyEnabled ? headerHeight + tabBarHeight : 0;
+  const collapseRange = stickyEnabled ? headerHeight : 0;
+  const [containerHeight, setContainerHeight] = useState3(0);
+  const handleLayout = useCallback3((e) => {
+    setContainerHeight(e.nativeEvent.layout.height);
+  }, []);
+  const minHeight = containerHeight > 0 ? containerHeight + collapseRange : 0;
+  return /* @__PURE__ */ React3.createElement(
+    AnimatedSectionList,
+    {
+      ...props,
+      ref: innerRef,
+      onLayout: handleLayout,
+      ListHeaderComponent: mergedHeader,
+      contentContainerStyle: [
+        paddingTop > 0 && { paddingTop },
+        minHeight > 0 && { minHeight },
+        contentContainerStyle
+      ],
+      onScroll: isActive && stickyEnabled ? Animated3.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+        useNativeDriver: true,
+        listener: handleScroll
+      }) : handleScroll,
+      scrollEventThrottle: 16,
+      showsVerticalScrollIndicator: false
+    }
+  );
+};
+var TabSectionList = forwardRef3(TabSectionListInner);
+
 // src/index.tsx
-var CollapsibleTabView = forwardRef3(
+var CollapsibleTabView = forwardRef4(
   ({
     children,
     renderHeader,
@@ -193,13 +272,13 @@ var CollapsibleTabView = forwardRef3(
     swipeEnabled = true,
     style
   }, ref) => {
-    const [activeIndex, setActiveIndex] = useState3(initialTabIndex);
-    const pagerRef = useRef3(null);
-    const pages = useMemo2(
-      () => React3.Children.toArray(children).filter(React3.isValidElement),
+    const [activeIndex, setActiveIndex] = useState4(initialTabIndex);
+    const pagerRef = useRef4(null);
+    const pages = useMemo3(
+      () => React4.Children.toArray(children).filter(React4.isValidElement),
       [children]
     );
-    useImperativeHandle3(ref, () => ({
+    useImperativeHandle4(ref, () => ({
       scrollToTab: (index, animated = true) => {
         if (index === activeIndex || index < 0 || index >= pages.length) return;
         syncTabOnSwitch(index);
@@ -214,17 +293,17 @@ var CollapsibleTabView = forwardRef3(
       getActiveIndex: () => activeIndex
     }));
     const hasEstimate = estimatedHeaderHeight > 0;
-    const headerHeightRef = useRef3(0);
-    const tabBarHeightRef = useRef3(0);
-    const [layout, setLayout] = useState3({
+    const headerHeightRef = useRef4(0);
+    const tabBarHeightRef = useRef4(0);
+    const [layout, setLayout] = useState4({
       headerHeight: estimatedHeaderHeight,
       tabBarHeight: estimatedTabBarHeight,
       ready: hasEstimate
     });
     const { headerHeight, tabBarHeight } = layout;
     const visible = layout.ready;
-    const adjustY = useRef3(new Animated3.Value(0)).current;
-    const tryCommitLayout = useCallback3(() => {
+    const adjustY = useRef4(new Animated4.Value(0)).current;
+    const tryCommitLayout = useCallback4(() => {
       const h = headerHeightRef.current;
       const t = tabBarHeightRef.current;
       if (h > 0 && t > 0) {
@@ -235,7 +314,7 @@ var CollapsibleTabView = forwardRef3(
           const diff = h + t - (prev.headerHeight + prev.tabBarHeight);
           if (prev.ready && Math.abs(diff) > 1) {
             adjustY.setValue(-diff);
-            Animated3.timing(adjustY, {
+            Animated4.timing(adjustY, {
               toValue: 0,
               duration: 200,
               useNativeDriver: true
@@ -244,36 +323,36 @@ var CollapsibleTabView = forwardRef3(
           return { headerHeight: h, tabBarHeight: t, ready: true };
         });
       }
-    }, []);
-    const handleHeaderLayout = useCallback3(
+    }, [adjustY]);
+    const handleHeaderLayout = useCallback4(
       (e) => {
         headerHeightRef.current = e.nativeEvent.layout.height;
         tryCommitLayout();
       },
       [tryCommitLayout]
     );
-    const handleTabBarLayout = useCallback3(
+    const handleTabBarLayout = useCallback4(
       (e) => {
         tabBarHeightRef.current = e.nativeEvent.layout.height;
         tryCommitLayout();
       },
       [tryCommitLayout]
     );
-    const scrollY = useRef3(new Animated3.Value(0)).current;
-    const tabScrollYMap = useRef3(/* @__PURE__ */ new Map());
-    const tabRefs = useRef3(
+    const scrollY = useRef4(new Animated4.Value(0)).current;
+    const tabScrollYMap = useRef4(/* @__PURE__ */ new Map());
+    const tabRefs = useRef4(
       /* @__PURE__ */ new Map()
     );
     const collapseRange = stickyEnabled ? Math.max(headerHeight - stickyTop, 0) : 0;
-    const headerTranslateY = useMemo2(
+    const headerTranslateY = useMemo3(
       () => collapseRange > 0 ? scrollY.interpolate({
         inputRange: [0, collapseRange],
         outputRange: [0, -collapseRange],
         extrapolate: "clamp"
-      }) : new Animated3.Value(0),
+      }) : new Animated4.Value(0),
       [scrollY, collapseRange]
     );
-    const registerRef = useCallback3(
+    const registerRef = useCallback4(
       (index, ref2) => {
         if (ref2) {
           tabRefs.current.set(index, ref2);
@@ -283,14 +362,14 @@ var CollapsibleTabView = forwardRef3(
       },
       []
     );
-    const syncScrollY = useCallback3(
+    const syncScrollY = useCallback4(
       (index, y) => {
         tabScrollYMap.current.set(index, y);
         onScrollProp?.(y);
       },
       [onScrollProp]
     );
-    const scrollTabTo = useCallback3((index, offset) => {
+    const scrollTabTo = useCallback4((index, offset) => {
       const ref2 = tabRefs.current.get(index);
       if (!ref2) return;
       if (ref2.scrollToOffset) {
@@ -306,26 +385,35 @@ 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 = useCallback4((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 = useCallback4(() => {
+      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 = useCallback4(
+      (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(
+    const handleTabPress = useCallback4(
       (index) => {
         if (index === activeIndex) return;
         syncTabOnSwitch(index);
@@ -333,30 +421,31 @@ var CollapsibleTabView = forwardRef3(
         pagerRef.current?.setPageWithoutAnimation(index);
         onTabChange?.(index);
       },
-      [activeIndex, onTabChange, syncTabOnSwitch]
+      [activeIndex, syncTabOnSwitch, onTabChange]
     );
-    const handlePageSelected = useCallback3(
+    const handlePageSelected = useCallback4(
       (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(
+    const tabBarProps = useMemo3(
       () => ({
         activeIndex,
         onTabPress: handleTabPress
       }),
       [activeIndex, handleTabPress]
     );
-    const renderTabBarNode = useCallback3(
+    const renderTabBarNode = useCallback4(
       () => renderTabBar(tabBarProps),
       [renderTabBar, tabBarProps]
     );
-    const contextValue = useMemo2(
+    const contextValue = useMemo3(
       () => ({
         scrollY,
         activeIndex,
@@ -380,8 +469,8 @@ var CollapsibleTabView = forwardRef3(
         syncScrollY
       ]
     );
-    return /* @__PURE__ */ React3.createElement(CollapsibleContext.Provider, { value: contextValue }, /* @__PURE__ */ React3.createElement(View2, { style: [styles.container, style] }, /* @__PURE__ */ React3.createElement(
-      Animated3.View,
+    return /* @__PURE__ */ React4.createElement(CollapsibleContext.Provider, { value: contextValue }, /* @__PURE__ */ React4.createElement(View3, { style: [styles.container, style] }, /* @__PURE__ */ React4.createElement(
+      Animated4.View,
       {
         style: [
           styles.pager,
@@ -389,19 +478,20 @@ var CollapsibleTabView = forwardRef3(
           { transform: [{ translateY: adjustY }] }
         ]
       },
-      /* @__PURE__ */ React3.createElement(
+      /* @__PURE__ */ React4.createElement(
         PagerView,
         {
           ref: pagerRef,
           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)))
+        pages.map((page, i) => /* @__PURE__ */ React4.createElement(View3, { key: page?.key ?? i, style: styles.page }, /* @__PURE__ */ React4.createElement(TabIndexContext.Provider, { value: i }, page)))
       )
-    ), stickyEnabled && /* @__PURE__ */ React3.createElement(
-      Animated3.View,
+    ), stickyEnabled && /* @__PURE__ */ React4.createElement(
+      Animated4.View,
       {
         style: [
           styles.overlay,
@@ -409,8 +499,8 @@ var CollapsibleTabView = forwardRef3(
         ],
         pointerEvents: "box-none"
       },
-      /* @__PURE__ */ React3.createElement(View2, { pointerEvents: "box-none", onLayout: handleHeaderLayout }, renderHeader()),
-      /* @__PURE__ */ React3.createElement(View2, { onLayout: handleTabBarLayout }, renderTabBarNode())
+      /* @__PURE__ */ React4.createElement(View3, { pointerEvents: "box-none", onLayout: handleHeaderLayout }, renderHeader()),
+      /* @__PURE__ */ React4.createElement(View3, { onLayout: handleTabBarLayout }, renderTabBarNode())
     )));
   }
 );
@@ -439,5 +529,6 @@ var index_default = CollapsibleTabView;
 export {
   TabFlatList,
   TabScrollView,
+  TabSectionList,
   index_default as default
 };

package/dist/src/TabSectionList.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { NativeScrollEvent, NativeSyntheticEvent, SectionList, SectionListProps } from "react-native";
+export type TabSectionListProps<T = any> = Omit<SectionListProps<T>, "onScroll"> & {
+    onScroll?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
+};
+export declare const TabSectionList: <T>(props: TabSectionListProps<T> & {
+    ref?: React.Ref<SectionList<T>>;
+}) => React.ReactElement;
+//# sourceMappingURL=TabSectionList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabSectionList.d.ts","sourceRoot":"","sources":["../../src/TabSectionList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAA;AACd,OAAO,EAGL,iBAAiB,EACjB,oBAAoB,EACpB,WAAW,EACX,gBAAgB,EAEjB,MAAM,cAAc,CAAA;AAUrB,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG;IACjF,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;CAChE,CAAA;AA0FD,eAAO,MAAM,cAAc,EAAsC,CAAC,CAAC,EACjE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,KAChE,KAAK,CAAC,YAAY,CAAA"}

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

@@ -2,6 +2,7 @@ import React from "react";
 import { CollapsibleTabViewProps, CollapsibleTabViewRef } from "./types";
 export { TabFlatList } from "./TabFlatList";
 export { TabScrollView } from "./TabScrollView";
+export { TabSectionList } from "./TabSectionList";
 export type { CollapsibleTabViewProps, CollapsibleTabViewRef, TabBarProps, } from "./types";
 declare const CollapsibleTabView: React.ForwardRefExoticComponent<CollapsibleTabViewProps & React.RefAttributes<CollapsibleTabViewRef>>;
 export default CollapsibleTabView;

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;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"}

package/dist/{types.d.ts → src/types.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import { Animated, FlatList, ScrollView, StyleProp, ViewStyle } from "react-native";
+import { Animated, FlatList, ScrollView, SectionList, StyleProp, ViewStyle } from "react-native";
 export interface TabBarProps {
     activeIndex: number;
     onTabPress: (index: number) => void;
@@ -30,7 +30,7 @@ export interface CollapsibleContextValue {
     tabBarHeight: number;
     renderHeader?: () => React.ReactNode;
     renderTabBar?: () => React.ReactNode;
-    registerRef: (index: number, ref: FlatList<any> | ScrollView | null) => void;
+    registerRef: (index: number, ref: FlatList<any> | SectionList<any> | ScrollView | null) => void;
     syncScrollY: (index: number, y: number) => void;
 }
 //# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAEhG,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACpC;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IACnC,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,KAAK,CAAC,SAAS,CAAA;IACrD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAED,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IACxD,cAAc,EAAE,MAAM,MAAM,CAAA;CAC7B;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,OAAO,CAAA;IACtB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IACpC,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IACpC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,UAAU,GAAG,IAAI,KAAK,IAAI,CAAA;IAC/F,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAChD"}

package/package.json

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

package/dist/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAEnF,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACpC;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IACnC,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,KAAK,CAAC,SAAS,CAAA;IACrD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAED,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IACxD,cAAc,EAAE,MAAM,MAAM,CAAA;CAC7B;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,OAAO,CAAA;IACtB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IACpC,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IACpC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,UAAU,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5E,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAChD"}