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

package/README.md

@@ -1,3 +1,247 @@
 # @orionarm/react-native-collapse-tabs
 
-> ⚠️ **Work in Progress** - This package is currently under active development and not yet ready for production use.
+> A lightweight, performant collapsible-tabs component for React Native, built on top of [`react-native-pager-view`](https://github.com/callstack/react-native-pager-view) and [`react-native-reanimated`](https://github.com/software-mansion/react-native-reanimated) v3.
+
+> ⚠️ **Work in Progress** — APIs may still change before `1.x` is considered stable.
+
+---
+
+## Features
+
+- 📜 **Collapsible header** — the header smoothly collapses while the inner list is scrolled.
+- 🗂 **Swipeable tabs** — horizontal paging powered by `react-native-pager-view`.
+- 🎚 **Per-tab scroll state** — each tab keeps its own scroll position.
+- 🪄 **Animated tab switching** — header smoothly tweens between tabs (no sudden jumps).
+- 🎨 **Custom header & tab bar** — bring your own UI, or use the built-in `DefaultTabBar`.
+- ⚡ **Reanimated 3 worklets** — animations run on the UI thread for 60fps.
+- 🧩 **Drop-in scrollables** — wrapped `FlatList` / `ScrollView` handle the plumbing for you.
+
+---
+
+## Requirements
+
+| Peer dependency               | Version    |
+| ----------------------------- | ---------- |
+| `react`                       | `>=16.8.0` |
+| `react-native`                | `>=0.60.0` |
+| `react-native-gesture-handler`| `>=2.0.0`  |
+| `react-native-pager-view`     | `>=6.0.0`  |
+| `react-native-reanimated`     | `>=3.0.0`  |
+
+Make sure Reanimated is set up correctly (Babel plugin + `react-native-reanimated/plugin` at the **end** of your `babel.config.js` plugins array).
+
+---
+
+## Installation
+
+```bash
+# npm
+npm install @orionarm/react-native-collapse-tabs
+
+# yarn
+yarn add @orionarm/react-native-collapse-tabs
+
+# pnpm
+pnpm add @orionarm/react-native-collapse-tabs
+```
+
+Then install the peer dependencies if you haven't already:
+
+```bash
+npm install react-native-pager-view react-native-reanimated react-native-gesture-handler
+```
+
+For iOS, don't forget to install pods:
+
+```bash
+cd ios && pod install
+```
+
+---
+
+## Quick Start
+
+```tsx
+import React from "react";
+import { Text, View, StyleSheet } from "react-native";
+import {
+  CollapseTabs,
+  Tab,
+  FlatList,
+} from "@orionarm/react-native-collapse-tabs";
+
+const HEADER_HEIGHT = 200;
+const TAB_BAR_HEIGHT = 44;
+
+export default function Example() {
+  return (
+    <CollapseTabs
+      headerHeight={HEADER_HEIGHT}
+      tabBarHeight={TAB_BAR_HEIGHT}
+      renderHeader={() => (
+        <View style={styles.header}>
+          <Text style={styles.headerText}>My Profile</Text>
+        </View>
+      )}
+    >
+      <Tab name="Posts">
+        <FlatList
+          name="Posts"
+          data={Array.from({ length: 30 }).map((_, i) => `Post ${i}`)}
+          keyExtractor={(item) => item}
+          renderItem={({ item }) => (
+            <View style={styles.row}>
+              <Text>{item}</Text>
+            </View>
+          )}
+        />
+      </Tab>
+
+      <Tab name="Likes">
+        <FlatList
+          name="Likes"
+          data={Array.from({ length: 30 }).map((_, i) => `Like ${i}`)}
+          keyExtractor={(item) => item}
+          renderItem={({ item }) => (
+            <View style={styles.row}>
+              <Text>{item}</Text>
+            </View>
+          )}
+        />
+      </Tab>
+    </CollapseTabs>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: { flex: 1, backgroundColor: "#2D8CFF", justifyContent: "center", alignItems: "center" },
+  headerText: { color: "#fff", fontSize: 22, fontWeight: "600" },
+  row: { padding: 16, borderBottomWidth: StyleSheet.hairlineWidth, borderColor: "#eee" },
+});
+```
+
+> ⚠️ Important: the `name` prop of `<Tab>` and the `name` prop of the wrapped `<FlatList>` / `<ScrollView>` **must match** — that's how each tab's scroll position is tracked.
+
+---
+
+## API
+
+### `<CollapseTabs />`
+
+The root container.
+
+| Prop                   | Type                                                       | Required | Description                                                                          |
+| ---------------------- | ---------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------ |
+| `headerHeight`         | `number`                                                   | ✅       | Fixed height of the header content (above the tab bar).                              |
+| `tabBarHeight`         | `number`                                                   | ✅       | Fixed height of the tab bar.                                                         |
+| `children`             | `TabReactElement \| TabReactElement[]`                     | ✅       | One or more `<Tab>` children.                                                        |
+| `initialTabName`       | `string`                                                   |          | Tab to focus on mount. Defaults to the first child.                                  |
+| `minHeaderHeight`      | `number`                                                   |          | Minimum visible header height once collapsed. Default `0`.                           |
+| `renderHeader`         | `(props: HeaderProps) => ReactElement \| null`             |          | Render function for the header content.                                              |
+| `renderTabBar`         | `(props: TabBarProps) => ReactElement \| null`             |          | Render function for a custom tab bar. Falls back to `<DefaultTabBar>` if not provided. |
+| `containerStyle`       | `StyleProp<ViewStyle>`                                     |          | Style for the outer container.                                                       |
+| `headerContainerStyle` | `StyleProp<ViewStyle>`                                     |          | Style for the absolutely-positioned header wrapper.                                  |
+| `pagerProps`           | `Omit<PagerViewProps, "onPageScroll" \| "initialPage">`    |          | Extra props forwarded to `PagerView`.                                                |
+| `onIndexChange`        | `(index: number) => void`                                  |          | Fired after the focused tab changes.                                                 |
+
+### `<Tab />`
+
+Wraps a single tab's content. Should be a direct child of `<CollapseTabs>`.
+
+| Prop       | Type              | Required | Description                                       |
+| ---------- | ----------------- | -------- | ------------------------------------------------- |
+| `name`     | `string`          | ✅       | Unique identifier — must match the inner list's `name`. |
+| `label`    | `string`          |          | Optional display label (currently used by `DefaultTabBar` via `name`). |
+| `children` | `React.ReactNode` | ✅       | Tab content — usually a wrapped `<FlatList>` or `<ScrollView>`. |
+
+### `<FlatList />` and `<ScrollView />`
+
+Drop-in replacements for the standard components, pre-wired to the collapse-tabs scroll system.
+
+| Prop   | Type     | Required | Description                                            |
+| ------ | -------- | -------- | ------------------------------------------------------ |
+| `name` | `string` | ✅       | Must match the parent `<Tab name="..." />`.            |
+| ...    | —        |          | All other standard `FlatList` / `ScrollView` props.    |
+
+> They automatically apply `paddingTop: headerHeight + tabBarHeight` to the content so your first item starts below the header.
+
+### `<DefaultTabBar />`
+
+A minimal built-in tab bar with a sliding underline indicator. Pass any custom UI through `renderTabBar` if you need something different.
+
+### `useTabsContext()`
+
+Hook for advanced use cases (e.g. building a fully custom header/tab bar that needs access to the shared scroll state).
+
+```tsx
+const {
+  headerHeight,
+  tabBarHeight,
+  headerScrollDistance,
+  tabNames,
+  index,           // SharedValue<number>
+  indexDecimal,    // SharedValue<number>
+  focusedTab,      // SharedValue<string>
+  scrollY,         // SharedValue<Record<string, number>>
+  headerTranslateY,// SharedValue<number>
+  containerRef,
+} = useTabsContext();
+```
+
+---
+
+## Customization
+
+### Custom tab bar
+
+```tsx
+<CollapseTabs
+  headerHeight={200}
+  tabBarHeight={44}
+  renderTabBar={({ tabNames, indexDecimal, onTabPress }) => (
+    <MyFancyTabBar
+      tabs={tabNames}
+      indexDecimal={indexDecimal}
+      onPress={onTabPress}
+    />
+  )}
+>
+  {/* ... */}
+</CollapseTabs>
+```
+
+### Animated header
+
+`renderHeader` receives the same `HeaderProps` so you can animate things based on `indexDecimal` or read `headerTranslateY` from `useTabsContext()` inside a child component.
+
+---
+
+## Types
+
+All public types are exported from the package root:
+
+```ts
+import type {
+  CollapseTabsProps,
+  TabProps,
+  TabBarProps,
+  HeaderProps,
+  TabName,
+} from "@orionarm/react-native-collapse-tabs";
+```
+
+---
+
+## Roadmap
+
+- [ ] Pull-to-refresh integration
+- [ ] Dynamic header height
+- [ ] SectionList / horizontal-list support
+- [ ] Snap-to-collapse behavior
+- [ ] Example app & screenshots
+
+---
+
+## License
+
+ISC © yanan_orionarm

package/lib/CollapseTabs.d.ts.map

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

package/lib/CollapseTabs.js

@@ -1,7 +1,7 @@
-import React, { useCallback, useMemo, useRef, useState, } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import PagerView from "react-native-pager-view";
-import Animated, { useAnimatedReaction, useAnimatedStyle, useEvent, useHandler, useSharedValue, } from "react-native-reanimated";
+import Animated, { useAnimatedReaction, useAnimatedStyle, useEvent, useHandler, useSharedValue, withTiming, } from "react-native-reanimated";
 import { Context } from "./context";
 import { DefaultTabBar } from "./TabBar";
 const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
@@ -21,10 +21,19 @@ export const CollapseTabs = ({ children, initialTabName, headerHeight, tabBarHei
     const scrollY = useSharedValue(initialScrollY);
     const headerTranslateY = useSharedValue(0);
     useAnimatedReaction(() => {
-        const y = scrollY.value[focusedTab.value] ?? 0;
-        return -Math.min(y, headerScrollDistance);
-    }, (next) => {
-        headerTranslateY.value = next;
+        const tab = focusedTab.value;
+        const y = scrollY.value[tab] ?? 0;
+        return {
+            tab,
+            translateY: -Math.min(Math.max(y, 0), headerScrollDistance),
+        };
+    }, (next, prev) => {
+        if (prev && prev.tab !== next.tab) {
+            headerTranslateY.value = withTiming(next.translateY, { duration: 250 });
+        }
+        else {
+            headerTranslateY.value = next.translateY;
+        }
     }, [headerScrollDistance]);
     const refMap = useRef({}).current;
     const setRef = useCallback((key, ref) => {
@@ -94,9 +103,7 @@ export const CollapseTabs = ({ children, initialTabName, headerHeight, tabBarHei
             {renderHeader?.(headerProps)}
           </View>
           <View style={{ height: tabBarHeight }}>
-            {renderTabBar
-            ? renderTabBar(headerProps)
-            : <DefaultTabBar {...headerProps}/>}
+            {renderTabBar ? (renderTabBar(headerProps)) : (<DefaultTabBar {...headerProps}/>)}
           </View>
         </Animated.View>
       </View>

package/lib/FlatList.d.ts

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

package/lib/FlatList.d.ts.map

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

package/lib/FlatList.js

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

package/lib/ScrollView.d.ts

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

package/lib/ScrollView.d.ts.map

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

package/lib/ScrollView.js

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

package/lib/lib/CollapseTabs.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { CollapseTabsProps } from "./types/types";
+export declare const CollapseTabs: React.FC<CollapseTabsProps>;
+//# sourceMappingURL=CollapseTabs.d.ts.map

package/lib/lib/CollapseTabs.d.ts.map

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

package/lib/lib/CollapseTabs.js

@@ -0,0 +1,156 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapseTabs = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_pager_view_1 = __importDefault(require("react-native-pager-view"));
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const context_1 = require("./context");
+const TabBar_1 = require("./TabBar");
+const AnimatedPagerView = react_native_reanimated_1.default.createAnimatedComponent(react_native_pager_view_1.default);
+const CollapseTabs = ({ children, initialTabName, headerHeight, tabBarHeight, minHeaderHeight = 0, renderHeader, renderTabBar, containerStyle, headerContainerStyle, pagerProps, onIndexChange, }) => {
+    const tabs = (0, react_1.useMemo)(() => react_1.default.Children.toArray(children).filter((c) => react_1.default.isValidElement(c)), [children]);
+    const tabNames = (0, react_1.useMemo)(() => tabs.map((t) => t.props.name), [tabs]);
+    const initialIndex = Math.max(0, initialTabName ? tabNames.indexOf(initialTabName) : 0);
+    const headerScrollDistance = headerHeight - minHeaderHeight;
+    const index = (0, react_native_reanimated_1.useSharedValue)(initialIndex);
+    const indexDecimal = (0, react_native_reanimated_1.useSharedValue)(initialIndex);
+    const focusedTab = (0, react_native_reanimated_1.useSharedValue)(tabNames[initialIndex] ?? "");
+    const initialScrollY = (0, react_1.useMemo)(() => {
+        const m = {};
+        tabNames.forEach((n) => (m[n] = 0));
+        return m;
+    }, [tabNames]);
+    const scrollY = (0, react_native_reanimated_1.useSharedValue)(initialScrollY);
+    const headerTranslateY = (0, react_native_reanimated_1.useSharedValue)(0);
+    (0, react_native_reanimated_1.useAnimatedReaction)(() => {
+        const y = scrollY.value[focusedTab.value] ?? 0;
+        return -Math.min(y, headerScrollDistance);
+    }, (next) => {
+        headerTranslateY.value = next;
+    }, [headerScrollDistance]);
+    const refMap = (0, react_1.useRef)({}).current;
+    const setRef = (0, react_1.useCallback)((key, ref) => {
+        refMap[key] = ref;
+        return ref;
+    }, [refMap]);
+    const containerRef = (0, react_1.useRef)(null);
+    const onTabPress = (0, react_1.useCallback)((name) => {
+        const i = tabNames.indexOf(name);
+        if (i < 0)
+            return;
+        containerRef.current?.setPage(i);
+    }, [tabNames]);
+    const [renderIndex, setRenderIndex] = (0, react_1.useState)(initialIndex);
+    const { doDependenciesDiffer } = (0, react_native_reanimated_1.useHandler)({});
+    const pageScrollHandler = (0, react_native_reanimated_1.useEvent)((e) => {
+        "worklet";
+        indexDecimal.value = e.position + e.offset;
+    }, ["onPageScroll"], doDependenciesDiffer);
+    const onPageSelected = (0, react_1.useCallback)((e) => {
+        const i = e.nativeEvent.position;
+        index.value = i;
+        focusedTab.value = tabNames[i] ?? "";
+        setRenderIndex(i);
+        onIndexChange?.(i);
+    }, [tabNames, index, focusedTab, onIndexChange]);
+    const headerAnimStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        transform: [{ translateY: headerTranslateY.value }],
+    }));
+    const ctxValue = {
+        headerHeight,
+        tabBarHeight,
+        minHeaderHeight,
+        headerScrollDistance,
+        tabNames,
+        index,
+        indexDecimal,
+        focusedTab,
+        scrollY,
+        headerTranslateY,
+        setRef,
+        refMap,
+        containerRef,
+    };
+    const headerProps = {
+        tabNames,
+        focusedTab,
+        index,
+        indexDecimal,
+        onTabPress,
+    };
+    return (<context_1.Context.Provider value={ctxValue}>
+      <react_native_1.View style={[styles.container, containerStyle]}>
+        <AnimatedPagerView ref={containerRef} style={react_native_1.StyleSheet.absoluteFill} initialPage={initialIndex} onPageScroll={pageScrollHandler} onPageSelected={onPageSelected} {...pagerProps}>
+          {tabs.map((tab, i) => (<react_native_1.View key={tab.props.name} style={styles.page} collapsable={false}>
+              {tab}
+            </react_native_1.View>))}
+        </AnimatedPagerView>
+
+        <react_native_reanimated_1.default.View pointerEvents="box-none" style={[
+            styles.headerContainer,
+            { height: headerHeight + tabBarHeight },
+            headerContainerStyle,
+            headerAnimStyle,
+        ]}>
+          <react_native_1.View pointerEvents="box-none" style={{ height: headerHeight }}>
+            {renderHeader?.(headerProps)}
+          </react_native_1.View>
+          <react_native_1.View style={{ height: tabBarHeight }}>
+            {renderTabBar
+            ? renderTabBar(headerProps)
+            : <TabBar_1.DefaultTabBar {...headerProps}/>}
+          </react_native_1.View>
+        </react_native_reanimated_1.default.View>
+      </react_native_1.View>
+    </context_1.Context.Provider>);
+};
+exports.CollapseTabs = CollapseTabs;
+const styles = react_native_1.StyleSheet.create({
+    container: { flex: 1, overflow: "hidden" },
+    page: { flex: 1 },
+    headerContainer: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 10,
+        backgroundColor: "#fff",
+    },
+});

package/lib/lib/CollapseTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapseTabs.js","sourceRoot":"","sources":["../src/CollapseTabs.tsx"],"names":[],"mappings":";;;AAAA,iCAA0B;AAC1B,+CAAiE;AAO1D,MAAM,YAAY,GAAgC,CAAC,EACxD,QAAQ,EACR,KAAK,GACN,EAAE,EAAE;IACH,OAAO,CAAC,mBAAI,CAAE,CAAA,CAAC,QAAQ,CAAC,EAAE,mBAAI,CAAC,CAAC;AAClC,CAAC,CAAC;AALW,QAAA,YAAY,gBAKvB"}

package/lib/lib/FlatList.d.ts

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

package/lib/lib/FlatList.d.ts.map

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

package/lib/lib/FlatList.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlatList = FlatList;
+const react_1 = __importStar(require("react"));
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const hooks_1 = require("./hooks");
+function FlatList({ name, contentContainerStyle, ...rest }) {
+    const { headerHeight, tabBarHeight, scrollY, focusedTab, setRef, } = (0, hooks_1.useTabsContext)();
+    const ref = (0, react_native_reanimated_1.useAnimatedRef)();
+    (0, react_1.useEffect)(() => {
+        setRef(name, ref);
+    }, [name, ref, setRef]);
+    const handler = (0, react_native_reanimated_1.useAnimatedScrollHandler)({
+        onScroll: (event) => {
+            if (focusedTab.value !== name)
+                return;
+            const map = { ...scrollY.value };
+            map[name] = event.contentOffset.y;
+            scrollY.value = map;
+        },
+    });
+    return (<react_native_reanimated_1.default.FlatList {...rest} ref={ref} onScroll={handler} scrollEventThrottle={16} contentContainerStyle={[
+            { paddingTop: headerHeight + tabBarHeight },
+            contentContainerStyle,
+        ]}/>);
+}

package/lib/lib/ScrollView.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { ScrollViewProps } from "react-native";
+type Props = ScrollViewProps & {
+    name: string;
+    children?: React.ReactNode;
+};
+export declare function ScrollView({ name, contentContainerStyle, children, ...rest }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=ScrollView.d.ts.map

package/lib/lib/ScrollView.d.ts.map

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

package/lib/lib/ScrollView.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollView = ScrollView;
+const react_1 = __importStar(require("react"));
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const hooks_1 = require("./hooks");
+function ScrollView({ name, contentContainerStyle, children, ...rest }) {
+    const { headerHeight, tabBarHeight, scrollY, focusedTab, setRef, } = (0, hooks_1.useTabsContext)();
+    const ref = (0, react_native_reanimated_1.useAnimatedRef)();
+    (0, react_1.useEffect)(() => {
+        setRef(name, ref);
+    }, [name, ref, setRef]);
+    const handler = (0, react_native_reanimated_1.useAnimatedScrollHandler)({
+        onScroll: (event) => {
+            if (focusedTab.value !== name)
+                return;
+            const map = { ...scrollY.value };
+            map[name] = event.contentOffset.y;
+            scrollY.value = map;
+        },
+    });
+    return (<react_native_reanimated_1.default.ScrollView {...rest} ref={ref} onScroll={handler} scrollEventThrottle={16} contentContainerStyle={[
+            { paddingTop: headerHeight + tabBarHeight },
+            contentContainerStyle,
+        ]}>
+      {children}
+    </react_native_reanimated_1.default.ScrollView>);
+}

package/lib/lib/Tab.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { TabProps } from "./types/types";
+/**
+ * Container for a single tab's content. Should be a direct child of
+ * <CollapseTabs>. Place a wrapped <FlatList> or <ScrollView> inside.
+ */
+export declare const Tab: <T extends string>({ children }: TabProps<T>) => React.JSX.Element;
+//# sourceMappingURL=Tab.d.ts.map

package/lib/lib/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../src/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;GAGG;AACH,eAAO,MAAM,GAAG,GAAI,CAAC,SAAS,MAAM,EAAE,cAAc,QAAQ,CAAC,CAAC,CAAC,sBAE9D,CAAC"}

package/lib/lib/Tab.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+/**
+ * Container for a single tab's content. Should be a direct child of
+ * <CollapseTabs>. Place a wrapped <FlatList> or <ScrollView> inside.
+ */
+const Tab = ({ children }) => {
+    return <react_native_1.View style={styles.container}>{children}</react_native_1.View>;
+};
+exports.Tab = Tab;
+const styles = react_native_1.StyleSheet.create({
+    container: { flex: 1 },
+});

package/lib/lib/TabBar.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TabBarProps } from "./types/types";
+export declare const DefaultTabBar: React.FC<TabBarProps>;
+//# sourceMappingURL=TabBar.d.ts.map

package/lib/lib/TabBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../src/TabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmB/C,CAAC"}

package/lib/lib/TabBar.js

@@ -0,0 +1,89 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultTabBar = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const DefaultTabBar = ({ tabNames, indexDecimal, onTabPress, }) => {
+    return (<react_native_1.View style={styles.container}>
+      {tabNames.map((name, i) => (<TabBarItem key={name} name={name} index={i} indexDecimal={indexDecimal} onPress={() => onTabPress(name)}/>))}
+      <Indicator count={tabNames.length} indexDecimal={indexDecimal}/>
+    </react_native_1.View>);
+};
+exports.DefaultTabBar = DefaultTabBar;
+const TabBarItem = ({ name, index, indexDecimal, onPress }) => {
+    const labelStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: (0, react_native_reanimated_1.interpolate)(indexDecimal.value, [index - 1, index, index + 1], [0.6, 1, 0.6], "clamp"),
+    }));
+    return (<react_native_1.Pressable style={styles.item} onPress={onPress}>
+      <react_native_reanimated_1.default.Text style={[styles.label, labelStyle]}>{name}</react_native_reanimated_1.default.Text>
+    </react_native_1.Pressable>);
+};
+const Indicator = ({ count, indexDecimal }) => {
+    const style = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        transform: [
+            { translateX: (indexDecimal.value * 100) / count + "%" },
+        ],
+        width: `${100 / count}%`,
+    }));
+    return <react_native_reanimated_1.default.View style={[styles.indicator, style]}/>;
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        backgroundColor: "#fff",
+    },
+    item: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: "500",
+        color: "#333",
+    },
+    indicator: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        height: 2,
+        backgroundColor: "#2D8CFF",
+    },
+});

