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

package/src/components/Pagination/Custom/PaginationItem.tsx

@@ -1,166 +0,0 @@
-import type { PropsWithChildren } from "react";
-import React, { useState } from "react";
-import type { AccessibilityRole, AccessibilityState } from "react-native";
-import { Pressable } from "react-native";
-import type { ImageStyle, TextStyle, ViewStyle } from "react-native";
-import type { SharedValue } from "react-native-reanimated";
-import Animated, {
-  Extrapolation,
-  interpolate,
-  interpolateColor,
-  useAnimatedStyle,
-  useSharedValue,
-  useDerivedValue,
-  useAnimatedReaction,
-} from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
-
-type AnimatedDefaultStyle = ViewStyle | ImageStyle | TextStyle;
-
-export type PaginationItemAccessibilityOverrides = {
-  accessibilityLabel?: string;
-  accessibilityHint?: string;
-  accessibilityRole?: AccessibilityRole;
-  accessibilityState?: AccessibilityState;
-};
-
-export type DotStyle = Omit<ViewStyle, "width" | "height" | "backgroundColor" | "borderRadius"> & {
-  width?: number;
-  height?: number;
-  backgroundColor?: string;
-  borderRadius?: number;
-};
-
-export const PaginationItem: React.FC<
-  PropsWithChildren<{
-    index: number;
-    count: number;
-    size?: number;
-    animValue: SharedValue<number>;
-    horizontal?: boolean;
-    dotStyle?: DotStyle;
-    activeDotStyle?: DotStyle;
-    onPress: () => void;
-    customReanimatedStyle?: (
-      progress: number,
-      index: number,
-      length: number
-    ) => AnimatedDefaultStyle;
-    accessibilityLabel?: string;
-    accessibilityHint?: string;
-    accessibilityRole?: AccessibilityRole;
-    accessibilityState?: AccessibilityState;
-  }>
-> = (props) => {
-  const defaultDotSize = 10;
-  const {
-    animValue,
-    dotStyle,
-    activeDotStyle,
-    index,
-    count,
-    size,
-    horizontal,
-    children,
-    customReanimatedStyle,
-    onPress,
-    accessibilityLabel,
-    accessibilityHint,
-    accessibilityRole,
-    accessibilityState,
-  } = props;
-  const customReanimatedStyleRef = useSharedValue<AnimatedDefaultStyle>({});
-  const handleCustomAnimation = (progress: number) => {
-    customReanimatedStyleRef.value = customReanimatedStyle?.(progress, index, count) ?? {};
-  };
-
-  const [isSelected, setIsSelected] = useState(false);
-  const resolvedAccessibilityLabel = accessibilityLabel ?? `Slide ${index + 1} of ${count}`;
-  const resolvedAccessibilityHint =
-    accessibilityHint ?? (isSelected ? "" : `Go to ${resolvedAccessibilityLabel}`);
-  const resolvedAccessibilityRole = accessibilityRole ?? "button";
-  const resolvedAccessibilityState = accessibilityState ?? { selected: isSelected };
-
-  useDerivedValue(() => {
-    scheduleOnRN(handleCustomAnimation, animValue?.value);
-  });
-
-  useAnimatedReaction(
-    () => animValue.value,
-    (value) => {
-      scheduleOnRN(setIsSelected, value === index);
-    },
-    [animValue, index]
-  );
-
-  const animStyle = useAnimatedStyle((): AnimatedDefaultStyle => {
-    const {
-      width = size || defaultDotSize,
-      height = size || defaultDotSize,
-      borderRadius,
-      backgroundColor = "#FFF",
-      ...restDotStyle
-    } = dotStyle ?? {};
-    const {
-      width: activeWidth = width,
-      height: activeHeight = height,
-      borderRadius: activeBorderRadius,
-      backgroundColor: activeBackgroundColor = "#000",
-      ...restActiveDotStyle
-    } = activeDotStyle ?? {};
-    let val = Math.abs(animValue?.value - index);
-    if (index === 0 && animValue?.value > count - 1) val = Math.abs(animValue?.value - count);
-
-    const inputRange = [0, 1, 2];
-    const restStyle = (val === 0 ? restActiveDotStyle : restDotStyle) ?? {};
-
-    return {
-      width: interpolate(val, inputRange, [activeWidth, width, width], Extrapolation.CLAMP),
-      height: interpolate(val, inputRange, [activeHeight, height, height], Extrapolation.CLAMP),
-      borderRadius: interpolate(
-        val,
-        inputRange,
-        [activeBorderRadius ?? borderRadius ?? 0, borderRadius ?? 0, borderRadius ?? 0],
-        Extrapolation.CLAMP
-      ),
-      backgroundColor: interpolateColor(val, inputRange, [
-        activeBackgroundColor,
-        backgroundColor,
-        backgroundColor,
-      ]),
-      ...restStyle,
-      ...(customReanimatedStyleRef.value ?? {}),
-      transform: [
-        ...(restStyle?.transform ?? []),
-        ...(customReanimatedStyleRef.value?.transform ?? []),
-      ] as AnimatedDefaultStyle["transform"],
-    };
-  }, [animValue, index, count, horizontal, dotStyle, activeDotStyle, customReanimatedStyle]);
-
-  return (
-    <Pressable
-      onPress={onPress}
-      accessibilityLabel={resolvedAccessibilityLabel}
-      accessibilityRole={resolvedAccessibilityRole}
-      accessibilityHint={resolvedAccessibilityHint}
-      accessibilityState={resolvedAccessibilityState}
-    >
-      <Animated.View
-        style={[
-          {
-            overflow: "hidden",
-            transform: [
-              {
-                rotateZ: horizontal ? "90deg" : "0deg",
-              },
-            ],
-          },
-          dotStyle,
-          animStyle,
-        ]}
-      >
-        {children}
-      </Animated.View>
-    </Pressable>
-  );
-};

