react-native-collapsible-tabs-reanimated 0.1.0-beta

package/src/List.tsx

@@ -0,0 +1,115 @@
+import { ReactElement, memo, useCallback, useEffect, useMemo } from "react";
+
+import {
+  FlatListProps,
+  LayoutChangeEvent,
+  StyleSheet,
+  View,
+} from "react-native";
+
+import { GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  scrollTo,
+  useAnimatedReaction,
+  useAnimatedRef,
+  useAnimatedScrollHandler,
+  useComposedEventHandler,
+  useSharedValue,
+} from "react-native-reanimated";
+
+import { ListScroller, useCollapsibleTabsContext } from "./Context";
+import { useTabSelfContext } from "./Tab";
+import { useStableCallback } from "./useStableCallback";
+
+export type ListProps<T> = Omit<FlatListProps<T>, "CellRendererComponent">;
+
+const List = <T,>({
+  onLayout,
+  onContentSizeChange,
+  ...props
+}: ListProps<T>) => {
+  const {
+    listGestures,
+    activeTabIndex,
+    activeListOffset,
+    registerListScroller,
+  } = useCollapsibleTabsContext();
+  const { index } = useTabSelfContext();
+  const selfOffset = useSharedValue(0);
+  const listRef = useAnimatedRef<Animated.FlatList<T>>();
+
+  const onScroll = useAnimatedScrollHandler((event) => {
+    selfOffset.value = event.contentOffset.y;
+    if (activeTabIndex.value === index)
+      activeListOffset.value = event.contentOffset.y;
+  });
+
+  const composedScrollEvent = useComposedEventHandler(
+    props.onScroll ? [onScroll, props.onScroll] : [onScroll],
+  );
+
+  useAnimatedReaction(
+    () => activeTabIndex.value,
+    (value) => {
+      if (value === index) activeListOffset.value = selfOffset.value;
+    },
+    [index],
+  );
+
+  const scroller = useMemo(
+    (): ListScroller =>
+      (animated = true) => {
+        "worklet";
+        scrollTo(listRef, 0, 0, animated);
+      },
+    [listRef],
+  );
+
+  useEffect(() => {
+    registerListScroller(index, scroller);
+    return () => registerListScroller(index, null);
+  }, [index, registerListScroller, scroller]);
+
+  const stableLayout = useStableCallback(onLayout);
+  const stableContentSizeChange = useStableCallback(onContentSizeChange);
+
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      stableLayout?.(event);
+    },
+    [stableLayout],
+  );
+
+  const handleContentSizeChange = useCallback(
+    (width: number, height: number) => {
+      stableContentSizeChange?.(width, height);
+    },
+    [stableContentSizeChange],
+  );
+
+  return (
+    <View style={styles.view} collapsable={false}>
+      <GestureDetector gesture={listGestures[index]}>
+        <Animated.FlatList
+          ref={listRef}
+          scrollEventThrottle={16}
+          showsVerticalScrollIndicator
+          directionalLockEnabled
+          keyboardShouldPersistTaps="handled"
+          {...props}
+          onScroll={composedScrollEvent}
+          onLayout={handleLayout}
+          onContentSizeChange={handleContentSizeChange}
+        />
+      </GestureDetector>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  view: { position: "relative" },
+});
+
+List.displayName = "CollapsibleTabs.List";
+
+export default memo(List) as <T>(props: ListProps<T>) => ReactElement;

package/src/Pager.tsx