package/lib/lib/context/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { ContextType } from "../types/types";
+export type { ContextType, TabName, RefComponent } from "../types/types";
+export declare const Context: React.Context<ContextType<string> | undefined>;
+//# sourceMappingURL=index.d.ts.map

package/lib/lib/context/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAW,MAAM,gBAAgB,CAAC;AAEtD,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzE,eAAO,MAAM,OAAO,gDAEnB,CAAC"}

package/lib/lib/context/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Context = void 0;
+const react_1 = __importDefault(require("react"));
+exports.Context = react_1.default.createContext(undefined);

package/lib/lib/hooks/index.d.ts

@@ -0,0 +1,3 @@
+import { ContextType } from "../types/types";
+export declare function useTabsContext(): ContextType<string>;
+//# sourceMappingURL=index.d.ts.map

package/lib/lib/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,wBAAgB,cAAc,IAAI,WAAW,CAAC,MAAM,CAAC,CAIpD"}

package/lib/lib/hooks/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabsContext = useTabsContext;
+const react_1 = require("react");
+const context_1 = require("../context");
+function useTabsContext() {
+    const c = (0, react_1.useContext)(context_1.Context);
+    if (!c)
+        throw new Error("useTabsContext must be used inside <CollapseTabs>");
+    return c;
+}

