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

package/src/FlashList.tsx

@@ -0,0 +1,150 @@
+import { ReactElement, memo, useCallback, useEffect, useMemo } from "react";
+
+import {
+  FlashList as ShopifyFlashList,
+  FlashListProps as ShopifyFlashListProps,
+  FlashListRef as ShopifyFlashListRef,
+} from "@shopify/flash-list";
+import {
+  LayoutChangeEvent,
+  ScrollViewProps,
+  StyleSheet,
+  View,
+} from "react-native";
+
+import {
+  GestureDetector,
+  ScrollView as RNGHScrollView,
+} from "react-native-gesture-handler";
+import Animated, {
+  AnimatedProps,
+  scrollTo,
+  useAnimatedReaction,
+  useAnimatedRef,
+  useAnimatedScrollHandler,
+  useComposedEventHandler,
+  useSharedValue,
+} from "react-native-reanimated";
+
+import { ListScroller, useCollapsibleTabsContext } from "./Context";
+import { useTabSelfContext } from "./Tab";
+import { useStableCallback } from "./useStableCallback";
+
+const AnimatedFlashList = Animated.createAnimatedComponent(
+  ShopifyFlashList,
+) as <T>(
+  props: AnimatedProps<
+    ShopifyFlashListProps<T> & {
+      ref?: React.Ref<ShopifyFlashListRef<T>> | undefined;
+    }
+  >,
+) => ReactElement;
+
+export type CollapsibleFlashListProps<T> = Omit<
+  ShopifyFlashListProps<T>,
+  "renderScrollComponent"
+>;
+
+const CollapsibleFlashList = <T,>({
+  onLayout,
+  onContentSizeChange,
+
+  ...props
+}: CollapsibleFlashListProps<T>) => {
+  const {
+    listGestures,
+    activeTabIndex,
+    activeListOffset,
+    registerListScroller,
+  } = useCollapsibleTabsContext();
+  const { index } = useTabSelfContext();
+  const selfOffset = useSharedValue(0);
+  const listRef = useAnimatedRef<any>();
+
+  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],
+  );
+
+  const myListGesture = listGestures[index];
+
+  const renderScrollComponent = useCallback(
+    (scrollProps: ScrollViewProps) => (
+      <GestureDetector gesture={myListGesture}>
+        <Animated.ScrollView {...scrollProps} />
+      </GestureDetector>
+    ),
+    [myListGesture],
+  );
+
+  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}>
+      <AnimatedFlashList<T>
+        ref={listRef}
+        scrollEventThrottle={16}
+        showsVerticalScrollIndicator
+        directionalLockEnabled
+        keyboardShouldPersistTaps="handled"
+        {...props}
+        renderScrollComponent={renderScrollComponent}
+        onScroll={composedScrollEvent}
+        onLayout={handleLayout}
+        onContentSizeChange={handleContentSizeChange}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  view: { position: "relative", flex: 1 },
+});
+
+CollapsibleFlashList.displayName = "CollapsibleTabs.CollapsibleFlashList";
+
+export default memo(CollapsibleFlashList) as <T>(
+  props: CollapsibleFlashListProps<T>,
+) => ReactElement;

package/src/Header.tsx

@@ -0,0 +1,45 @@
+import { memo, useMemo } from 'react';
+
+import { Platform, ViewProps } from 'react-native';
+
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { clamp, useAnimatedStyle, withDecay } from 'react-native-reanimated';
+
+import { useCollapsibleTabsContext } from './Context';
+
+const DECELERATION = Platform.OS === 'android' ? 0.985 : 0.998;
+
+const Header = ({ children, style, ...props }: ViewProps) => {
+  const { headerOffset, staticHeight, offsetAdjustment } = useCollapsibleTabsContext();
+
+  const panGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .activeOffsetY([-5, 5])
+        .failOffsetX([-5, 5])
+        .maxPointers(1)
+        .onChange((evt) => {
+          const minOffset = -(staticHeight.value - offsetAdjustment.value);
+          headerOffset.value = clamp(headerOffset.value + evt.changeY, minOffset, 0);
+        })
+        .onEnd((evt) => {
+          const minOffset = -(staticHeight.value - offsetAdjustment.value);
+          headerOffset.value = withDecay({ velocity: evt.velocityY, rubberBandEffect: false, clamp: [minOffset, 0], deceleration: DECELERATION });
+        }),
+    [headerOffset, offsetAdjustment, staticHeight]
+  );
+
+  const animatedStyle = useAnimatedStyle(() => ({ transform: [{ translateY: headerOffset.value }] }), []);
+
+  return (
+    <GestureDetector gesture={panGesture}>
+      <Animated.View {...props} style={[style, animatedStyle]} collapsable={false}>
+        {children}
+      </Animated.View>
+    </GestureDetector>
+  );
+};
+
+Header.displayName = 'CollapsibleTabs.Header';
+
+export default memo(Header);