@@ -0,0 +1,134 @@
+import { ReactNode, memo, useCallback, useMemo } from "react";
+
+import { StyleProp, StyleSheet, ViewStyle } from "react-native";
+
+import { GestureDetector } from "react-native-gesture-handler";
+import PagerView, {
+  PagerViewOnPageScrollEventData,
+  PagerViewOnPageSelectedEvent,
+  PagerViewProps,
+} from "react-native-pager-view";
+import Animated, {
+  useAnimatedStyle,
+  useEvent,
+  useHandler,
+} from "react-native-reanimated";
+
+import { useCollapsibleTabsContext } from "./Context";
+
+const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
+
+type OnPageScrollWorklet = (
+  event: PagerViewOnPageScrollEventData,
+  context: Record<string, unknown>,
+) => void;
+
+type PageScrollHandlers = {
+  onPageScroll?: OnPageScrollWorklet;
+};
+
+function usePageScrollHandler(
+  handlers: PageScrollHandlers,
+  dependencies?: unknown[],
+) {
+  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);
+  return useEvent<PagerViewOnPageScrollEventData>(
+    (event) => {
+      "worklet";
+      const { onPageScroll } = handlers;
+      if (onPageScroll && event.eventName.endsWith("onPageScroll"))
+        onPageScroll(event, context);
+    },
+    ["onPageScroll"],
+    doDependenciesDiffer,
+  );
+}
+
+export type PagerProps = {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  height?: number;
+  getHeight?: (
+    staticHeaderHeight: number,
+    stickyHeaderHeight: number,
+  ) => number;
+} & PagerViewProps;
+
+const Pager = ({
+  children,
+  style,
+  height,
+  getHeight,
+  ...pagerProps
+}: PagerProps) => {
+  const {
+    headerOffset,
+    listPanGesture,
+    activeTabIndex,
+    activeListOffset,
+    pageDecimal,
+    pagerRef,
+    staticHeightValue,
+    stickyHeightValue,
+  } = useCollapsibleTabsContext();
+
+  const listHeight =
+    height ?? getHeight?.(staticHeightValue, stickyHeightValue) ?? null;
+
+  const pageScrollHandlers = useMemo<PageScrollHandlers>(
+    () => ({
+      onPageScroll: (event) => {
+        "worklet";
+        pageDecimal.value = event.position + event.offset;
+      },
+    }),
+    [pageDecimal],
+  );
+  const onPageScroll = usePageScrollHandler(pageScrollHandlers);
+
+  const onPageSelected = useCallback(
+    (event: PagerViewOnPageSelectedEvent) => {
+      activeTabIndex.value = event.nativeEvent.position;
+      activeListOffset.value = 0;
+    },
+    [activeListOffset, activeTabIndex],
+  );
+
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      ...(listHeight != null ? { height: listHeight } : null),
+      transform: [{ translateY: headerOffset.value }],
+    }),
+    [listHeight],
+  );
+
+  return (
+    <GestureDetector gesture={listPanGesture}>
+      <Animated.View
+        style={[listHeight == null && styles.flex1, animatedStyle]}
+      >
+        <AnimatedPagerView
+          ref={pagerRef}
+          orientation="horizontal"
+          overScrollMode="never"
+          style={[styles.flex1, style]}
+          onPageScroll={
+            onPageScroll as unknown as PagerViewProps["onPageScroll"]
+          }
+          onPageSelected={onPageSelected}
+          {...pagerProps}
+        >
+          {children}
+        </AnimatedPagerView>
+      </Animated.View>
+    </GestureDetector>
+  );
+};
+
+Pager.displayName = "CollapsibleTabs.Pager";
+
+const styles = StyleSheet.create({
+  flex1: { flex: 1 },
+});
+
+export default memo(Pager);

package/src/Root.tsx