package/src/components/Pagination/Custom/index.tsx

@@ -1,111 +0,0 @@
-import React from "react";
-import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
-import { View } from "react-native";
-import type { SharedValue } from "react-native-reanimated";
-
-import type { DotStyle, PaginationItemAccessibilityOverrides } from "./PaginationItem";
-import { PaginationItem } from "./PaginationItem";
-
-export interface ShapeProps<T extends {}> {
-  progress: SharedValue<number>;
-  horizontal?: boolean;
-  data: Array<T>;
-  renderItem?: (item: T, index: number) => React.ReactNode;
-  containerStyle?: StyleProp<ViewStyle>;
-  dotStyle?: DotStyle;
-  activeDotStyle?: DotStyle;
-  size?: number;
-  onPress?: (index: number) => void;
-  customReanimatedStyle?: (progress: number, index: number, length: number) => AnimatedDefaultStyle;
-  carouselName?: string;
-  /**
-   * Optional accessibility overrides for each pagination item.
-   * Use this to fully control screen reader announcements per dot.
-   */
-  paginationItemAccessibility?: (
-    index: number,
-    length: number
-  ) => PaginationItemAccessibilityOverrides;
-}
-
-type AnimatedDefaultStyle = ViewStyle | ImageStyle | TextStyle;
-
-export const Custom = <T extends {}>(props: ShapeProps<T>) => {
-  const {
-    activeDotStyle,
-    dotStyle,
-    progress,
-    horizontal = true,
-    data,
-    size,
-    containerStyle,
-    renderItem,
-    onPress,
-    customReanimatedStyle,
-    carouselName,
-    paginationItemAccessibility,
-  } = props;
-
-  if (
-    typeof size === "string" ||
-    typeof dotStyle?.width === "string" ||
-    typeof dotStyle?.height === "string" ||
-    typeof activeDotStyle?.width === "string" ||
-    typeof activeDotStyle?.height === "string"
-  )
-    throw new Error("size/width/height must be a number");
-
-  const maxItemWidth = Math.max(size ?? 0, dotStyle?.width ?? 0, activeDotStyle?.width ?? 0);
-  const maxItemHeight = Math.max(size ?? 0, dotStyle?.height ?? 0, activeDotStyle?.height ?? 0);
-
-  return (
-    <View
-      style={[
-        {
-          justifyContent: "space-between",
-          alignSelf: "center",
-          minWidth: maxItemWidth,
-          minHeight: maxItemHeight,
-        },
-        horizontal
-          ? {
-              flexDirection: "row",
-            }
-          : {
-              flexDirection: "column",
-            },
-        containerStyle,
-      ]}
-    >
-      {data.map((item, index) => {
-        const defaultAccessibilityLabel = carouselName
-          ? `Slide ${index + 1} of ${data.length} - ${carouselName}`
-          : `Slide ${index + 1} of ${data.length}`;
-        const accessibilityOverrides = paginationItemAccessibility?.(index, data.length) ?? {};
-
-        return (
-          <PaginationItem
-            key={index}
-            index={index}
-            size={size}
-            count={data.length}
-            dotStyle={dotStyle}
-            animValue={progress}
-            horizontal={!horizontal}
-            activeDotStyle={activeDotStyle}
-            customReanimatedStyle={customReanimatedStyle}
-            onPress={() => onPress?.(index)}
-            accessibilityLabel={
-              accessibilityOverrides.accessibilityLabel ?? defaultAccessibilityLabel
-            }
-            accessibilityHint={accessibilityOverrides.accessibilityHint}
-            accessibilityRole={accessibilityOverrides.accessibilityRole}
-            accessibilityState={accessibilityOverrides.accessibilityState}
-          >
-            {renderItem?.(item, index)}
-          </PaginationItem>
-        );
-      })}
-    </View>
-  );
-};

