react-native-collapsible-header-tab-view 1.0.0 → 1.0.1

package/dist/TabFlatList.d.ts

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

package/dist/TabFlatList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabFlatList.d.ts","sourceRoot":"","sources":["../../src/TabFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,QAAQ,EACR,aAAa,EAEb,iBAAiB,EACjB,oBAAoB,EAErB,MAAM,cAAc,CAAC;AAUtB,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACjE,CAAC;AAkGF,eAAO,MAAM,WAAW,EAAmC,CAAC,CAAC,EAC3D,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,KAC1D,KAAK,CAAC,YAAY,CAAC"}

package/dist/TabScrollView.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { NativeScrollEvent, NativeSyntheticEvent, ScrollView, ScrollViewProps } from "react-native";
+export type TabScrollViewProps = Omit<ScrollViewProps, "onScroll"> & {
+    onScroll?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
+};
+declare const TabScrollView: React.ForwardRefExoticComponent<Omit<ScrollViewProps, "onScroll"> & {
+    onScroll?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
+} & React.RefAttributes<ScrollView>>;
+export { TabScrollView };
+//# sourceMappingURL=TabScrollView.d.ts.map

package/dist/TabScrollView.d.ts.map

@@ -0,0 +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"}

package/dist/context.d.ts

@@ -0,0 +1,6 @@
+import { CollapsibleContextValue } from "./types";
+export declare const CollapsibleContext: import("react").Context<CollapsibleContextValue | null>;
+export declare const TabIndexContext: import("react").Context<number>;
+export declare const useCollapsible: () => CollapsibleContextValue;
+export declare const useTabIndex: () => number;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/context.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAEjD,eAAO,MAAM,kBAAkB,yDAAsD,CAAA;AAErF,eAAO,MAAM,eAAe,iCAA2B,CAAA;AAEvD,eAAO,MAAM,cAAc,+BAM1B,CAAA;AAED,eAAO,MAAM,WAAW,cAAoC,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { CollapsibleTabViewProps, CollapsibleTabViewRef } from "./types";
+export { TabFlatList } from "./TabFlatList";
+export { TabScrollView } from "./TabScrollView";
+export type { CollapsibleTabViewProps, CollapsibleTabViewRef, TabBarProps, } from "./types";
+declare const CollapsibleTabView: React.ForwardRefExoticComponent<CollapsibleTabViewProps & React.RefAttributes<CollapsibleTabViewRef>>;
+export default CollapsibleTabView;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +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"}

package/dist/index.js

