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

package/src/Bar.tsx

@@ -0,0 +1,359 @@
+import { ReactNode, memo, useCallback, useMemo, useState } from "react";
+
+import {
+  LayoutChangeEvent,
+  ScrollViewProps,
+  StyleSheet,
+  Text,
+  View,
+  ViewProps,
+  ViewStyle,
+} from "react-native";
+
+import { Pressable, ScrollView } from "react-native-gesture-handler";
+import Animated, {
+  SharedValue,
+  interpolate,
+  scrollTo,
+  useAnimatedReaction,
+  useAnimatedRef,
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+
+import { useCollapsibleTabsContext } from "./Context";
+import { scheduleOnUI } from "react-native-worklets";
+
+const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
+
+export type BarProps = Omit<
+  ScrollViewProps,
+  "contentContainerStyle" | "style"
+> & {
+  fullWidth?: boolean;
+  scrollButtons?: boolean;
+  left?: ReactNode;
+  right?: ReactNode;
+  scrollContainerStyle?: ScrollViewProps["style"];
+  tabButtonsGap?: number;
+  children?: ReactNode;
+  containerProps?: ViewProps;
+  backgroundColor?: string;
+  scrollButtonBackgroundColor?: string;
+  scrollButtonIconColor?: string;
+  renderScrollButtonIcon?: (dir: "left" | "right") => ReactNode;
+};
+
+const Bar = ({
+  scrollEnabled = true,
+  fullWidth,
+  scrollButtons = true,
+  left,
+  right,
+  containerProps,
+  children,
+  scrollContainerStyle,
+  tabButtonsGap = 0,
+  backgroundColor = "#ffffff",
+  scrollButtonBackgroundColor = "rgba(255, 255, 255, 0.95)",
+  scrollButtonIconColor = "rgba(48, 48, 48, 0.7)",
+  renderScrollButtonIcon,
+  ...props
+}: BarProps) => {
+  const { pageDecimal, itemLayout } = useCollapsibleTabsContext();
+  const [barSize, setBarSize] = useState({
+    width: 0,
+    height: 0,
+    measured: false,
+  });
+
+  const contentWidth = useSharedValue(0);
+  const layoutWidth = useSharedValue(0);
+  const scrollRef = useAnimatedRef<Animated.ScrollView>();
+  const scrollX = useSharedValue(0);
+  const leftButtonOpacity = useSharedValue(0);
+  const rightButtonOpacity = useSharedValue(0);
+
+  useAnimatedReaction(
+    () => {
+      if (!scrollButtons || layoutWidth.value === 0 || contentWidth.value === 0)
+        return { showLeft: false, showRight: false };
+      const maxScroll = contentWidth.value - layoutWidth.value;
+      const isScrollable = maxScroll > 1;
+      return {
+        showLeft: isScrollable && scrollX.value > 10,
+        showRight: isScrollable && scrollX.value < maxScroll - 10,
+      };
+    },
+    (curr, prev) => {
+      if (curr.showLeft !== prev?.showLeft)
+        leftButtonOpacity.value = withTiming(curr.showLeft ? 1 : 0);
+      if (curr.showRight !== prev?.showRight)
+        rightButtonOpacity.value = withTiming(curr.showRight ? 1 : 0);
+    },
+    [scrollButtons],
+  );
+
+  const onScroll = useAnimatedScrollHandler((evt) => {
+    scrollX.value = evt.contentOffset.x;
+  });
+
+  const scrollByButton = useCallback(
+    (dir: "left" | "right") => {
+      "worklet";
+      const step = layoutWidth.value / 2;
+      const current = scrollX.value;
+      const target = dir === "left" ? current - step : current + step;
+      const maxScroll = contentWidth.value - layoutWidth.value;
+      scrollTo(
+        scrollRef,
+        Math.max(0, Math.min(target, maxScroll > 0 ? maxScroll : 0)),
+        0,
+        true,
+      );
+    },
+    [contentWidth, layoutWidth, scrollRef, scrollX],
+  );
+
+  const handlePress = useCallback(
+    (dir: "left" | "right") => {
+      scheduleOnUI(scrollByButton, dir);
+    },
+    [scrollByButton],
+  );
+
+  const interpolationTable = useDerivedValue(() => {
+    if (itemLayout.length <= 1) return null;
+    const inputRange = new Array<number>(itemLayout.length);
+    const outputRange = new Array<number>(itemLayout.length);
+    const halfBar = barSize.width / 2;
+    for (let index = 0; index < itemLayout.length; index += 1) {
+      inputRange[index] = index;
+      const item = itemLayout[index];
+      outputRange[index] = +(item.x + item.width / 2 - halfBar).toFixed(2);
+    }
+    return { inputRange, outputRange };
+  }, [barSize.width, itemLayout]);
+
+  const centerOffset = useDerivedValue(() => {
+    if (!interpolationTable.value) return 0;
+    return interpolate(
+      +pageDecimal.value.toFixed(3),
+      interpolationTable.value.inputRange,
+      interpolationTable.value.outputRange,
+      "identity",
+    );
+  }, [interpolationTable]);
+
+  useAnimatedReaction(
+    () => Math.round(centerOffset.value),
+    (value, prev) => {
+      if (value !== prev) scrollTo(scrollRef, value, 0, true);
+    },
+  );
+
+  const contentContainerStyle = useMemo(
+    (): ViewStyle => ({ flex: fullWidth ? 1 : 0, gap: tabButtonsGap }),
+    [fullWidth, tabButtonsGap],
+  );
+
+  const onContentSizeChange = useCallback(
+    (width: number) => {
+      contentWidth.value = width;
+    },
+    [contentWidth],
+  );
+
+  const onLayout = useCallback(
+    (evt: LayoutChangeEvent) => {
+      layoutWidth.value = evt.nativeEvent.layout.width;
+    },
+    [layoutWidth],
+  );
+
+  const containerOnLayout = containerProps?.onLayout;
+  const onContainerLayout = useCallback(
+    (evt: LayoutChangeEvent) => {
+      const { width, height } = evt.nativeEvent.layout;
+      setBarSize((prev) =>
+        prev.width === width && prev.height === height
+          ? prev
+          : { width, height, measured: true },
+      );
+      containerOnLayout?.(evt);
+    },
+    [containerOnLayout],
+  );
+
+  return (
+    <View
+      {...containerProps}
+      style={[styles.containerRow, { backgroundColor }, containerProps?.style]}
+      onLayout={onContainerLayout}
+      collapsable={false}
+    >
+      {left}
+      <View style={[styles.scrollContainer, scrollContainerStyle]}>
+        {!!scrollButtons && (
+          <ScrollButton
+            dir="left"
+            buttonProgress={leftButtonOpacity}
+            handlePress={handlePress}
+            backgroundColor={scrollButtonBackgroundColor}
+            iconColor={scrollButtonIconColor}
+            renderIcon={renderScrollButtonIcon}
+          />
+        )}
+        <AnimatedScrollView
+          ref={scrollRef}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          scrollEventThrottle={16}
+          keyboardShouldPersistTaps="handled"
+          scrollEnabled={scrollEnabled}
+          contentContainerStyle={contentContainerStyle}
+          directionalLockEnabled
+          onContentSizeChange={onContentSizeChange}
+          onLayout={onLayout}
+          onScroll={onScroll}
+          bounces={false}
+          collapsable={false}
+          {...props}
+        >
+          {children}
+        </AnimatedScrollView>
+        {!!scrollButtons && (
+          <ScrollButton
+            dir="right"
+            buttonProgress={rightButtonOpacity}
+            handlePress={handlePress}
+            backgroundColor={scrollButtonBackgroundColor}
+            iconColor={scrollButtonIconColor}
+            renderIcon={renderScrollButtonIcon}
+          />
+        )}
+      </View>
+      {right}
+    </View>
+  );
+};
+
+type ScrollButtonProps = {
+  dir: "left" | "right";
+  buttonProgress: SharedValue<number>;
+  handlePress: (dir: "left" | "right") => void;
+  backgroundColor: string;
+  iconColor: string;
+  renderIcon?: (dir: "left" | "right") => ReactNode;
+};
+
+const ScrollButton = memo(
+  ({
+    dir,
+    buttonProgress,
+    handlePress,
+    backgroundColor,
+    iconColor,
+    renderIcon,
+  }: ScrollButtonProps) => {
+    const isLeft = dir === "left";
+    const width = useSharedValue(0);
+
+    const animatedStyle = useAnimatedStyle(() => {
+      const opacity = buttonProgress.value;
+      return {
+        opacity,
+        transform: [
+          {
+            translateX: interpolate(
+              opacity,
+              [0, 1],
+              [isLeft ? -width.value : width.value, 0],
+            ),
+          },
+        ],
+        pointerEvents: opacity === 0 ? "none" : "auto",
+      };
+    }, [isLeft]);
+
+    const onLayoutButton = useCallback(
+      (evt: LayoutChangeEvent) => {
+        width.value = evt.nativeEvent.layout.width;
+      },
+      [width],
+    );
+
+    const onPress = useCallback(() => handlePress(dir), [dir, handlePress]);
+
+    return (
+      <Animated.View
+        style={[
+          isLeft
+            ? scrollButtonStyles.containerLeft
+            : scrollButtonStyles.containerRight,
+          { backgroundColor },
+          animatedStyle,
+        ]}
+        onLayout={onLayoutButton}
+      >
+        <Pressable style={scrollButtonStyles.button} onPress={onPress}>
+          {renderIcon ? (
+            renderIcon(dir)
+          ) : (
+            <Text style={[scrollButtonStyles.icon, { color: iconColor }]}>
+              {isLeft ? "<" : ">"}
+            </Text>
+          )}
+        </Pressable>
+      </Animated.View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  containerRow: {
+    position: "relative",
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  scrollContainer: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    paddingHorizontal: 20,
+  },
+});
+
+const scrollButtonStyles = StyleSheet.create({
+  containerLeft: {
+    position: "absolute",
+    left: 0,
+    zIndex: 2,
+    height: "100%",
+  },
+  containerRight: {
+    position: "absolute",
+    right: 0,
+    zIndex: 2,
+    height: "100%",
+  },
+  button: {
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    height: "100%",
+    justifyContent: "center",
+  },
+  icon: {
+    fontSize: 16,
+    fontWeight: "700",
+  },
+});
+
+Bar.displayName = "CollapsibleTabs.Bar";
+
+export default memo(Bar);

package/src/Button.tsx

@@ -0,0 +1,219 @@
+import { ReactNode, memo, useCallback, useMemo, useRef } from "react";
+
+import {
+  LayoutChangeEvent,
+  StyleProp,
+  StyleSheet,
+  TextProps,
+  TextStyle,
+  View,
+  ViewStyle,
+} from "react-native";
+
+import { Pressable, PressableProps } from "react-native-gesture-handler";
+import Animated, {
+  AnimatedStyle,
+  SharedValue,
+  interpolateColor,
+  useAnimatedStyle,
+  withTiming,
+} from "react-native-reanimated";
+
+import { useCollapsibleTabsContext } from "./Context";
+
+type PressableEvent = Parameters<NonNullable<PressableProps["onPress"]>>[0];
+
+export type RenderTabLabelProps = {
+  index: number;
+  name: string;
+  isActive: boolean;
+  style: StyleProp<TextStyle>;
+  animatedStyle: AnimatedStyle<StyleProp<TextStyle>>;
+  pageDecimal: SharedValue<number>;
+};
+
+export type ButtonProps = {
+  index: number;
+  name: string;
+  style?: StyleProp<ViewStyle>;
+  fullWidth?: boolean;
+  activeStyle?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  activeLabelStyle?: StyleProp<TextStyle>;
+  labelProps?: Omit<TextProps, "style">;
+  contentWrapperStyle?: StyleProp<ViewStyle>;
+  activeLabelColor?: string;
+  inactiveLabelColor?: string;
+  children?: string | ((props: RenderTabLabelProps) => ReactNode);
+} & Omit<PressableProps, "style" | "children">;
+
+const Button = ({
+  index,
+  name,
+  onPress,
+  style,
+  fullWidth,
+  labelStyle,
+  labelProps,
+  activeLabelStyle,
+  activeStyle,
+  children,
+  contentWrapperStyle,
+  activeLabelColor = "#111827",
+  inactiveLabelColor = "#9ca3af",
+  ...props
+}: ButtonProps) => {
+  const {
+    activeTabIndex,
+    activeTabIndexValue,
+    pageDecimal,
+    pagerRef,
+    registerButton,
+    itemLayout,
+  } = useCollapsibleTabsContext();
+  const isActive = activeTabIndexValue === index;
+
+  const combinedStaticLabelStyle = useMemo(
+    (): StyleProp<TextStyle> => [
+      styles.label,
+      labelStyle,
+      activeLabelStyle && isActive && activeLabelStyle,
+    ],
+    [activeLabelStyle, isActive, labelStyle],
+  );
+
+  const animatedLabelStyle = useAnimatedStyle(() => {
+    const color = interpolateColor(
+      pageDecimal.value,
+      [index - 1, index, index + 1],
+      [inactiveLabelColor, activeLabelColor, inactiveLabelColor],
+    );
+    return { color };
+  }, [activeLabelColor, inactiveLabelColor, index, pageDecimal]);
+
+  const handleOnPress = useCallback(
+    (event: PressableEvent) => {
+      onPress?.(event);
+      if (pagerRef.current) {
+        pagerRef.current.setPage(index);
+        return;
+      }
+      activeTabIndex.value = index;
+      pageDecimal.value = withTiming(index);
+    },
+    [activeTabIndex, index, onPress, pageDecimal, pagerRef],
+  );
+
+  const pressableLayoutRef = useRef<{ x: number; y: number } | null>(null);
+  const contentLayoutRef = useRef<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } | null>(null);
+
+  const commitLayout = useCallback(() => {
+    const pressable = pressableLayoutRef.current;
+    const content = contentLayoutRef.current;
+    if (!pressable || !content) return;
+    registerButton({
+      width: content.width,
+      height: content.height,
+      x: pressable.x + content.x,
+      y: pressable.y + content.y,
+      name,
+      index,
+    });
+  }, [index, name, registerButton]);
+
+  const onLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      props.onLayout?.(event);
+      const { x, y } = event.nativeEvent.layout;
+      pressableLayoutRef.current = { x, y };
+      commitLayout();
+    },
+    [commitLayout, props],
+  );
+
+  const onContentLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { x, y, width, height } = event.nativeEvent.layout;
+      contentLayoutRef.current = { x, y, width, height };
+      commitLayout();
+    },
+    [commitLayout],
+  );
+
+  const isLast = itemLayout.length - 1 === index;
+  const isFirst = index === 0;
+  const mergedStyle = useMemo(
+    (): StyleProp<ViewStyle> => [
+      styles.pressable,
+      isFirst && { paddingLeft: 0 },
+      isLast && { paddingRight: 0 },
+      fullWidth && styles.fullWidth,
+      style,
+      isActive && activeStyle,
+    ],
+    [activeStyle, fullWidth, isActive, isFirst, isLast, style],
+  );
+
+  return (
+    <Pressable
+      onPress={handleOnPress}
+      {...props}
+      onLayout={onLayout}
+      style={mergedStyle}
+    >
+      <View
+        onLayout={onContentLayout}
+        style={[styles.contentWrapper, contentWrapperStyle]}
+      >
+        {typeof children === "function" ? (
+          children({
+            isActive,
+            index,
+            name,
+            style: combinedStaticLabelStyle,
+            animatedStyle: animatedLabelStyle,
+            pageDecimal,
+          })
+        ) : (
+          <Animated.Text
+            style={[combinedStaticLabelStyle, animatedLabelStyle]}
+            numberOfLines={1}
+            {...labelProps}
+          >
+            {children}
+          </Animated.Text>
+        )}
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  pressable: {
+    paddingVertical: 16,
+    paddingHorizontal: 10,
+  },
+  fullWidth: {
+    flex: 1,
+  },
+  contentWrapper: {
+    position: "relative",
+    alignSelf: "center",
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 18,
+    fontWeight: "700",
+    fontVariant: ["tabular-nums"],
+    textAlign: "center",
+  },
+});
+
+Button.displayName = "CollapsibleTabs.Button";
+
+export default memo(Button);