package/src/Indicator.tsx

@@ -0,0 +1,193 @@
+import { memo } from "react";
+
+import {
+  PixelRatio,
+  StyleProp,
+  StyleSheet,
+  ViewProps,
+  ViewStyle,
+} from "react-native";
+
+import Animated, {
+  AnimatedStyle,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+} from "react-native-reanimated";
+
+import { useCollapsibleTabsContext } from "./Context";
+
+type CommonIndicatorProps = {
+  style?: AnimatedStyle<StyleProp<ViewStyle>>;
+  color?: string;
+  borderRadius?: number;
+} & ViewProps;
+
+export const MaterialIndicator = memo(
+  ({
+    style,
+    color = "#111827",
+    borderRadius = 999,
+    ...props
+  }: CommonIndicatorProps) => {
+    const { itemLayout, pageDecimal } = useCollapsibleTabsContext();
+
+    const data = useDerivedValue(() => {
+      if (!itemLayout || itemLayout.length === 0)
+        return { input: [], width: [], translateX: [] };
+      const input = new Array<number>(itemLayout.length);
+      const translateX = new Array<number>(itemLayout.length);
+      const width = new Array<number>(itemLayout.length);
+      for (let index = 0; index < itemLayout.length; index += 1) {
+        const item = itemLayout[index];
+        input[index] = index;
+        translateX[index] = item.x;
+        width[index] = item.width;
+      }
+      return {
+        input,
+        translateX,
+        width,
+      };
+    }, [itemLayout]);
+
+    const animatedStyles = useAnimatedStyle(() => {
+      if (
+        data.value.input.length === 0 ||
+        data.value.width.length === 0 ||
+        data.value.translateX.length === 0
+      )
+        return { opacity: 0, width: 0 };
+      if (data.value.input.length === 1)
+        return {
+          opacity: 1,
+          width: data.value.width[0],
+          transform: [{ translateX: data.value.translateX[0] }],
+        };
+      return {
+        opacity: 1,
+        width: interpolate(
+          pageDecimal.value,
+          data.value.input,
+          data.value.width,
+          "clamp",
+        ),
+        transform: [
+          {
+            translateX: interpolate(
+              pageDecimal.value,
+              data.value.input,
+              data.value.translateX,
+              "clamp",
+            ),
+          },
+        ],
+      };
+    }, []);
+
+    return (
+      <Animated.View
+        style={[
+          styles.indicator,
+          { backgroundColor: color, borderRadius },
+          style,
+          animatedStyles,
+        ]}
+        {...props}
+      />
+    );
+  },
+);
+
+export const SegmentIndicator = memo(
+  ({
+    style,
+    color = "#ffffff",
+    borderRadius = 999,
+    ...props
+  }: CommonIndicatorProps) => {
+    const { itemLayout, pageDecimal } = useCollapsibleTabsContext();
+
+    const data = useDerivedValue(() => {
+      if (!itemLayout || itemLayout.length === 0)
+        return { input: [], width: [], translateX: [], height: [] };
+      const input = new Array<number>(itemLayout.length);
+      const translateX = new Array<number>(itemLayout.length);
+      const width = new Array<number>(itemLayout.length);
+      const height = new Array<number>(itemLayout.length);
+      for (let index = 0; index < itemLayout.length; index += 1) {
+        const item = itemLayout[index];
+        input[index] = index;
+        translateX[index] = item.x;
+        width[index] = item.width;
+        height[index] = item.height;
+      }
+      return {
+        input,
+        translateX,
+        width,
+        height,
+      };
+    }, [itemLayout]);
+
+    const animatedStyles = useAnimatedStyle(() => {
+      const input = data.value.input;
+      const width = data.value.width;
+      const translateX = data.value.translateX;
+      const height = data.value.height;
+      if (input.length === 0 || width.length === 0 || translateX.length === 0)
+        return { opacity: 0, width: 0 };
+      if (input.length === 1)
+        return {
+          opacity: 1,
+          width: width[0],
+          transform: [{ translateX: translateX[0] }],
+          height: height[0],
+        };
+      return {
+        opacity: 1,
+        width: interpolate(pageDecimal.value, input, width, "clamp"),
+        transform: [
+          {
+            translateX: interpolate(
+              pageDecimal.value,
+              input,
+              translateX,
+              "clamp",
+            ),
+          },
+        ],
+        height: height[0],
+      };
+    }, []);
+
+    return (
+      <Animated.View
+        style={[
+          styles.segment,
+          { backgroundColor: color, borderRadius },
+          style,
+          animatedStyles,
+        ]}
+        {...props}
+      />
+    );
+  },
+);
+
+MaterialIndicator.displayName = "CollapsibleTabs.MaterialIndicator";
+SegmentIndicator.displayName = "CollapsibleTabs.SegmentIndicator";
+
+const styles = StyleSheet.create({
+  indicator: {
+    height: PixelRatio.roundToNearestPixel(3),
+    position: "absolute",
+    left: 0,
+    bottom: 0,
+  },
+  segment: {
+    position: "absolute",
+    left: 0,
+    zIndex: 0,
+  },
+});