@@ -0,0 +1,446 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  TabFlatList: () => TabFlatList,
+  TabScrollView: () => TabScrollView,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+var import_react4 = __toESM(require("react"));
+var import_react_native3 = require("react-native");
+var import_react_native_pager_view = __toESM(require("react-native-pager-view"));
+
+// src/context.ts
+var import_react = require("react");
+var CollapsibleContext = (0, import_react.createContext)(null);
+var TabIndexContext = (0, import_react.createContext)(0);
+var useCollapsible = () => {
+  const ctx = (0, import_react.useContext)(CollapsibleContext);
+  if (!ctx) {
+    throw new Error("useCollapsible must be used within CollapsibleTabView");
+  }
+  return ctx;
+};
+var useTabIndex = () => (0, import_react.useContext)(TabIndexContext);
+
+// src/TabFlatList.tsx
+var import_react2 = __toESM(require("react"));
+var import_react_native = require("react-native");
+var AnimatedFlatListComponent = import_react_native.Animated.createAnimatedComponent(import_react_native.FlatList);
+var AnimatedFlatList = AnimatedFlatListComponent;
+var TabFlatListInner = ({
+  contentContainerStyle,
+  onScroll,
+  ListHeaderComponent,
+  ...props
+}, ref) => {
+  const index = useTabIndex();
+  const {
+    scrollY,
+    activeIndex,
+    stickyEnabled,
+    headerHeight,
+    tabBarHeight,
+    renderHeader,
+    renderTabBar,
+    registerRef,
+    syncScrollY
+  } = useCollapsible();
+  const innerRef = (0, import_react2.useRef)(null);
+  const isActive = activeIndex === index;
+  (0, import_react2.useEffect)(() => {
+    registerRef(index, innerRef.current);
+    return () => registerRef(index, null);
+  }, [index]);
+  (0, import_react2.useImperativeHandle)(ref, () => innerRef.current, []);
+  const handleScroll = (0, import_react2.useCallback)(
+    (e) => {
+      const y = e.nativeEvent.contentOffset.y;
+      syncScrollY(index, y);
+      onScroll?.(e);
+    },
+    [index, onScroll, syncScrollY]
+  );
+  const mergedHeader = (0, import_react2.useMemo)(() => {
+    if (stickyEnabled) return ListHeaderComponent;
+    const OriginalHeader = typeof ListHeaderComponent === "function" ? /* @__PURE__ */ import_react2.default.createElement(ListHeaderComponent, null) : ListHeaderComponent ?? null;
+    return /* @__PURE__ */ import_react2.default.createElement(import_react_native.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_react2.useState)(0);
+  const handleLayout = (0, import_react2.useCallback)((e) => {
+    setContainerHeight(e.nativeEvent.layout.height);
+  }, []);
+  const minHeight = containerHeight > 0 ? containerHeight + collapseRange : 0;
+  return /* @__PURE__ */ import_react2.default.createElement(
+    AnimatedFlatList,
+    {
+      ...props,
+      ref: innerRef,
+      onLayout: handleLayout,
+      ListHeaderComponent: mergedHeader,
+      contentContainerStyle: [
+        paddingTop > 0 && { paddingTop },
+        minHeight > 0 && { minHeight },
+        contentContainerStyle
+      ],
+      onScroll: isActive && stickyEnabled ? import_react_native.Animated.event(
+        [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+        {
+          useNativeDriver: true,
+          listener: handleScroll
+        }
+      ) : handleScroll,
+      scrollEventThrottle: 16,
+      showsVerticalScrollIndicator: false
+    }
+  );
+};
+var TabFlatList = (0, import_react2.forwardRef)(TabFlatListInner);
+
+// src/TabScrollView.tsx
+var import_react3 = __toESM(require("react"));
+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 innerRef = (0, import_react3.useRef)(null);
+    const isActive = activeIndex === index;
+    (0, import_react3.useEffect)(() => {
+      registerRef(index, innerRef.current);
+      return () => registerRef(index, null);
+    }, [index]);
+    (0, import_react3.useImperativeHandle)(ref, () => innerRef.current, []);
+    const handleScroll = (0, import_react3.useCallback)(
+      (e) => {
+        const y = e.nativeEvent.contentOffset.y;
+        syncScrollY(index, y);
+        onScroll?.(e);
+      },
+      [index, onScroll, syncScrollY]
+    );
+    const paddingTop = headerHeight + tabBarHeight;
+    const collapseRange = headerHeight;
+    const [containerHeight, setContainerHeight] = (0, import_react3.useState)(0);
+    const handleLayout = (0, import_react3.useCallback)((e) => {
+      setContainerHeight(e.nativeEvent.layout.height);
+    }, []);
+    const minHeight = containerHeight > 0 ? containerHeight + collapseRange : 0;
+    return /* @__PURE__ */ import_react3.default.createElement(
+      import_react_native2.Animated.ScrollView,
+      {
+        ref: innerRef,
+        ...props,
+        onLayout: handleLayout,
+        contentContainerStyle: [
+          { paddingTop },
+          minHeight > 0 && { minHeight },
+          contentContainerStyle
+        ],
+        onScroll: isActive ? import_react_native2.Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+          useNativeDriver: true,
+          listener: handleScroll
+        }) : handleScroll,
+        scrollEventThrottle: 16,
+        showsVerticalScrollIndicator: false
+      },
+      children
+    );
+  }
+);
+
+// src/index.tsx
+var CollapsibleTabView = (0, import_react4.forwardRef)(
+  ({
+    children,
+    renderHeader,
+    estimatedHeaderHeight = 0,
+    estimatedTabBarHeight = 0,
+    stickyEnabled = true,
+    stickyTop = 0,
+    renderTabBar,
+    initialTabIndex = 0,
+    onTabChange,
+    onScroll: onScrollProp,
+    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),
+      [children]
+    );
+    (0, import_react4.useImperativeHandle)(ref, () => ({
+      scrollToTab: (index, animated = true) => {
+        if (index === activeIndex || index < 0 || index >= pages.length) return;
+        syncTabOnSwitch(index);
+        setActiveIndex(index);
+        if (animated) {
+          pagerRef.current?.setPage(index);
+        } else {
+          pagerRef.current?.setPageWithoutAnimation(index);
+        }
+        onTabChange?.(index);
+      },
+      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)({
+      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 h = headerHeightRef.current;
+      const t = tabBarHeightRef.current;
+      if (h > 0 && t > 0) {
+        setLayout((prev) => {
+          if (Math.abs(prev.headerHeight - h) <= 1 && Math.abs(prev.tabBarHeight - t) <= 1) {
+            return prev;
+          }
+          const diff = h + t - (prev.headerHeight + prev.tabBarHeight);
+          if (prev.ready && Math.abs(diff) > 1) {
+            adjustY.setValue(-diff);
+            import_react_native3.Animated.timing(adjustY, {
+              toValue: 0,
+              duration: 200,
+              useNativeDriver: true
+            }).start();
+          }
+          return { headerHeight: h, tabBarHeight: t, ready: true };
+        });
+      }
+    }, []);
+    const handleHeaderLayout = (0, import_react4.useCallback)(
+      (e) => {
+        headerHeightRef.current = e.nativeEvent.layout.height;
+        tryCommitLayout();
+      },
+      [tryCommitLayout]
+    );
+    const handleTabBarLayout = (0, import_react4.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)(
+      /* @__PURE__ */ new Map()
+    );
+    const collapseRange = stickyEnabled ? Math.max(headerHeight - stickyTop, 0) : 0;
+    const headerTranslateY = (0, import_react4.useMemo)(
+      () => collapseRange > 0 ? scrollY.interpolate({
+        inputRange: [0, collapseRange],
+        outputRange: [0, -collapseRange],
+        extrapolate: "clamp"
+      }) : new import_react_native3.Animated.Value(0),
+      [scrollY, collapseRange]
+    );
+    const registerRef = (0, import_react4.useCallback)(
+      (index, ref2) => {
+        if (ref2) {
+          tabRefs.current.set(index, ref2);
+        } else {
+          tabRefs.current.delete(index);
+        }
+      },
+      []
+    );
+    const syncScrollY = (0, import_react4.useCallback)(
+      (index, y) => {
+        tabScrollYMap.current.set(index, y);
+        onScrollProp?.(y);
+      },
+      [onScrollProp]
+    );
+    const scrollTabTo = (0, import_react4.useCallback)((index, offset) => {
+      const ref2 = tabRefs.current.get(index);
+      if (!ref2) return;
+      if (ref2.scrollToOffset) {
+        ref2.scrollToOffset({ offset, animated: false });
+      } else if (ref2.scrollTo) {
+        ref2.scrollTo({ y: offset, animated: false });
+      } else if (ref2.getNode) {
+        const node = ref2.getNode();
+        if (node?.scrollToOffset) {
+          node.scrollToOffset({ offset, animated: false });
+        } else if (node?.scrollTo) {
+          node.scrollTo({ y: offset, animated: false });
+        }
+      }
+    }, []);
+    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);
+        }
+        import_react_native3.InteractionManager.runAfterInteractions(() => {
+          scrollTabTo(newIndex, targetY);
+          tabScrollYMap.current.set(newIndex, targetY);
+          scrollY.setValue(Math.min(targetY, collapseRange));
+        });
+      },
+      [activeIndex, collapseRange, scrollTabTo, scrollY]
+    );
+    const handleTabPress = (0, import_react4.useCallback)(
+      (index) => {
+        if (index === activeIndex) return;
+        syncTabOnSwitch(index);
+        setActiveIndex(index);
+        pagerRef.current?.setPageWithoutAnimation(index);
+        onTabChange?.(index);
+      },
+      [activeIndex, onTabChange, syncTabOnSwitch]
+    );
+    const handlePageSelected = (0, import_react4.useCallback)(
+      (e) => {
+        const newIndex = e.nativeEvent.position;
+        if (newIndex === activeIndex) return;
+        syncTabOnSwitch(newIndex);
+        setActiveIndex(newIndex);
+        onTabChange?.(newIndex);
+      },
+      [activeIndex, onTabChange, syncTabOnSwitch]
+    );
+    const tabBarProps = (0, import_react4.useMemo)(
+      () => ({
+        activeIndex,
+        onTabPress: handleTabPress
+      }),
+      [activeIndex, handleTabPress]
+    );
+    const renderTabBarNode = (0, import_react4.useCallback)(
+      () => renderTabBar(tabBarProps),
+      [renderTabBar, tabBarProps]
+    );
+    const contextValue = (0, import_react4.useMemo)(
+      () => ({
+        scrollY,
+        activeIndex,
+        stickyEnabled,
+        headerHeight,
+        tabBarHeight,
+        renderHeader: stickyEnabled ? void 0 : renderHeader,
+        renderTabBar: stickyEnabled ? void 0 : renderTabBarNode,
+        registerRef,
+        syncScrollY
+      }),
+      [
+        scrollY,
+        activeIndex,
+        stickyEnabled,
+        headerHeight,
+        tabBarHeight,
+        renderHeader,
+        renderTabBarNode,
+        registerRef,
+        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,
+      {
+        style: [
+          styles.pager,
+          !visible && styles.hidden,
+          { transform: [{ translateY: adjustY }] }
+        ]
+      },
+      /* @__PURE__ */ import_react4.default.createElement(
+        import_react_native_pager_view.default,
+        {
+          ref: pagerRef,
+          style: styles.pager,
+          initialPage: initialTabIndex,
+          onPageSelected: handlePageSelected,
+          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)))
+      )
+    ), stickyEnabled && /* @__PURE__ */ import_react4.default.createElement(
+      import_react_native3.Animated.View,
+      {
+        style: [
+          styles.overlay,
+          { transform: [{ translateY: headerTranslateY }] }
+        ],
+        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())
+    )));
+  }
+);
+var styles = import_react_native3.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  pager: {
+    flex: 1
+  },
+  hidden: {
+    opacity: 0
+  },
+  page: {
+    flex: 1
+  },
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 10
+  }
+});
+var index_default = CollapsibleTabView;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TabFlatList,
+  TabScrollView
+});