@@ -0,0 +1,194 @@
+import { ReactNode, forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+
+import { Platform } from 'react-native';
+
+import { Gesture } from 'react-native-gesture-handler';
+import PagerView from 'react-native-pager-view';
+import { clamp, useAnimatedReaction, useDerivedValue, useSharedValue, withDecay, withSpring } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+
+import { CollapsibleTabsContextProvider, CollapsibleTabsContextValue, ItemLayout, ListScroller } from './Context';
+
+export type CollapsibleTabsRootRef = {
+  scrollToViewTop: (animated?: boolean) => void;
+};
+
+export type RootProps = {
+  children?: ReactNode;
+  pageLength: number;
+  initialStaticHeight?: number;
+  initialStickyHeight?: number;
+  offsetAdjustment?: number;
+};
+
+const DECELERATION = Platform.OS === 'android' ? 0.985 : 0.998;
+const HEIGHT_EPSILON = 0.5;
+
+type RootInnerProps = Required<Pick<RootProps, 'initialStaticHeight' | 'initialStickyHeight' | 'offsetAdjustment'>> & Pick<RootProps, 'children' | 'pageLength'>;
+
+const RootInner = memo(
+  forwardRef<CollapsibleTabsRootRef, RootInnerProps>(({ initialStaticHeight, initialStickyHeight, pageLength, offsetAdjustment, children }, ref) => {
+    const headerOffset = useSharedValue(0);
+    const staticHeight = useSharedValue(initialStaticHeight);
+    const stickyHeight = useSharedValue(initialStickyHeight);
+    const offsetAdjustmentShared = useDerivedValue(() => offsetAdjustment, [offsetAdjustment]);
+
+    const activeTabIndex = useSharedValue(0);
+    const [activeTabIndexValue, setActiveTabIndexValue] = useState(0);
+    useAnimatedReaction(
+      () => activeTabIndex.value,
+      (next, prev) => {
+        if (next !== prev) scheduleOnRN(setActiveTabIndexValue, next);
+      },
+      []
+    );
+
+    const pageDecimal = useSharedValue(0);
+    const pagerRef = useRef<PagerView | null>(null);
+    const [itemLayout, setItemLayout] = useState<ItemLayout[]>([]);
+    const listScrollersRef = useRef<Map<number, ListScroller>>(new Map());
+
+    const registerButton = useCallback((config: ItemLayout) => {
+      setItemLayout((prev) => {
+        const next = prev.slice();
+        next[config.index] = config;
+        return next;
+      });
+    }, []);
+
+    const registerListScroller = useCallback((index: number, scroller: ListScroller | null) => {
+      if (scroller) listScrollersRef.current.set(index, scroller);
+      else listScrollersRef.current.delete(index);
+    }, []);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        scrollToViewTop: (animated = true) => {
+          const scroller = listScrollersRef.current.get(activeTabIndex.value);
+          scroller?.(animated);
+          headerOffset.value = withSpring(0, { duration: 250, dampingRatio: 1, mass: 4 });
+        },
+      }),
+      [activeTabIndex, headerOffset]
+    );
+
+    const [staticHeightValue, setStaticHeightValue] = useState(initialStaticHeight);
+    const [stickyHeightValue, setStickyHeightValue] = useState(initialStickyHeight);
+
+    const updateStaticHeight = useCallback(
+      (height: number) => {
+        staticHeight.value = height;
+        setStaticHeightValue((prev) => {
+          if (Math.abs(prev - height) < HEIGHT_EPSILON) return prev;
+          return height;
+        });
+      },
+      [staticHeight]
+    );
+
+    const updateStickyHeight = useCallback(
+      (height: number) => {
+        stickyHeight.value = height;
+        setStickyHeightValue((prev) => {
+          if (Math.abs(prev - height) < HEIGHT_EPSILON) return prev;
+          return height;
+        });
+      },
+      [stickyHeight]
+    );
+
+    const touchX = useSharedValue(0);
+    const touchY = useSharedValue(0);
+    const isVertical = useSharedValue(false);
+    const activeListOffset = useSharedValue(0);
+    const listGestures = useMemo(() => Array.from({ length: pageLength }, () => Gesture.Native().cancelsTouchesInView(true)), [pageLength]);
+
+    const listPanGesture = useMemo(() => {
+      return Gesture.Pan()
+        .manualActivation(true)
+        .maxPointers(1)
+        .minPointers(1)
+        .onTouchesDown((evt) => {
+          const touch = evt.allTouches[0];
+          touchX.value = touch.x;
+          touchY.value = touch.y;
+          isVertical.value = false;
+        })
+        .onTouchesMove((evt, state) => {
+          const touch = evt.allTouches[0];
+          const toTop = touch.y > touchY.value;
+          const isHorizontal = Math.abs(touch.x - touchX.value) > 5;
+          const vertical = Math.abs(touch.y - touchY.value) > 5;
+
+          if (vertical) isVertical.value = true;
+          if (isHorizontal && !isVertical.value) return state.fail();
+          if (!vertical) return;
+
+          const minOffset = -(staticHeight.value - offsetAdjustmentShared.value);
+          if (toTop && activeListOffset.value === 0) state.activate();
+          else if (!toTop && headerOffset.value > minOffset) state.activate();
+        })
+        .onChange((evt) => {
+          isVertical.value = true;
+          const minOffset = -(staticHeight.value - offsetAdjustmentShared.value);
+          headerOffset.value = clamp(headerOffset.value + evt.changeY, minOffset, 0);
+        })
+        .onEnd((evt) => {
+          const toTop = evt.translationY > 0;
+          const isHeaderPartialShown = headerOffset.value !== 0;
+          const minOffset = -(staticHeight.value - offsetAdjustmentShared.value);
+          const isFast = Math.abs(evt.velocityY) > 800;
+
+          if (isFast) {
+            if (toTop && isHeaderPartialShown) {
+              headerOffset.value = withSpring(0, { duration: 250, dampingRatio: 1, mass: 4, overshootClamping: false, velocity: evt.velocityY });
+            } else if (!toTop && isHeaderPartialShown) {
+              headerOffset.value = withSpring(minOffset, { duration: 250, dampingRatio: 1, mass: 4, overshootClamping: false, velocity: evt.velocityY });
+            }
+          } else {
+            headerOffset.value = withDecay({ velocity: evt.velocityY, rubberBandEffect: false, clamp: [minOffset, 0], deceleration: DECELERATION });
+          }
+        })
+        .simultaneousWithExternalGesture(...listGestures);
+    }, [activeListOffset, headerOffset, isVertical, listGestures, offsetAdjustmentShared, staticHeight, touchX, touchY]);
+
+    const ctxValue = useMemo(
+      (): CollapsibleTabsContextValue => ({
+        headerOffset,
+        staticHeight,
+        stickyHeight,
+        offsetAdjustment: offsetAdjustmentShared,
+        activeTabIndex,
+        activeTabIndexValue,
+        pageDecimal,
+        listPanGesture,
+        listGestures,
+        pagerRef,
+        itemLayout,
+        registerButton,
+        registerListScroller,
+        staticHeightValue,
+        stickyHeightValue,
+        activeListOffset,
+        updateStaticHeight,
+        updateStickyHeight,
+      }),
+      [activeListOffset, activeTabIndex, activeTabIndexValue, headerOffset, itemLayout, listGestures, listPanGesture, offsetAdjustmentShared, pageDecimal, registerButton, registerListScroller, staticHeight, staticHeightValue, stickyHeight, stickyHeightValue, updateStaticHeight, updateStickyHeight]
+    );
+
+    return <CollapsibleTabsContextProvider {...ctxValue}>{children}</CollapsibleTabsContextProvider>;
+  })
+);
+
+RootInner.displayName = 'CollapsibleTabs.RootInner';
+
+const Root = forwardRef<CollapsibleTabsRootRef, RootProps>((props, ref) => (
+  <RootInner ref={ref} initialStaticHeight={props.initialStaticHeight ?? 0} initialStickyHeight={props.initialStickyHeight ?? 0} pageLength={props.pageLength} offsetAdjustment={props.offsetAdjustment ?? 0}>
+    {props.children}
+  </RootInner>
+));
+
+Root.displayName = 'CollapsibleTabs.Root';
+
+export default memo(Root);