package/src/utils/compute-offset-if-data-changed.ts

@@ -1,44 +0,0 @@
-export function omitZero(a: number, b: number) {
-  "worklet";
-  if (a === 0) return 0;
-
-  return b;
-}
-
-export function computeOffsetIfDataChanged(params: {
-  direction: number;
-  handlerOffset: number;
-  size: number;
-  previousLength: number;
-  currentLength: number;
-}) {
-  "worklet";
-  const { direction, handlerOffset: _handlerOffset, size, previousLength, currentLength } = params;
-
-  let handlerOffset = _handlerOffset;
-  let positionIndex: number;
-  let round: number;
-
-  const isPositive = direction < 0;
-
-  if (isPositive) {
-    positionIndex = Math.abs(handlerOffset) / size;
-    round = Number.parseInt(String(omitZero(previousLength, positionIndex / previousLength)));
-  } else {
-    positionIndex = (Math.abs(handlerOffset) - size) / size;
-    round = Number.parseInt(String(omitZero(previousLength, positionIndex / previousLength))) + 1;
-  }
-
-  const prevOffset = omitZero(previousLength, positionIndex % previousLength);
-  const prevIndex = isPositive ? prevOffset : previousLength - prevOffset - 1;
-  const changedLength = round * (currentLength - previousLength);
-  const changedOffset = changedLength * size;
-  if (prevIndex > currentLength - 1 && currentLength < previousLength) {
-    if (isPositive) handlerOffset = (currentLength - 1) * size * direction;
-    else handlerOffset = (currentLength - 1) * size * -1;
-  } else {
-    handlerOffset += changedOffset * direction;
-  }
-
-  return handlerOffset;
-}

package/src/utils/handleroffset-direction.ts

@@ -1,18 +0,0 @@
-import type { SharedValue } from "react-native-reanimated";
-
-import type { TCarouselProps } from "../types";
-
-export function handlerOffsetDirection(
-  handlerOffset: SharedValue<number>,
-  fixedDirection?: TCarouselProps["fixedDirection"]
-): -1 | 1 {
-  "worklet";
-
-  if (fixedDirection === "negative") return -1;
-
-  if (fixedDirection === "positive") return 1;
-
-  if (handlerOffset.value === 0) return -1;
-
-  return Math.sign(handlerOffset.value) as -1 | 1;
-}