package/dist/index.mjs

@@ -0,0 +1,443 @@
+// src/index.tsx
+import React3, {
+  forwardRef as forwardRef3,
+  useCallback as useCallback3,
+  useImperativeHandle as useImperativeHandle3,
+  useMemo as useMemo2,
+  useRef as useRef3,
+  useState as useState3
+} from "react";
+import {
+  Animated as Animated3,
+  InteractionManager,
+  StyleSheet,
+  View as View2
+} from "react-native";
+import PagerView from "react-native-pager-view";
+
+// src/context.ts
+import { createContext, useContext } from "react";
+var CollapsibleContext = createContext(null);
+var TabIndexContext = createContext(0);
+var useCollapsible = () => {
+  const ctx = useContext(CollapsibleContext);
+  if (!ctx) {
+    throw new Error("useCollapsible must be used within CollapsibleTabView");
+  }
+  return ctx;
+};
+var useTabIndex = () => useContext(TabIndexContext);
+
+// src/TabFlatList.tsx
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  Animated,
+  FlatList,
+  View
+} from "react-native";
+var AnimatedFlatListComponent = Animated.createAnimatedComponent(FlatList);
+var AnimatedFlatList = AnimatedFlatListComponent;
+var TabFlatListInner = ({
+  contentContainerStyle,
+  onScroll,
+  ListHeaderComponent,
+  ...props
+}, ref) => {
+  const index = useTabIndex();
+  const {
+    scrollY,
+    activeIndex,
+    stickyEnabled,
+    headerHeight,
+    tabBarHeight,
+    renderHeader,
+    renderTabBar,
+    registerRef,
+    syncScrollY
+  } = useCollapsible();
+  const innerRef = useRef(null);
+  const isActive = activeIndex === index;
+  useEffect(() => {
+    registerRef(index, innerRef.current);
+    return () => registerRef(index, null);
+  }, [index]);
+  useImperativeHandle(ref, () => innerRef.current, []);
+  const handleScroll = useCallback(
+    (e) => {
+      const y = e.nativeEvent.contentOffset.y;
+      syncScrollY(index, y);
+      onScroll?.(e);
+    },
+    [index, onScroll, syncScrollY]
+  );
+  const mergedHeader = useMemo(() => {
+    if (stickyEnabled) return ListHeaderComponent;
+    const OriginalHeader = typeof ListHeaderComponent === "function" ? /* @__PURE__ */ React.createElement(ListHeaderComponent, null) : ListHeaderComponent ?? null;
+    return /* @__PURE__ */ React.createElement(View, null, renderHeader?.(), renderTabBar?.(), OriginalHeader);
+  }, [stickyEnabled, ListHeaderComponent, renderHeader, renderTabBar]);
+  const paddingTop = stickyEnabled ? headerHeight + tabBarHeight : 0;
+  const collapseRange = stickyEnabled ? headerHeight : 0;
+  const [containerHeight, setContainerHeight] = useState(0);
+  const handleLayout = useCallback((e) => {
+    setContainerHeight(e.nativeEvent.layout.height);
+  }, []);
+  const minHeight = containerHeight > 0 ? containerHeight + collapseRange : 0;
+  return /* @__PURE__ */ React.createElement(
+    AnimatedFlatList,
+    {
+      ...props,
+      ref: innerRef,
+      onLayout: handleLayout,
+      ListHeaderComponent: mergedHeader,
+      contentContainerStyle: [
+        paddingTop > 0 && { paddingTop },
+        minHeight > 0 && { minHeight },
+        contentContainerStyle
+      ],
+      onScroll: isActive && stickyEnabled ? Animated.event(
+        [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+        {
+          useNativeDriver: true,
+          listener: handleScroll
+        }
+      ) : handleScroll,
+      scrollEventThrottle: 16,
+      showsVerticalScrollIndicator: false
+    }
+  );
+};
+var TabFlatList = forwardRef(TabFlatListInner);
+
+// src/TabScrollView.tsx
+import React2, {
+  forwardRef as forwardRef2,
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useImperativeHandle as useImperativeHandle2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import {
+  Animated as Animated2
+} from "react-native";
+var TabScrollView = forwardRef2(
+  ({ contentContainerStyle, onScroll, children, ...props }, ref) => {
+    const index = useTabIndex();
+    const { scrollY, activeIndex, headerHeight, tabBarHeight, registerRef, syncScrollY } = useCollapsible();
+    const innerRef = useRef2(null);
+    const isActive = activeIndex === index;
+    useEffect2(() => {
+      registerRef(index, innerRef.current);
+      return () => registerRef(index, null);
+    }, [index]);
+    useImperativeHandle2(ref, () => innerRef.current, []);
+    const handleScroll = useCallback2(
+      (e) => {
+        const y = e.nativeEvent.contentOffset.y;
+        syncScrollY(index, y);
+        onScroll?.(e);
+      },
+      [index, onScroll, syncScrollY]
+    );
+    const paddingTop = headerHeight + tabBarHeight;
+    const collapseRange = headerHeight;
+    const [containerHeight, setContainerHeight] = useState2(0);
+    const handleLayout = useCallback2((e) => {
+      setContainerHeight(e.nativeEvent.layout.height);
+    }, []);
+    const minHeight = containerHeight > 0 ? containerHeight + collapseRange : 0;
+    return /* @__PURE__ */ React2.createElement(
+      Animated2.ScrollView,
+      {
+        ref: innerRef,
+        ...props,
+        onLayout: handleLayout,
+        contentContainerStyle: [
+          { paddingTop },
+          minHeight > 0 && { minHeight },
+          contentContainerStyle
+        ],
+        onScroll: isActive ? Animated2.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+          useNativeDriver: true,
+          listener: handleScroll
+        }) : handleScroll,
+        scrollEventThrottle: 16,
+        showsVerticalScrollIndicator: false
+      },
+      children
+    );
+  }
+);
+
+// src/index.tsx
+var CollapsibleTabView = forwardRef3(
+  ({
+    children,
+    renderHeader,
+    estimatedHeaderHeight = 0,
+    estimatedTabBarHeight = 0,
+    stickyEnabled = true,
+    stickyTop = 0,
+    renderTabBar,
+    initialTabIndex = 0,
+    onTabChange,
+    onScroll: onScrollProp,
+    swipeEnabled = true,
+    style
+  }, ref) => {
+    const [activeIndex, setActiveIndex] = useState3(initialTabIndex);
+    const pagerRef = useRef3(null);
+    const pages = useMemo2(
+      () => React3.Children.toArray(children).filter(React3.isValidElement),
+      [children]
+    );
+    useImperativeHandle3(ref, () => ({
+      scrollToTab: (index, animated = true) => {
+        if (index === activeIndex || index < 0 || index >= pages.length) return;
+        syncTabOnSwitch(index);
+        setActiveIndex(index);
+        if (animated) {
+          pagerRef.current?.setPage(index);
+        } else {
+          pagerRef.current?.setPageWithoutAnimation(index);
+        }
+        onTabChange?.(index);
+      },
+      getActiveIndex: () => activeIndex
+    }));
+    const hasEstimate = estimatedHeaderHeight > 0;
+    const headerHeightRef = useRef3(0);
+    const tabBarHeightRef = useRef3(0);
+    const [layout, setLayout] = useState3({
+      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 h = headerHeightRef.current;
+      const t = tabBarHeightRef.current;
+      if (h > 0 && t > 0) {
+        setLayout((prev) => {
+          if (Math.abs(prev.headerHeight - h) <= 1 && Math.abs(prev.tabBarHeight - t) <= 1) {
+            return prev;
+          }
+          const diff = h + t - (prev.headerHeight + prev.tabBarHeight);
+          if (prev.ready && Math.abs(diff) > 1) {
+            adjustY.setValue(-diff);
+            Animated3.timing(adjustY, {
+              toValue: 0,
+              duration: 200,
+              useNativeDriver: true
+            }).start();
+          }
+          return { headerHeight: h, tabBarHeight: t, ready: true };
+        });
+      }
+    }, []);
+    const handleHeaderLayout = useCallback3(
+      (e) => {
+        headerHeightRef.current = e.nativeEvent.layout.height;
+        tryCommitLayout();
+      },
+      [tryCommitLayout]
+    );
+    const handleTabBarLayout = useCallback3(
+      (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(
+      /* @__PURE__ */ new Map()
+    );
+    const collapseRange = stickyEnabled ? Math.max(headerHeight - stickyTop, 0) : 0;
+    const headerTranslateY = useMemo2(
+      () => collapseRange > 0 ? scrollY.interpolate({
+        inputRange: [0, collapseRange],
+        outputRange: [0, -collapseRange],
+        extrapolate: "clamp"
+      }) : new Animated3.Value(0),
+      [scrollY, collapseRange]
+    );
+    const registerRef = useCallback3(
+      (index, ref2) => {
+        if (ref2) {
+          tabRefs.current.set(index, ref2);
+        } else {
+          tabRefs.current.delete(index);
+        }
+      },
+      []
+    );
+    const syncScrollY = useCallback3(
+      (index, y) => {
+        tabScrollYMap.current.set(index, y);
+        onScrollProp?.(y);
+      },
+      [onScrollProp]
+    );
+    const scrollTabTo = useCallback3((index, offset) => {
+      const ref2 = tabRefs.current.get(index);
+      if (!ref2) return;
+      if (ref2.scrollToOffset) {
+        ref2.scrollToOffset({ offset, animated: false });
+      } else if (ref2.scrollTo) {
+        ref2.scrollTo({ y: offset, animated: false });
+      } else if (ref2.getNode) {
+        const node = ref2.getNode();
+        if (node?.scrollToOffset) {
+          node.scrollToOffset({ offset, animated: false });
+        } else if (node?.scrollTo) {
+          node.scrollTo({ y: offset, animated: false });
+        }
+      }
+    }, []);
+    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);
+        }
+        InteractionManager.runAfterInteractions(() => {
+          scrollTabTo(newIndex, targetY);
+          tabScrollYMap.current.set(newIndex, targetY);
+          scrollY.setValue(Math.min(targetY, collapseRange));
+        });
+      },
+      [activeIndex, collapseRange, scrollTabTo, scrollY]
+    );
+    const handleTabPress = useCallback3(
+      (index) => {
+        if (index === activeIndex) return;
+        syncTabOnSwitch(index);
+        setActiveIndex(index);
+        pagerRef.current?.setPageWithoutAnimation(index);
+        onTabChange?.(index);
+      },
+      [activeIndex, onTabChange, syncTabOnSwitch]
+    );
+    const handlePageSelected = useCallback3(
+      (e) => {
+        const newIndex = e.nativeEvent.position;
+        if (newIndex === activeIndex) return;
+        syncTabOnSwitch(newIndex);
+        setActiveIndex(newIndex);
+        onTabChange?.(newIndex);
+      },
+      [activeIndex, onTabChange, syncTabOnSwitch]
+    );
+    const tabBarProps = useMemo2(
+      () => ({
+        activeIndex,
+        onTabPress: handleTabPress
+      }),
+      [activeIndex, handleTabPress]
+    );
+    const renderTabBarNode = useCallback3(
+      () => renderTabBar(tabBarProps),
+      [renderTabBar, tabBarProps]
+    );
+    const contextValue = useMemo2(
+      () => ({
+        scrollY,
+        activeIndex,
+        stickyEnabled,
+        headerHeight,
+        tabBarHeight,
+        renderHeader: stickyEnabled ? void 0 : renderHeader,
+        renderTabBar: stickyEnabled ? void 0 : renderTabBarNode,
+        registerRef,
+        syncScrollY
+      }),
+      [
+        scrollY,
+        activeIndex,
+        stickyEnabled,
+        headerHeight,
+        tabBarHeight,
+        renderHeader,
+        renderTabBarNode,
+        registerRef,
+        syncScrollY
+      ]
+    );
+    return /* @__PURE__ */ React3.createElement(CollapsibleContext.Provider, { value: contextValue }, /* @__PURE__ */ React3.createElement(View2, { style: [styles.container, style] }, /* @__PURE__ */ React3.createElement(
+      Animated3.View,
+      {
+        style: [
+          styles.pager,
+          !visible && styles.hidden,
+          { transform: [{ translateY: adjustY }] }
+        ]
+      },
+      /* @__PURE__ */ React3.createElement(
+        PagerView,
+        {
+          ref: pagerRef,
+          style: styles.pager,
+          initialPage: initialTabIndex,
+          onPageSelected: handlePageSelected,
+          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)))
+      )
+    ), stickyEnabled && /* @__PURE__ */ React3.createElement(
+      Animated3.View,
+      {
+        style: [
+          styles.overlay,
+          { transform: [{ translateY: headerTranslateY }] }
+        ],
+        pointerEvents: "box-none"
+      },
+      /* @__PURE__ */ React3.createElement(View2, { pointerEvents: "box-none", onLayout: handleHeaderLayout }, renderHeader()),
+      /* @__PURE__ */ React3.createElement(View2, { onLayout: handleTabBarLayout }, renderTabBarNode())
+    )));
+  }
+);
+var styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  pager: {
+    flex: 1
+  },
+  hidden: {
+    opacity: 0
+  },
+  page: {
+    flex: 1
+  },
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 10
+  }
+});
+var index_default = CollapsibleTabView;
+export {
+  TabFlatList,
+  TabScrollView,
+  index_default as default
+};

