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

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.1",
+  "version": "1.0.3",
   "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,225 @@
-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,
+  withTiming,
+} 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 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<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>;
+};