react-native-reanimated-carousel 5.0.0-beta.8 → 5.1.0

package/src/components/Pagination/PaginationItem.tsx

@@ -0,0 +1,166 @@
+import React from "react";
+import type { ColorValue, ViewStyle } from "react-native";
+import { Pressable, View } from "react-native";
+import Animated, {
+  Extrapolation,
+  interpolate,
+  interpolateColor,
+  useAnimatedReaction,
+  useAnimatedStyle,
+} from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+
+import type { PaginationDotStyle, PaginationProps } from "../../public-types";
+import { getNearestLoopPosition, getSettledRawIndex } from "../../utils/carousel-math";
+
+const DEFAULT_DOT_SIZE = 10;
+const DEFAULT_DOT_COLOR = "#D1D5DB";
+const DEFAULT_ACTIVE_DOT_COLOR = "#111827";
+
+export function getPaginationDotDistance(progress: number, index: number, count: number): number {
+  "worklet";
+
+  if (!Number.isFinite(progress) || count <= 0) return 0;
+  return Math.abs(getNearestLoopPosition(index, progress, count) - progress);
+}
+
+export function getPaginationSelectedIndex(progress: number, count: number): number {
+  "worklet";
+
+  return getSettledRawIndex(progress, count);
+}
+
+function interpolateDotColor(
+  distance: number,
+  active: ColorValue,
+  inactive: ColorValue
+): ColorValue {
+  "worklet";
+
+  if (typeof active !== "string" || typeof inactive !== "string") {
+    return distance < 0.5 ? active : inactive;
+  }
+
+  return interpolateColor(distance, [0, 1], [active, inactive]) as ColorValue;
+}
+
+export function PaginationItem(props: {
+  activeDotStyle?: PaginationDotStyle | undefined;
+  count: number;
+  dotStyle?: PaginationDotStyle | undefined;
+  index: number;
+  label?: string | undefined;
+  onPress?: ((index: number) => void) | undefined;
+  progress: PaginationProps["progress"];
+}) {
+  const { activeDotStyle, count, dotStyle, index, label, onPress, progress } = props;
+
+  const baseWidth = dotStyle?.width ?? DEFAULT_DOT_SIZE;
+  const baseHeight = dotStyle?.height ?? DEFAULT_DOT_SIZE;
+  const baseBorderRadius = dotStyle?.borderRadius ?? Math.min(baseWidth, baseHeight) / 2;
+  const baseBorderWidth = dotStyle?.borderWidth ?? 0;
+  const baseBorderColor = dotStyle?.borderColor ?? "transparent";
+  const baseBackgroundColor = dotStyle?.backgroundColor ?? DEFAULT_DOT_COLOR;
+  const baseOpacity = dotStyle?.opacity ?? 1;
+
+  const activeWidth = activeDotStyle?.width ?? baseWidth;
+  const activeHeight = activeDotStyle?.height ?? baseHeight;
+  const activeBorderRadius = activeDotStyle?.borderRadius ?? baseBorderRadius;
+  const activeBorderWidth = activeDotStyle?.borderWidth ?? baseBorderWidth;
+  const activeBorderColor = activeDotStyle?.borderColor ?? baseBorderColor;
+  const activeBackgroundColor = activeDotStyle?.backgroundColor ?? DEFAULT_ACTIVE_DOT_COLOR;
+  const activeOpacity = activeDotStyle?.opacity ?? baseOpacity;
+
+  // Lazy initializer: React only invokes it on the first render, which is
+  // exempt from Reanimated's "reading `value` during render" strict check.
+  // A plain expression would re-read `progress.value` on every re-render
+  // and trigger the warning (issue #940).
+  const [selected, setSelected] = React.useState(
+    () => count === 1 || getPaginationSelectedIndex(progress.value, count) === index
+  );
+
+  useAnimatedReaction(
+    () => count === 1 || getPaginationSelectedIndex(progress.value, count) === index,
+    (nextSelected, previousSelected) => {
+      if (nextSelected !== previousSelected) {
+        scheduleOnRN(setSelected, nextSelected);
+      }
+    },
+    [count, index, progress]
+  );
+
+  const animatedStyle = useAnimatedStyle<ViewStyle>(() => {
+    const distance = Math.min(1, getPaginationDotDistance(progress.value, index, count));
+
+    return {
+      width: interpolate(distance, [0, 1], [activeWidth, baseWidth], Extrapolation.CLAMP),
+      height: interpolate(distance, [0, 1], [activeHeight, baseHeight], Extrapolation.CLAMP),
+      borderRadius: interpolate(
+        distance,
+        [0, 1],
+        [activeBorderRadius, baseBorderRadius],
+        Extrapolation.CLAMP
+      ),
+      borderWidth: interpolate(
+        distance,
+        [0, 1],
+        [activeBorderWidth, baseBorderWidth],
+        Extrapolation.CLAMP
+      ),
+      borderColor: interpolateDotColor(distance, activeBorderColor, baseBorderColor),
+      backgroundColor: interpolateDotColor(distance, activeBackgroundColor, baseBackgroundColor),
+      opacity: interpolate(distance, [0, 1], [activeOpacity, baseOpacity], Extrapolation.CLAMP),
+    };
+  }, [
+    activeBackgroundColor,
+    activeBorderColor,
+    activeBorderRadius,
+    activeBorderWidth,
+    activeHeight,
+    activeOpacity,
+    activeWidth,
+    baseBackgroundColor,
+    baseBorderColor,
+    baseBorderRadius,
+    baseBorderWidth,
+    baseHeight,
+    baseOpacity,
+    baseWidth,
+    count,
+    index,
+    progress,
+  ]);
+
+  const reservedStyle: ViewStyle = {
+    alignItems: "center",
+    height: Math.max(baseHeight, activeHeight),
+    justifyContent: "center",
+    width: Math.max(baseWidth, activeWidth),
+  };
+  const dot = <Animated.View style={animatedStyle} />;
+
+  if (onPress) {
+    return (
+      <Pressable
+        accessibilityLabel={label ?? `Slide ${index + 1} of ${count}`}
+        accessibilityRole="button"
+        accessibilityState={{ selected }}
+        onPress={() => onPress(index)}
+        style={reservedStyle}
+      >
+        {dot}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View
+      accessibilityElementsHidden
+      accessible={false}
+      importantForAccessibility="no-hide-descendants"
+      style={reservedStyle}
+    >
+      {dot}
+    </View>
+  );
+}

package/src/components/Pagination/index.tsx

@@ -1,7 +1,106 @@
-import { Basic } from "./Basic";
-import { Custom } from "./Custom";
+import React from "react";
+import { I18nManager, StyleSheet, View, type ViewStyle } from "react-native";
 
-export const Pagination = {
-  Basic,
-  Custom,
-};
+import type { PaginationProps } from "../../public-types";
+import { PaginationItem } from "./PaginationItem";
+
+const numericStyleFields = ["width", "height", "borderRadius", "borderWidth", "opacity"] as const;
+
+function validateDotStyle(name: "activeDotStyle" | "dotStyle", style: PaginationProps["dotStyle"]) {
+  if (!style) return;
+
+  for (const field of numericStyleFields) {
+    const value = style[field];
+    if (value === undefined) continue;
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+      throw new Error(
+        `[react-native-reanimated-carousel] Pagination ${name}.${field} must be a finite number.`
+      );
+    }
+  }
+
+  if ((style.width ?? 1) <= 0 || (style.height ?? 1) <= 0) {
+    throw new Error(
+      `[react-native-reanimated-carousel] Pagination ${name} width and height must be positive.`
+    );
+  }
+  if ((style.borderRadius ?? 0) < 0 || (style.borderWidth ?? 0) < 0) {
+    throw new Error(
+      `[react-native-reanimated-carousel] Pagination ${name} borderRadius and borderWidth must be non-negative.`
+    );
+  }
+  if (style.opacity !== undefined && (style.opacity < 0 || style.opacity > 1)) {
+    throw new Error(
+      `[react-native-reanimated-carousel] Pagination ${name}.opacity must be between 0 and 1.`
+    );
+  }
+}
+
+export function Pagination(props: PaginationProps) {
+  const {
+    activeDotStyle,
+    containerStyle,
+    count,
+    dotStyle,
+    orientation = "horizontal",
+    progress,
+  } = props;
+
+  if (!Number.isInteger(count) || count < 0) {
+    throw new Error(
+      "[react-native-reanimated-carousel] Pagination count must be a non-negative integer."
+    );
+  }
+  validateDotStyle("dotStyle", dotStyle);
+  validateDotStyle("activeDotStyle", activeDotStyle);
+
+  const warnedProtectedStyle = React.useRef(false);
+  const flattenedContainerStyle = (StyleSheet.flatten(containerStyle) ?? {}) as ViewStyle;
+  const {
+    direction: protectedDirection,
+    flexDirection: protectedFlexDirection,
+    ...safeContainerStyle
+  } = flattenedContainerStyle;
+
+  if (
+    __DEV__ &&
+    !warnedProtectedStyle.current &&
+    (protectedDirection !== undefined || protectedFlexDirection !== undefined)
+  ) {
+    warnedProtectedStyle.current = true;
+    console.warn(
+      "[react-native-reanimated-carousel] Pagination containerStyle cannot override direction or flexDirection; those fields were ignored."
+    );
+  }
+
+  if (count === 0) return null;
+
+  const onPress = props.onPress;
+  const getItemAccessibilityLabel =
+    typeof onPress === "function" ? props.getItemAccessibilityLabel : undefined;
+
+  return (
+    <View
+      style={[
+        safeContainerStyle,
+        {
+          direction: orientation === "horizontal" ? (I18nManager.isRTL ? "rtl" : "ltr") : undefined,
+          flexDirection: orientation === "vertical" ? "column" : "row",
+        },
+      ]}
+    >
+      {Array.from({ length: count }, (_, index) => (
+        <PaginationItem
+          key={index}
+          activeDotStyle={activeDotStyle}
+          count={count}
+          dotStyle={dotStyle}
+          index={index}
+          label={getItemAccessibilityLabel?.(index, count)}
+          onPress={onPress}
+          progress={progress}
+        />
+      ))}
+    </View>
+  );
+}