package/src/Lazy.tsx

@@ -0,0 +1,110 @@
+import { ComponentProps, ReactNode, useEffect, useRef, useState } from 'react';
+
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
+
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+
+import { useStableCallback } from './useStableCallback';
+
+type AnimatedViewProps = ComponentProps<typeof Animated.View>;
+type LazyViewProps = Omit<AnimatedViewProps, 'children' | 'entering' | 'exiting' | 'style'>;
+
+export type LazyPlaceholderInfo = {
+  focused: boolean;
+  canMount: boolean;
+};
+
+export type LazyProps = {
+  focused: boolean;
+  children?: ReactNode;
+  placeholder?: ReactNode;
+  renderPlaceholder?: (info: LazyPlaceholderInfo) => ReactNode;
+  placeholderStyle?: StyleProp<ViewStyle>;
+  placeholderProps?: LazyViewProps & { style?: StyleProp<ViewStyle> };
+  style?: StyleProp<ViewStyle>;
+  containerProps?: LazyViewProps & { style?: StyleProp<ViewStyle> };
+  disableEntering?: boolean;
+  disableExiting?: boolean;
+  entering?: AnimatedViewProps['entering'] | null;
+  exiting?: AnimatedViewProps['exiting'] | null;
+  enteringDuration?: number;
+  enteringDelay?: number;
+  exitingDuration?: number;
+  duration?: number;
+  delay?: number;
+  onMount?: () => void;
+};
+
+export function Lazy({
+  placeholder,
+  renderPlaceholder,
+  placeholderStyle,
+  placeholderProps,
+  containerProps,
+  disableEntering = false,
+  disableExiting = false,
+  entering,
+  exiting,
+  enteringDuration,
+  enteringDelay,
+  exitingDuration = 300,
+  focused,
+  duration = 200,
+  delay = 50,
+  onMount,
+  children,
+  style,
+}: LazyProps) {
+  const [canMount, setCanMount] = useState(false);
+  const mountNotifiedRef = useRef(false);
+  const stableOnMount = useStableCallback(onMount);
+
+  useEffect(() => {
+    if (focused) {
+      setCanMount(true);
+      if (!mountNotifiedRef.current) {
+        mountNotifiedRef.current = true;
+        stableOnMount();
+      }
+    }
+  }, [focused, stableOnMount]);
+
+  const placeholderPointerEvents = placeholderProps?.pointerEvents ?? 'box-none';
+  const { style: placeholderContainerStyle, pointerEvents: _placeholderPointerEvents, ...restPlaceholderProps } = placeholderProps ?? {};
+  const { style: containerStyle, ...restContainerProps } = containerProps ?? {};
+
+  const enteringAnimation =
+    disableEntering || entering === null ? undefined : entering ?? FadeIn.duration(enteringDuration ?? duration).delay(enteringDelay ?? delay);
+  const exitingAnimation = disableExiting || exiting === null ? undefined : exiting ?? FadeOut.duration(exitingDuration);
+
+  if (!canMount) {
+    return (
+      <Animated.View
+        {...restPlaceholderProps}
+        exiting={exitingAnimation}
+        style={[styles.placeholder, placeholderStyle, placeholderContainerStyle]}
+        pointerEvents={placeholderPointerEvents}
+      >
+        {renderPlaceholder ? renderPlaceholder({ focused, canMount }) : placeholder}
+      </Animated.View>
+    );
+  }
+
+  return (
+    <Animated.View {...restContainerProps} entering={enteringAnimation} style={[styles.container, style, containerStyle]}>
+      {children}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    flex: 1,
+    height: '100%',
+  },
+  placeholder: {
+    paddingVertical: 12,
+    width: '100%',
+  },
+});