package/src/Context.tsx

@@ -0,0 +1,44 @@
+import { ReactNode, RefObject, createContext, memo, useContext } from 'react';
+
+import PagerView from 'react-native-pager-view';
+import { SharedValue } from 'react-native-reanimated';
+
+export type ItemLayout = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  index: number;
+  name: string;
+};
+
+export type ListScroller = (animated?: boolean) => void;
+
+export type CollapsibleTabsContextValue = {
+  headerOffset: SharedValue<number>;
+  staticHeight: SharedValue<number>;
+  stickyHeight: SharedValue<number>;
+  offsetAdjustment: SharedValue<number>;
+  activeTabIndex: SharedValue<number>;
+  activeTabIndexValue: number;
+  activeListOffset: SharedValue<number>;
+  pageDecimal: SharedValue<number>;
+  listPanGesture: any;
+  listGestures: any[];
+  pagerRef: RefObject<PagerView | null>;
+  itemLayout: ItemLayout[];
+  registerButton: (config: ItemLayout) => void;
+  registerListScroller: (index: number, scroller: ListScroller | null) => void;
+  staticHeightValue: number;
+  stickyHeightValue: number;
+  updateStaticHeight: (height: number) => void;
+  updateStickyHeight: (height: number) => void;
+};
+
+const CollapsibleTabsContext = createContext({} as CollapsibleTabsContextValue);
+
+export const useCollapsibleTabsContext = () => useContext(CollapsibleTabsContext);
+
+export const CollapsibleTabsContextProvider = memo(({ children, ...props }: CollapsibleTabsContextValue & { children: ReactNode }) => {
+  return <CollapsibleTabsContext.Provider value={props}>{children}</CollapsibleTabsContext.Provider>;
+});