package/lib/lib/index.d.ts

@@ -0,0 +1,8 @@
+export { CollapseTabs } from "./CollapseTabs";
+export { Tab } from "./Tab";
+export { FlatList } from "./FlatList";
+export { ScrollView } from "./ScrollView";
+export { DefaultTabBar } from "./TabBar";
+export { useTabsContext } from "./hooks";
+export type { CollapseTabsProps, TabProps, TabBarProps, HeaderProps, TabName, } from "./types/types";
+//# sourceMappingURL=index.d.ts.map

package/lib/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,YAAY,EACV,iBAAiB,EACjB,QAAQ,EACR,WAAW,EACX,WAAW,EACX,OAAO,GACR,MAAM,eAAe,CAAC"}

package/lib/lib/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabsContext = exports.DefaultTabBar = exports.ScrollView = exports.FlatList = exports.Tab = exports.CollapseTabs = void 0;
+var CollapseTabs_1 = require("./CollapseTabs");
+Object.defineProperty(exports, "CollapseTabs", { enumerable: true, get: function () { return CollapseTabs_1.CollapseTabs; } });
+var Tab_1 = require("./Tab");
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tab_1.Tab; } });
+var FlatList_1 = require("./FlatList");
+Object.defineProperty(exports, "FlatList", { enumerable: true, get: function () { return FlatList_1.FlatList; } });
+var ScrollView_1 = require("./ScrollView");
+Object.defineProperty(exports, "ScrollView", { enumerable: true, get: function () { return ScrollView_1.ScrollView; } });
+var TabBar_1 = require("./TabBar");
+Object.defineProperty(exports, "DefaultTabBar", { enumerable: true, get: function () { return TabBar_1.DefaultTabBar; } });
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "useTabsContext", { enumerable: true, get: function () { return hooks_1.useTabsContext; } });