package/src/LegendList.tsx

@@ -0,0 +1,130 @@
+import { ReactElement, memo, useCallback, useEffect, useMemo } from "react";
+
+import {
+  LegendList,
+  LegendListProps as LegendListLibProps,
+  LegendListRef,
+} from "@legendapp/list/react-native";
+import { LayoutChangeEvent, StyleSheet, View } from "react-native";
+
+import {
+  GestureDetector,
+  ScrollView as RNGHScrollView,
+} from "react-native-gesture-handler";
+import Animated, {
+  AnimatedProps,
+  useAnimatedReaction,
+  useAnimatedRef,
+  useAnimatedScrollHandler,
+  useComposedEventHandler,
+  useSharedValue,
+} from "react-native-reanimated";
+
+import { ListScroller, useCollapsibleTabsContext } from "./Context";
+import { useTabSelfContext } from "./Tab";
+import { useStableCallback } from "./useStableCallback";
+
+const AnimatedLegendList = Animated.createAnimatedComponent(LegendList) as <T>(
+  props: AnimatedProps<
+    LegendListLibProps<T> & {
+      ref?: React.Ref<LegendListRef> | undefined;
+    }
+  >,
+) => ReactElement;
+
+export type CollapsibleLegendListProps<T> = LegendListLibProps<T>;
+
+const CollapsibleLegendList = <T,>({
+  onLayout,
+  onContentSizeChange,
+  ...props
+}: CollapsibleLegendListProps<T>) => {
+  const {
+    listGestures,
+    activeTabIndex,
+    activeListOffset,
+    registerListScroller,
+  } = useCollapsibleTabsContext();
+  const { index } = useTabSelfContext();
+  const selfOffset = useSharedValue(0);
+  const listRef = useAnimatedRef<any>();
+
+  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) => {
+        (listRef.current as unknown as LegendListRef)?.scrollToOffset({
+          offset: 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]}>
+        <AnimatedLegendList<T>
+          ref={listRef}
+          scrollEventThrottle={16}
+          showsVerticalScrollIndicator
+          directionalLockEnabled
+          keyboardShouldPersistTaps="handled"
+          {...props}
+          onScroll={composedScrollEvent}
+          onLayout={handleLayout}
+          onContentSizeChange={handleContentSizeChange}
+        />
+      </GestureDetector>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  view: { position: "relative" },
+});
+
+CollapsibleLegendList.displayName = "CollapsibleTabs.CollapsibleLegendList";
+
+export default memo(CollapsibleLegendList) as <T>(
+  props: CollapsibleLegendListProps<T>,
+) => ReactElement;