package/dist/types.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import { Animated, FlatList, ScrollView, StyleProp, ViewStyle } from "react-native";
+export interface TabBarProps {
+    activeIndex: number;
+    onTabPress: (index: number) => void;
+}
+export interface CollapsibleTabViewProps {
+    children: React.ReactNode;
+    renderHeader: () => React.ReactNode;
+    estimatedHeaderHeight?: number;
+    estimatedTabBarHeight?: number;
+    stickyEnabled?: boolean;
+    stickyTop?: number;
+    renderTabBar: (props: TabBarProps) => React.ReactNode;
+    initialTabIndex?: number;
+    onTabChange?: (index: number) => void;
+    onScroll?: (scrollY: number) => void;
+    swipeEnabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export interface CollapsibleTabViewRef {
+    scrollToTab: (index: number, animated?: boolean) => void;
+    getActiveIndex: () => number;
+}
+export interface CollapsibleContextValue {
+    scrollY: Animated.Value;
+    activeIndex: number;
+    stickyEnabled: boolean;
+    headerHeight: number;
+    tabBarHeight: number;
+    renderHeader?: () => React.ReactNode;
+    renderTabBar?: () => React.ReactNode;
+    registerRef: (index: number, ref: FlatList<any> | ScrollView | null) => void;
+    syncScrollY: (index: number, y: number) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/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,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"}

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "react-native-collapsible-header-tab-view",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "不依赖 react-native-reanimated ，可吸顶的tab view",
-  "main": "src/index.tsx",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/MasterZuom/react-native-collapsible-header-tab-view.git"
@@ -23,11 +24,17 @@
     "react-native-pager-view": "^6.0.0"
   },
   "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-native": "^0.72.8",
     "react": "^18.0.0",
     "react-native": "^0.71.0",
     "react-native-pager-view": "^6.7.0",
+    "tsup": "^8.5.1",
     "typescript": "^5.0.0"
   },
