@orionarm/react-native-collapse-tabs 1.0.1 → 1.0.3

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

@@ -1,8 +1,4 @@
 import React from "react";
-import { ViewStyle } from "react-native";
-export interface CollapseTabsProps {
-    children?: React.ReactNode;
-    style?: ViewStyle;
-}
+import { CollapseTabsProps } from "./types/types";
 export declare const CollapseTabs: React.FC<CollapseTabsProps>;
 //# sourceMappingURL=CollapseTabs.d.ts.map

package/lib/CollapseTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollapseTabs.d.ts","sourceRoot":"","sources":["../src/CollapseTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAQ,MAAM,cAAc,CAAC;AAEjE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAKpD,CAAC"}
+{"version":3,"file":"CollapseTabs.d.ts","sourceRoot":"","sources":["../src/CollapseTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAkBf,OAAO,EACL,iBAAiB,EAOlB,MAAM,eAAe,CAAC;AAIvB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgLpD,CAAC"}

package/lib/CollapseTabs.js

@@ -1,12 +1,125 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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, withTiming, } from "react-native-reanimated";
+import { Context } from "./context";
+import { DefaultTabBar } from "./TabBar";
+const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
+export const CollapseTabs = ({ children, initialTabName, headerHeight, tabBarHeight, minHeaderHeight = 0, renderHeader, renderTabBar, containerStyle, headerContainerStyle, pagerProps, onIndexChange, }) => {
+    const tabs = useMemo(() => React.Children.toArray(children).filter((c) => React.isValidElement(c)), [children]);
+    const tabNames = useMemo(() => tabs.map((t) => t.props.name), [tabs]);
+    const initialIndex = Math.max(0, initialTabName ? tabNames.indexOf(initialTabName) : 0);
+    const headerScrollDistance = headerHeight - minHeaderHeight;
+    const index = useSharedValue(initialIndex);
+    const indexDecimal = useSharedValue(initialIndex);
+    const focusedTab = useSharedValue(tabNames[initialIndex] ?? "");
+    const initialScrollY = useMemo(() => {
+        const m = {};
+        tabNames.forEach((n) => (m[n] = 0));
+        return m;
+    }, [tabNames]);
+    const scrollY = useSharedValue(initialScrollY);
+    const headerTranslateY = useSharedValue(0);
+    useAnimatedReaction(() => {
+        const tab = focusedTab.value;
+        const y = scrollY.value[tab] ?? 0;
+        return {
+            tab,
+            translateY: -Math.min(y, 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) => {
+        refMap[key] = ref;
+        return ref;
+    }, [refMap]);
+    const containerRef = useRef(null);
+    const onTabPress = useCallback((name) => {
+        const i = tabNames.indexOf(name);
+        if (i < 0)
+            return;
+        containerRef.current?.setPage(i);
+    }, [tabNames]);
+    const [renderIndex, setRenderIndex] = useState(initialIndex);
+    const { doDependenciesDiffer } = useHandler({});
+    const pageScrollHandler = useEvent((e) => {
+        "worklet";
+        indexDecimal.value = e.position + e.offset;
+    }, ["onPageScroll"], doDependenciesDiffer);
+    const onPageSelected = useCallback((e) => {
+        const i = e.nativeEvent.position;
+        index.value = i;
+        focusedTab.value = tabNames[i] ?? "";
+        setRenderIndex(i);
+        onIndexChange?.(i);
+    }, [tabNames, index, focusedTab, onIndexChange]);
+    const headerAnimStyle = 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.Provider value={ctxValue}>
+      <View style={[styles.container, containerStyle]}>
+        <AnimatedPagerView ref={containerRef} style={StyleSheet.absoluteFill} initialPage={initialIndex} onPageScroll={pageScrollHandler} onPageSelected={onPageSelected} {...pagerProps}>
+          {tabs.map((tab, i) => (<View key={tab.props.name} style={styles.page} collapsable={false}>
+              {tab}
+            </View>))}
+        </AnimatedPagerView>
+
+        <Animated.View pointerEvents="box-none" style={[
+            styles.headerContainer,
+            { height: headerHeight + tabBarHeight },
+            headerContainerStyle,
+            headerAnimStyle,
+        ]}>
+          <View pointerEvents="box-none" style={{ height: headerHeight }}>
+            {renderHeader?.(headerProps)}
+          </View>
+          <View style={{ height: tabBarHeight }}>
+            {renderTabBar
+            ? renderTabBar(headerProps)
+            : <DefaultTabBar {...headerProps}/>}
+          </View>
+        </Animated.View>
+      </View>
+    </Context.Provider>);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CollapseTabs = void 0;
-const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native");
-const CollapseTabs = ({ children, style, }) => {
-    return <react_native_1.View> {children}</react_native_1.View>;
-};
-exports.CollapseTabs = CollapseTabs;
+const styles = 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/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/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/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/FlatList.js

@@ -0,0 +1,23 @@
+import React, { useEffect } from "react";
+import Animated, { useAnimatedRef, useAnimatedScrollHandler, } from "react-native-reanimated";
+import { useTabsContext } from "./hooks";
+export function FlatList({ name, contentContainerStyle, ...rest }) {
+    const { headerHeight, tabBarHeight, scrollY, focusedTab, setRef, } = useTabsContext();
+    const ref = useAnimatedRef();
+    useEffect(() => {
+        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;
+        },
+    });
+    return (<Animated.FlatList {...rest} ref={ref} onScroll={handler} scrollEventThrottle={16} contentContainerStyle={[
+            { paddingTop: headerHeight + tabBarHeight },
+            contentContainerStyle,
+        ]}/>);
+}

package/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/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/ScrollView.js

@@ -0,0 +1,25 @@
+import React, { useEffect } from "react";
+import Animated, { useAnimatedRef, useAnimatedScrollHandler, } from "react-native-reanimated";
+import { useTabsContext } from "./hooks";
+export function ScrollView({ name, contentContainerStyle, children, ...rest }) {
+    const { headerHeight, tabBarHeight, scrollY, focusedTab, setRef, } = useTabsContext();
+    const ref = useAnimatedRef();
+    useEffect(() => {
+        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;
+        },
+    });
+    return (<Animated.ScrollView {...rest} ref={ref} onScroll={handler} scrollEventThrottle={16} contentContainerStyle={[
+            { paddingTop: headerHeight + tabBarHeight },
+            contentContainerStyle,
+        ]}>
+      {children}
+    </Animated.ScrollView>);
+}

