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

package/README.md

@@ -1,33 +1,3 @@
 # @orionarm/react-native-collapse-tabs
 
-A React Native collapsible tabs component.
-
-## Installation
-
-```bash
-npm install @orionarm/react-native-collapse-tabs
-```
-
-or
-
-```bash
-yarn add @orionarm/react-native-collapse-tabs
-```
-
-## Usage
-
-```tsx
-import { CollapseTabs } from '@orionarm/react-native-collapse-tabs';
-
-function App() {
-  return (
-    <CollapseTabs>
-      {/* Your content here */}
-    </CollapseTabs>
-  );
-}
-```
-
-## License
-
-ISC
+> ⚠️ **Work in Progress** - This package is currently under active development and not yet ready for production use.

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;AAiBf,OAAO,EACL,iBAAiB,EAOlB,MAAM,eAAe,CAAC;AAIvB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwKpD,CAAC"}

package/lib/CollapseTabs.js

@@ -1,12 +1,116 @@
-"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, } 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 y = scrollY.value[focusedTab.value] ?? 0;
+        return -Math.min(y, headerScrollDistance);
+    }, (next) => {
+        headerTranslateY.value = next;
+    }, [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/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/types/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,SAAS,EAAE,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,QAAQ,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE7E,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC;AAE7B,MAAM,MAAM,YAAY,GAAG,SAAS,CAAC;AAErC,MAAM,MAAM,YAAY,GACpB,QAAQ,CAAC,GAAG,CAAC,GACb,UAAU,GACV,QAAQ,CAAC,UAAU,CAAC;AAExB,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,IAAI;IACrD,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC;AAEtE,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,IAAI;IAClD,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,IACrD,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AAElC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;IAE9C,qDAAqD;IACrD,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,6CAA6C;IAC7C,YAAY,EAAE,MAAM,CAAC;IAErB,8CAA8C;IAC9C,YAAY,EAAE,MAAM,CAAC;IAErB,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IACjE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IAEjE,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE5C,UAAU,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,cAAc,GAAG,aAAa,CAAC,CAAC;IAElE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,qEAAqE;AACrE,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,IAAI;IACrD,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,EAAE,MAAM,CAAC;IAE7B,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IAE3B,2CAA2C;IAC3C,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IAExC,iEAAiE;IACjE,gBAAgB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAEtC,MAAM,EAAE,CAAC,CAAC,SAAS,YAAY,EAC7B,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,KAChB,WAAW,CAAC,CAAC,CAAC,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC;IAE7C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;CAC7C,CAAC"}

package/lib/types/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@orionarm/react-native-collapse-tabs",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A React Native collapsible tabs component",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
     "build": "tsc",
-    "prepare": "npm run build",
+    "watch": "tsc --watch",
+    "prepublishOnly": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
@@ -28,17 +29,20 @@
   "license": "ISC",
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-native": ">=0.60.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"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-native": "^0.72.0",
     "react": "^18.2.0",
     "react-native": "^0.72.0",
-    "typescript": "^5.0.0",
     "react-native-gesture-handler": "~2.16.0",
     "react-native-pager-view": "^6.3.0",
-    "react-native-reanimated": "3.8.1"
+    "react-native-reanimated": "3.8.1",
+    "typescript": "^5.9.3"
   },
   "files": [
     "lib",

package/src/CollapseTabs.tsx

@@ -1,14 +1,216 @@
-import React from "react";
-import { View, StyleSheet, ViewStyle, Text } from "react-native";
+import React, {
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { StyleSheet, View } from "react-native";
+import PagerView, {
+  PagerViewOnPageScrollEventData,
+  PagerViewOnPageSelectedEventData,
+} from "react-native-pager-view";
+import Animated, {
+  AnimatedRef,
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useEvent,
+  useHandler,
+  useSharedValue,
+} from "react-native-reanimated";
+import { Context } from "./context";
+import { DefaultTabBar } from "./TabBar";
+import {
+  CollapseTabsProps,
+  ContainerRef,
+  ContextType,
+  RefComponent,
+  TabName,
+  TabProps,
+  TabReactElement,
+} from "./types/types";
 
-export interface CollapseTabsProps {
-  children?: React.ReactNode;
-  style?: ViewStyle;
-}
+const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
 
 export const CollapseTabs: React.FC<CollapseTabsProps> = ({
   children,
-  style,
+  initialTabName,
+  headerHeight,
+  tabBarHeight,
+  minHeaderHeight = 0,
+  renderHeader,
+  renderTabBar,
+  containerStyle,
+  headerContainerStyle,
+  pagerProps,
+  onIndexChange,
 }) => {
-  return <View> {children}</View>;
+  const tabs = useMemo(
+    () =>
+      React.Children.toArray(children).filter(
+        (c): c is TabReactElement => React.isValidElement(c)
+      ),
+    [children]
+  );
+
+  const tabNames = useMemo(
+    () => tabs.map((t) => (t.props as TabProps).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<TabName>(tabNames[initialIndex] ?? "");
+
+  const initialScrollY = useMemo(() => {
+    const m: Record<string, number> = {};
+    tabNames.forEach((n) => (m[n] = 0));
+    return m;
+  }, [tabNames]);
+  const scrollY = useSharedValue<Record<TabName, number>>(initialScrollY);
+
+  const headerTranslateY = useSharedValue(0);
+
+  useAnimatedReaction(
+    () => {
+      const y = scrollY.value[focusedTab.value] ?? 0;
+      return -Math.min(y, headerScrollDistance);
+    },
+    (next) => {
+      headerTranslateY.value = next;
+    },
+    [headerScrollDistance]
+  );
+
+  const refMap = useRef<Record<TabName, AnimatedRef<RefComponent>>>({}).current;
+
+  const setRef = useCallback(
+    <R extends RefComponent>(key: TabName, ref: AnimatedRef<R>) => {
+      refMap[key] = ref as unknown as AnimatedRef<RefComponent>;
+      return ref;
+    },
+    [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 [renderIndex, setRenderIndex] = useState(initialIndex);
+
+  const { doDependenciesDiffer } = useHandler({});
+  const pageScrollHandler = useEvent<PagerViewOnPageScrollEventData>(
+    (e) => {
+      "worklet";
+      indexDecimal.value = e.position + e.offset;
+    },
+    ["onPageScroll"],
+    doDependenciesDiffer
+  );
+
+  const onPageSelected = useCallback(
+    (e: { nativeEvent: PagerViewOnPageSelectedEventData }) => {
+      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: ContextType = {
+    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 as any}
+          style={StyleSheet.absoluteFill}
+          initialPage={initialIndex}
+          onPageScroll={pageScrollHandler as any}
+          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>
+  );
 };
+
+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/src/FlatList.tsx

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

package/src/ScrollView.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect } from "react";
+import { ScrollViewProps, ScrollView as RNScrollView } from "react-native";
+import Animated, {
+  useAnimatedRef,
+  useAnimatedScrollHandler,
+} from "react-native-reanimated";
+import { useTabsContext } from "./hooks";
+
+type Props = ScrollViewProps & { name: string; children?: React.ReactNode };
+
+export function ScrollView({
+  name,
+  contentContainerStyle,
+  children,
+  ...rest
+}: Props) {
+  const {
+    headerHeight,
+    tabBarHeight,
+    scrollY,
+    focusedTab,
+    setRef,
+  } = useTabsContext();
+
+  const ref = useAnimatedRef<Animated.ScrollView>();
+
+  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/src/Tab.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+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 const Tab = <T extends string>({ children }: TabProps<T>) => {
+  return <View style={styles.container}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});

package/src/TabBar.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import Animated, {
+  interpolate,
+  useAnimatedStyle,
+} from "react-native-reanimated";
+import { TabBarProps } from "./types/types";
+
+export const DefaultTabBar: React.FC<TabBarProps> = ({
+  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: React.FC<{
+  name: string;
+  index: number;
+  indexDecimal: Animated.SharedValue<number>;
+  onPress: () => void;
+}> = ({ 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: React.FC<{
+  count: number;
+  indexDecimal: Animated.SharedValue<number>;
+}> = ({ count, indexDecimal }) => {
+  const style = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: (indexDecimal.value * 100) / count + "%" } as any,
+    ],
+    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/src/context/index.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { ContextType, TabName } from "../types/types";
+
+export type { ContextType, TabName, RefComponent } from "../types/types";
+
+export const Context = React.createContext<ContextType<TabName> | undefined>(
+  undefined
+);

package/src/hooks/index.ts

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

package/src/index.tsx

@@ -1,2 +1,14 @@
-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";

package/src/types/types.ts

@@ -0,0 +1,85 @@
+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>;
+};