+  "scripts": {
+    "build": "tsup src/index.tsx --format cjs,esm --clean && tsc --emitDeclarationOnly --outDir dist --skipLibCheck"
+  },
   "files": [
     "dist"
   ]

package/src/index.tsx

@@ -1,357 +0,0 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import {
-  Animated,
-  FlatList,
-  InteractionManager,
-  LayoutChangeEvent,
-  ScrollView,
-  StyleSheet,
-  View,
-} from "react-native";
-import PagerView from "react-native-pager-view";
-
-import { CollapsibleContext, TabIndexContext } from "./context";
-import {
-  CollapsibleContextValue,
-  CollapsibleTabViewProps,
-  CollapsibleTabViewRef,
-  TabBarProps,
-} from "./types";
-
-export { TabFlatList } from "./TabFlatList";
-export { TabScrollView } from "./TabScrollView";
-export type {
-  CollapsibleTabViewProps,
-  CollapsibleTabViewRef,
-  TabBarProps,
-} from "./types";
-
-const CollapsibleTabView = forwardRef<
-  CollapsibleTabViewRef,
-  CollapsibleTabViewProps
->(
-  (
-    {
-      children,
-      renderHeader,
-      estimatedHeaderHeight = 0,
-      estimatedTabBarHeight = 0,
-      stickyEnabled = true,
-      stickyTop = 0,
-      renderTabBar,
-      initialTabIndex = 0,
-      onTabChange,
-      onScroll: onScrollProp,
-      swipeEnabled = true,
-      style,
-    },
-    ref,
-  ) => {
-    const [activeIndex, setActiveIndex] = useState(initialTabIndex);
-    const pagerRef = useRef<PagerView>(null);
-
-    const pages = useMemo(
-      () => React.Children.toArray(children).filter(React.isValidElement),
-      [children],
-    );
-
-    useImperativeHandle(ref, () => ({
-      scrollToTab: (index: number, animated = true) => {
-        if (index === activeIndex || index < 0 || index >= pages.length) return;
-        syncTabOnSwitch(index);
-        setActiveIndex(index);
-        if (animated) {
-          pagerRef.current?.setPage(index);
-        } else {
-          pagerRef.current?.setPageWithoutAnimation(index);
-        }
-        onTabChange?.(index);
-      },
-      getActiveIndex: () => activeIndex,
-    }));
-
-    // 解决预估高度与实际高度差的问题
-    const hasEstimate = estimatedHeaderHeight > 0;
-    const headerHeightRef = useRef(0);
-    const tabBarHeightRef = useRef(0);
-    const [layout, setLayout] = useState({
-      headerHeight: estimatedHeaderHeight,
-      tabBarHeight: estimatedTabBarHeight,
-      ready: hasEstimate,
-    });
-    const { headerHeight, tabBarHeight } = layout;
-    const visible = layout.ready;
-
-    const adjustY = useRef(new Animated.Value(0)).current;
-
-    // 真实高度与预估高度如果存在高度差，则以动画形式让UI组件补偿这个高度差
-    const tryCommitLayout = useCallback(() => {
-      const h = headerHeightRef.current;
-      const t = tabBarHeightRef.current;
-      if (h > 0 && t > 0) {
-        setLayout((prev) => {
-          if (
-            Math.abs(prev.headerHeight - h) <= 1 &&
-            Math.abs(prev.tabBarHeight - t) <= 1
-          ) {
-            return prev;
-          }
-          const diff = h + t - (prev.headerHeight + prev.tabBarHeight);
-          if (prev.ready && Math.abs(diff) > 1) {
-            adjustY.setValue(-diff);
-            Animated.timing(adjustY, {
-              toValue: 0,
-              duration: 200,
-              useNativeDriver: true,
-            }).start();
-          }
-          return { headerHeight: h, tabBarHeight: t, ready: true };
-        });
-      }
-    }, []);
-
-    const handleHeaderLayout = useCallback(
-      (e: LayoutChangeEvent) => {
-        headerHeightRef.current = e.nativeEvent.layout.height;
-        tryCommitLayout();
-      },
-      [tryCommitLayout],
-    );
-
-    const handleTabBarLayout = useCallback(
-      (e: LayoutChangeEvent) => {
-        tabBarHeightRef.current = e.nativeEvent.layout.height;
-        tryCommitLayout();
-      },
-      [tryCommitLayout],
-    );
-
-    const scrollY = useRef(new Animated.Value(0)).current;
-    const tabScrollYMap = useRef(new Map<number, number>());
-    const tabRefs = useRef(
-      new Map<number, FlatList<any> | ScrollView | null>(),
-    );
-    // header浮层 在Y轴 偏移的最大距离
-    const collapseRange = stickyEnabled
-      ? Math.max(headerHeight - stickyTop, 0)
-      : 0;
-
-    // header浮层 垂直偏移动画值，驱动 header + tabBar 整体上移实现折叠效果。
-    const headerTranslateY = useMemo(
-      () =>
-        collapseRange > 0
-          ? scrollY.interpolate({
-              inputRange: [0, collapseRange],
-              outputRange: [0, -collapseRange],
-              extrapolate: "clamp",
-            })
-          : new Animated.Value(0),
-      [scrollY, collapseRange],
-    );
-
-    const registerRef = useCallback(
-      (index: number, ref: FlatList<any> | ScrollView | null) => {
-        if (ref) {
-          tabRefs.current.set(index, ref);
-        } else {
-          tabRefs.current.delete(index);
-        }
-      },
-      [],
-    );
-
-    // 记录每个 tab 的当前滚动位置
-    const syncScrollY = useCallback(
-      (index: number, y: number) => {
-        tabScrollYMap.current.set(index, y);
-        onScrollProp?.(y);
-      },
-      [onScrollProp],
-    );
-
-    // 切换 tab 时，把新 tab 的 FlatList/ScrollView 滚动到计算好的 targetY，确保 header 吸顶状态和列表位置一致。
-    const scrollTabTo = useCallback((index: number, offset: number) => {
-      const ref: any = tabRefs.current.get(index);
-      if (!ref) return;
-      if (ref.scrollToOffset) {
-        ref.scrollToOffset({ offset, animated: false });
-      } else if (ref.scrollTo) {
-        ref.scrollTo({ y: offset, animated: false });
-      } else if (ref.getNode) {
-        const node = ref.getNode();
-        if (node?.scrollToOffset) {
-          node.scrollToOffset({ offset, animated: false });
-        } else if (node?.scrollTo) {
-          node.scrollTo({ y: offset, animated: false });
-        }
-      }
-    }, []);
-
-    //核心代码: 切换Tab时 计算页面滚动的位置
-    const syncTabOnSwitch = useCallback(
-      (newIndex: number) => {
-        // 读取当前 Tab 和目标 Tab 的滚动位置
-        const currentY = tabScrollYMap.current.get(activeIndex) ?? 0;
-        const newTabSavedY = tabScrollYMap.current.get(newIndex) ?? 0;
-
-        // 判断当前 Tab 的头部是否已折叠
-        const isCollapsed = currentY >= collapseRange - 1;
-
-        // 计算目标 Tab 应该滚动到的位置
-        let targetY: number;
-        if (isCollapsed) {
-          targetY = Math.max(newTabSavedY, collapseRange);
-        } else {
-          targetY = Math.min(currentY, collapseRange);
-        }
-
-        // 在交互完成后执行滚动并更新状态
-        // runAfterInteractions 会等待所有正在进行的动画和触摸交互完成后再执行回调，确保：
-        // 1. 新 Tab 页已经渲染就绪，scrollTo 能生效
-        // 2. 不与切换动画争抢帧，体验更流畅
-        InteractionManager.runAfterInteractions(() => {
-          scrollTabTo(newIndex, targetY);
-          tabScrollYMap.current.set(newIndex, targetY);
-          scrollY.setValue(Math.min(targetY, collapseRange));
-        });
-      },
-      [activeIndex, collapseRange, scrollTabTo, scrollY],
-    );
-
-    const handleTabPress = useCallback(
-      (index: number) => {
-        if (index === activeIndex) return;
-        syncTabOnSwitch(index);
-        setActiveIndex(index);
-        pagerRef.current?.setPageWithoutAnimation(index);
-        onTabChange?.(index);
-      },
-      [activeIndex, onTabChange, syncTabOnSwitch],
-    );
-
-    const handlePageSelected = useCallback(
-      (e: { nativeEvent: { position: number } }) => {
-        const newIndex = e.nativeEvent.position;
-        if (newIndex === activeIndex) return;
-        syncTabOnSwitch(newIndex);
-        setActiveIndex(newIndex);
-        onTabChange?.(newIndex);
-      },
-      [activeIndex, onTabChange, syncTabOnSwitch],
-    );
-
-    const tabBarProps: TabBarProps = useMemo(
-      () => ({
-        activeIndex,
-        onTabPress: handleTabPress,
-      }),
-      [activeIndex, handleTabPress],
-    );
-
-    const renderTabBarNode = useCallback(
-      () => renderTabBar(tabBarProps),
-      [renderTabBar, tabBarProps],
-    );
-
-    const contextValue: CollapsibleContextValue = useMemo(
-      () => ({
-        scrollY,
-        activeIndex,
-        stickyEnabled,
-        headerHeight,
-        tabBarHeight,
-        renderHeader: stickyEnabled ? undefined : renderHeader,
-        renderTabBar: stickyEnabled ? undefined : renderTabBarNode,
-        registerRef,
-        syncScrollY,
-      }),
-      [
-        scrollY,
-        activeIndex,
-        stickyEnabled,
-        headerHeight,
-        tabBarHeight,
-        renderHeader,
-        renderTabBarNode,
-        registerRef,
-        syncScrollY,
-      ],
-    );
-
-    return (
-      <CollapsibleContext.Provider value={contextValue}>
-        <View style={[styles.container, style]}>
-          <Animated.View
-            style={[
-              styles.pager,
-              !visible && styles.hidden,
-              { transform: [{ translateY: adjustY }] },
-            ]}
-          >
-            <PagerView
-              ref={pagerRef}
-              style={styles.pager}
-              initialPage={initialTabIndex}
-              onPageSelected={handlePageSelected}
-              scrollEnabled={swipeEnabled}
-            >
-              {pages.map((page: React.ReactElement, i) => (
-                <View key={page?.key ?? i} style={styles.page}>
-                  <TabIndexContext.Provider value={i}>
-                    {page}
-                  </TabIndexContext.Provider>
-                </View>
-              ))}
-            </PagerView>
-          </Animated.View>
-
-          {stickyEnabled && (
-            <Animated.View
-              style={[
-                styles.overlay,
-                { transform: [{ translateY: headerTranslateY }] },
-              ]}
-              pointerEvents="box-none"
-            >
-              <View pointerEvents="box-none" onLayout={handleHeaderLayout}>
-                {renderHeader()}
-              </View>
-              <View onLayout={handleTabBarLayout}>{renderTabBarNode()}</View>
-            </Animated.View>
-          )}
-        </View>
-      </CollapsibleContext.Provider>
-    );
-  },
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  pager: {
-    flex: 1,
-  },
-  hidden: {
-    opacity: 0,
-  },
-  page: {
-    flex: 1,
-  },
-  overlay: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: 10,
-  },
-});
-
-export default CollapsibleTabView;