package/lib/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;AAAA,+CAA8C;AAArC,4GAAA,YAAY,OAAA"}

package/lib/lib/types/types.d.ts

@@ -0,0 +1,57 @@
+import React from "react";
+import { FlatList, ScrollView, StyleProp, ViewStyle } from "react-native";
+import PagerView, { PagerViewProps } from "react-native-pager-view";
+import Animated, { AnimatedRef, SharedValue } from "react-native-reanimated";
+export type TabName = string;
+export type ContainerRef = PagerView;
+export type RefComponent = FlatList<any> | ScrollView | Animated.ScrollView;
+export type TabBarProps<T extends TabName = TabName> = {
+    tabNames: T[];
+    focusedTab: SharedValue<T>;
+    index: SharedValue<number>;
+    indexDecimal: SharedValue<number>;
+    onTabPress: (name: T) => void;
+};
+export type HeaderProps<T extends TabName = TabName> = TabBarProps<T>;
+export type TabProps<T extends TabName = TabName> = {
+    readonly name: T;
+    label?: string;
+    children: React.ReactNode;
+};
+export type TabReactElement<T extends TabName = TabName> = React.ReactElement<TabProps<T>>;
+export type CollapseTabsProps = {
+    children: TabReactElement | TabReactElement[];
+    /** Initial tab name. Defaults to the first child. */
+    initialTabName?: TabName;
+    /** Fixed header height. Required for MVP. */
+    headerHeight: number;
+    /** Fixed tab bar height. Required for MVP. */
+    tabBarHeight: number;
+    /** Minimum header height when fully collapsed. @default 0 */
+    minHeaderHeight?: number;
+    renderHeader?: (props: HeaderProps) => React.ReactElement | null;
+    renderTabBar?: (props: TabBarProps) => React.ReactElement | null;
+    containerStyle?: StyleProp<ViewStyle>;
+    headerContainerStyle?: StyleProp<ViewStyle>;
+    pagerProps?: Omit<PagerViewProps, "onPageScroll" | "initialPage">;
+    onIndexChange?: (index: number) => void;
+};
+/** Internal context shared between CollapseTabs and its children. */
+export type ContextType<T extends TabName = TabName> = {
+    headerHeight: number;
+    tabBarHeight: number;
+    minHeaderHeight: number;
+    headerScrollDistance: number;
+    tabNames: T[];
+    index: SharedValue<number>;
+    indexDecimal: SharedValue<number>;
+    focusedTab: SharedValue<T>;
+    /** Per-tab scroll Y, keyed by tab name. */
+    scrollY: SharedValue<Record<T, number>>;
+    /** Header translateY (clamped to [-headerScrollDistance, 0]). */
+    headerTranslateY: SharedValue<number>;
+    setRef: <R extends RefComponent>(key: T, ref: AnimatedRef<R>) => AnimatedRef<R>;
+    refMap: Record<T, AnimatedRef<RefComponent>>;
+    containerRef: React.RefObject<ContainerRef>;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/lib/types/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types/types.ts"],"names":[],"mappings":"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"}

package/lib/lib/types/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

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

package/src/CollapseTabs.tsx

@@ -1,9 +1,4 @@
-import React, {
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import PagerView, {
   PagerViewOnPageScrollEventData,
@@ -17,6 +12,7 @@ import Animated, {
   useEvent,
   useHandler,
   useSharedValue,
+  withTiming,
 } from "react-native-reanimated";
 import { Context } from "./context";
 import { DefaultTabBar } from "./TabBar";
@@ -47,20 +43,20 @@ export const CollapseTabs: React.FC<CollapseTabsProps> = ({
 }) => {
   const tabs = useMemo(
     () =>
-      React.Children.toArray(children).filter(
-        (c): c is TabReactElement => React.isValidElement(c)
+      React.Children.toArray(children).filter((c): c is TabReactElement =>
+        React.isValidElement(c),
       ),
-    [children]
+    [children],
   );
 
   const tabNames = useMemo(
     () => tabs.map((t) => (t.props as TabProps).name),
-    [tabs]
+    [tabs],
   );
 
   const initialIndex = Math.max(
     0,
-    initialTabName ? tabNames.indexOf(initialTabName) : 0
+    initialTabName ? tabNames.indexOf(initialTabName) : 0,
   );
 
   const headerScrollDistance = headerHeight - minHeaderHeight;
@@ -80,13 +76,21 @@ export const CollapseTabs: React.FC<CollapseTabsProps> = ({
 
   useAnimatedReaction(
     () => {
-      const y = scrollY.value[focusedTab.value] ?? 0;
-      return -Math.min(y, headerScrollDistance);
+      const tab = focusedTab.value;
+      const y = scrollY.value[tab] ?? 0;
+      return {
+        tab,
+        translateY: -Math.min(Math.max(y, 0), headerScrollDistance),
+      };
     },
-    (next) => {
-      headerTranslateY.value = next;
+    (next, prev) => {
+      if (prev && prev.tab !== next.tab) {
+        headerTranslateY.value = withTiming(next.translateY, { duration: 250 });
+      } else {
+        headerTranslateY.value = next.translateY;
+      }
     },
-    [headerScrollDistance]
+    [headerScrollDistance],
   );
 
   const refMap = useRef<Record<TabName, AnimatedRef<RefComponent>>>({}).current;
@@ -96,16 +100,19 @@ export const CollapseTabs: React.FC<CollapseTabsProps> = ({
       refMap[key] = ref as unknown as AnimatedRef<RefComponent>;
       return ref;
     },
-    [refMap]
+    [refMap],
   );
 
   const containerRef = useRef<ContainerRef>(null);
 
-  const onTabPress = useCallback((name: TabName) => {
-    const i = tabNames.indexOf(name);
-    if (i < 0) return;
-    containerRef.current?.setPage(i);
-  }, [tabNames]);
+  const onTabPress = useCallback(
+    (name: TabName) => {
+      const i = tabNames.indexOf(name);
+      if (i < 0) return;
+      containerRef.current?.setPage(i);
+    },
+    [tabNames],
+  );
 
   const [renderIndex, setRenderIndex] = useState(initialIndex);
 
@@ -116,7 +123,7 @@ export const CollapseTabs: React.FC<CollapseTabsProps> = ({
       indexDecimal.value = e.position + e.offset;
     },
     ["onPageScroll"],
-    doDependenciesDiffer
+    doDependenciesDiffer,
   );
 
   const onPageSelected = useCallback(
@@ -127,7 +134,7 @@ export const CollapseTabs: React.FC<CollapseTabsProps> = ({
       setRenderIndex(i);
       onIndexChange?.(i);
     },
-    [tabNames, index, focusedTab, onIndexChange]
+    [tabNames, index, focusedTab, onIndexChange],
   );
 
   const headerAnimStyle = useAnimatedStyle(() => ({
@@ -185,16 +192,15 @@ export const CollapseTabs: React.FC<CollapseTabsProps> = ({
             headerAnimStyle,
           ]}
         >
-          <View
-            pointerEvents="box-none"
-            style={{ height: headerHeight }}
-          >
+          <View pointerEvents="box-none" style={{ height: headerHeight }}>
             {renderHeader?.(headerProps)}
           </View>
           <View style={{ height: tabBarHeight }}>
-            {renderTabBar
-              ? renderTabBar(headerProps)
-              : <DefaultTabBar {...headerProps} />}
+            {renderTabBar ? (
+              renderTabBar(headerProps)
+            ) : (
+              <DefaultTabBar {...headerProps} />
+            )}
           </View>
         </Animated.View>
       </View>

package/src/FlatList.tsx

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

package/src/ScrollView.tsx

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