package/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/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/Tab.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+/**
+ * Container for a single tab's content. Should be a direct child of
+ * <CollapseTabs>. Place a wrapped <FlatList> or <ScrollView> inside.
+ */
+export const Tab = ({ children }) => {
+    return <View style={styles.container}>{children}</View>;
+};
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+});

package/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/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/TabBar.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import Animated, { interpolate, useAnimatedStyle, } from "react-native-reanimated";
+export const DefaultTabBar = ({ tabNames, indexDecimal, onTabPress, }) => {
+    return (<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}/>
+    </View>);
+};
+const TabBarItem = ({ name, index, indexDecimal, onPress }) => {
+    const labelStyle = useAnimatedStyle(() => ({
+        opacity: interpolate(indexDecimal.value, [index - 1, index, index + 1], [0.6, 1, 0.6], "clamp"),
+    }));
+    return (<Pressable style={styles.item} onPress={onPress}>
+      <Animated.Text style={[styles.label, labelStyle]}>{name}</Animated.Text>
+    </Pressable>);
+};
+const Indicator = ({ count, indexDecimal }) => {
+    const style = useAnimatedStyle(() => ({
+        transform: [
+            { translateX: (indexDecimal.value * 100) / count + "%" },
+        ],
+        width: `${100 / count}%`,
+    }));
+    return <Animated.View style={[styles.indicator, style]}/>;
+};
+const styles = 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/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/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/context/index.js

@@ -0,0 +1,2 @@
+import React from "react";
+export const Context = React.createContext(undefined);

package/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/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/hooks/index.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { Context } from "../context";
+export function useTabsContext() {
+    const c = useContext(Context);
+    if (!c)
+        throw new Error("useTabsContext must be used inside <CollapseTabs>");
+    return c;
+}

package/lib/index.d.ts

@@ -1,3 +1,8 @@
-export { CollapseTabs } from './CollapseTabs';
-export type { CollapseTabsProps } from './CollapseTabs';
+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/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
+{"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/index.js

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

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