package/src/ScrollView.tsx

@@ -0,0 +1,116 @@
+import { ReactElement, memo, useCallback, useEffect, useMemo } from "react";
+
+import {
+  LayoutChangeEvent,
+  ScrollViewProps as RNScrollViewProps,
+  StyleSheet,
+  View,
+} from "react-native";
+
+import { GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  scrollTo,
+  useAnimatedReaction,
+  useAnimatedRef,
+  useAnimatedScrollHandler,
+  useComposedEventHandler,
+  useSharedValue,
+} from "react-native-reanimated";
+
+import { ListScroller, useCollapsibleTabsContext } from "./Context";
+import { useTabSelfContext } from "./Tab";
+import { useStableCallback } from "./useStableCallback";
+
+export type ScrollViewProps = RNScrollViewProps;
+
+const ScrollView = ({
+  onLayout,
+  onContentSizeChange,
+  ...props
+}: ScrollViewProps) => {
+  const {
+    listGestures,
+    activeTabIndex,
+    activeListOffset,
+    registerListScroller,
+  } = useCollapsibleTabsContext();
+  const { index } = useTabSelfContext();
+  const selfOffset = useSharedValue(0);
+  const scrollRef = useAnimatedRef<Animated.ScrollView>();
+
+  const onScroll = useAnimatedScrollHandler((event) => {
+    selfOffset.value = event.contentOffset.y;
+    if (activeTabIndex.value === index)
+      activeListOffset.value = event.contentOffset.y;
+  });
+
+  const composedScrollEvent = useComposedEventHandler(
+    props.onScroll ? [onScroll, props.onScroll] : [onScroll],
+  );
+
+  useAnimatedReaction(
+    () => activeTabIndex.value,
+    (value) => {
+      if (value === index) activeListOffset.value = selfOffset.value;
+    },
+    [index],
+  );
+
+  const scroller = useMemo(
+    (): ListScroller =>
+      (animated = true) => {
+        "worklet";
+        scrollTo(scrollRef, 0, 0, animated);
+      },
+    [scrollRef],
+  );
+
+  useEffect(() => {
+    registerListScroller(index, scroller);
+    return () => registerListScroller(index, null);
+  }, [index, registerListScroller, scroller]);
+
+  const stableLayout = useStableCallback(onLayout);
+  const stableContentSizeChange = useStableCallback(onContentSizeChange);
+
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      stableLayout?.(event);
+    },
+    [stableLayout],
+  );
+
+  const handleContentSizeChange = useCallback(
+    (width: number, height: number) => {
+      stableContentSizeChange?.(width, height);
+    },
+    [stableContentSizeChange],
+  );
+
+  return (
+    <View style={styles.view} collapsable={false}>
+      <GestureDetector gesture={listGestures[index]}>
+        <Animated.ScrollView
+          ref={scrollRef}
+          scrollEventThrottle={16}
+          showsVerticalScrollIndicator
+          directionalLockEnabled
+          keyboardShouldPersistTaps="handled"
+          {...props}
+          // onScroll={onScroll as RNScrollViewProps["onScroll"]}
+          onScroll={composedScrollEvent}
+          onLayout={handleLayout}
+          onContentSizeChange={handleContentSizeChange}
+        />
+      </GestureDetector>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  view: { position: "relative", flex: 1 },
+});
+
+ScrollView.displayName = "CollapsibleTabs.ScrollView";
+
+export default memo(ScrollView) as (props: ScrollViewProps) => ReactElement;

package/src/StaticHeader.tsx

@@ -0,0 +1,30 @@
+import { memo } from 'react';
+
+import { LayoutChangeEvent, ViewProps } from 'react-native';
+
+import Animated from 'react-native-reanimated';
+
+import { useCollapsibleTabsContext } from './Context';
+
+const StaticHeader = ({ children, onLayout, ...props }: ViewProps) => {
+  const { updateStaticHeight, staticHeightValue } = useCollapsibleTabsContext();
+
+  const handleLayout = (evt: LayoutChangeEvent) => {
+    const height = evt.nativeEvent.layout.height;
+    if (__DEV__ && (!staticHeightValue || Math.abs(staticHeightValue - height) > 10)) {
+      console.info(`Set initialStaticHeight=${height} to reduce first-render flicker.`);
+    }
+    updateStaticHeight(height);
+    onLayout?.(evt);
+  };
+
+  return (
+    <Animated.View {...props} onLayout={handleLayout}>
+      {children}
+    </Animated.View>
+  );
+};
+
+StaticHeader.displayName = 'CollapsibleTabs.StaticHeader';
+
+export default memo(StaticHeader);

package/src/StickyHeader.tsx

@@ -0,0 +1,30 @@
+import { memo } from 'react';
+
+import { LayoutChangeEvent, ViewProps } from 'react-native';
+
+import Animated from 'react-native-reanimated';
+
+import { useCollapsibleTabsContext } from './Context';
+
+const StickyHeader = ({ children, onLayout, ...props }: ViewProps) => {
+  const { updateStickyHeight, stickyHeightValue } = useCollapsibleTabsContext();
+
+  const handleLayout = (evt: LayoutChangeEvent) => {
+    const height = evt.nativeEvent.layout.height;
+    if (__DEV__ && (!stickyHeightValue || Math.abs(stickyHeightValue - height) > 10)) {
+      console.info(`Set initialStickyHeight=${height} to reduce first-render flicker.`);
+    }
+    updateStickyHeight(height);
+    onLayout?.(evt);
+  };
+
+  return (
+    <Animated.View {...props} onLayout={handleLayout}>
+      {children}
+    </Animated.View>
+  );
+};
+
+StickyHeader.displayName = 'CollapsibleTabs.StickyHeader';
+
+export default memo(StickyHeader);