react-native-reanimated-carousel 5.0.0-beta.7 → 5.0.0

package/src/components/LazyView.test.tsx

@@ -1,61 +0,0 @@
-import { render } from "@testing-library/react-native";
-import React from "react";
-import { Text } from "react-native";
-
-import { LazyView } from "./LazyView";
-
-describe("LazyView", () => {
-  it("should render children when shouldUpdate is true", () => {
-    const { getByText } = render(
-      <LazyView shouldUpdate={true}>
-        <Text>Test Child</Text>
-      </LazyView>
-    );
-
-    expect(getByText("Test Child")).toBeTruthy();
-  });
-
-  it("should not render children when shouldUpdate is false", () => {
-    const { queryByText } = render(
-      <LazyView shouldUpdate={false}>
-        <Text>Test Child</Text>
-      </LazyView>
-    );
-
-    expect(queryByText("Test Child")).toBeNull();
-  });
-
-  it("should render empty fragment when shouldUpdate is false", () => {
-    const { toJSON } = render(
-      <LazyView shouldUpdate={false}>
-        <Text>Test Child</Text>
-      </LazyView>
-    );
-
-    expect(toJSON()).toBeNull();
-  });
-
-  it("should handle multiple children when shouldUpdate is true", () => {
-    const { getByText } = render(
-      <LazyView shouldUpdate={true}>
-        <Text>First Child</Text>
-        <Text>Second Child</Text>
-      </LazyView>
-    );
-
-    expect(getByText("First Child")).toBeTruthy();
-    expect(getByText("Second Child")).toBeTruthy();
-  });
-
-  it("should not render multiple children when shouldUpdate is false", () => {
-    const { queryByText } = render(
-      <LazyView shouldUpdate={false}>
-        <Text>First Child</Text>
-        <Text>Second Child</Text>
-      </LazyView>
-    );
-
-    expect(queryByText("First Child")).toBeNull();
-    expect(queryByText("Second Child")).toBeNull();
-  });
-});

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

@@ -1,149 +0,0 @@
-import type { PropsWithChildren } from "react";
-import React, { useState } from "react";
-import type { AccessibilityRole, AccessibilityState, ViewStyle } from "react-native";
-import { Pressable, View } from "react-native";
-import type { SharedValue } from "react-native-reanimated";
-import Animated, {
-  Extrapolation,
-  interpolate,
-  useAnimatedReaction,
-  useAnimatedStyle,
-} from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
-
-export type DotStyle = Omit<ViewStyle, "width" | "height"> & {
-  width?: number;
-  height?: number;
-};
-
-export type PaginationItemAccessibilityOverrides = {
-  accessibilityLabel?: string;
-  accessibilityHint?: string;
-  accessibilityRole?: AccessibilityRole;
-  accessibilityState?: AccessibilityState;
-};
-
-export const PaginationItem: React.FC<
-  PropsWithChildren<{
-    index: number;
-    count: number;
-    size?: number;
-    animValue: SharedValue<number>;
-    horizontal?: boolean;
-    dotStyle?: DotStyle;
-    activeDotStyle?: DotStyle;
-    onPress: () => void;
-    accessibilityLabel?: string;
-    accessibilityHint?: string;
-    accessibilityRole?: AccessibilityRole;
-    accessibilityState?: AccessibilityState;
-  }>
-> = (props) => {
-  const {
-    animValue,
-    dotStyle,
-    activeDotStyle,
-    index,
-    count,
-    size,
-    horizontal,
-    children,
-    onPress,
-    accessibilityLabel,
-    accessibilityHint,
-    accessibilityRole,
-    accessibilityState,
-  } = props;
-
-  const defaultDotSize = 10;
-
-  const sizes = {
-    width: size || dotStyle?.width || defaultDotSize,
-    height: size || dotStyle?.height || defaultDotSize,
-  };
-
-  /**
-   * TODO: Keep this for future implementation
-   * Used to change the size of the active dot with animation
-   */
-  // const animatedSize = {
-  //   width: activeDotStyle?.width,
-  //   height: activeDotStyle?.height,
-  // };
-
-  const width = sizes.width;
-  const height = sizes.height;
-
-  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 };
-
-  useAnimatedReaction(
-    () => animValue.value,
-    (value) => {
-      scheduleOnRN(setIsSelected, value === index);
-    },
-    [animValue, index]
-  );
-
-  const animStyle = useAnimatedStyle(() => {
-    const size = horizontal ? height : width;
-    let inputRange = [index - 1, index, index + 1];
-    let outputRange = [-size, 0, size];
-
-    if (index === 0 && animValue?.value > count - 1) {
-      inputRange = [count - 1, count, count + 1];
-      outputRange = [-size, 0, size];
-    }
-
-    return {
-      transform: [
-        {
-          translateX: interpolate(animValue?.value, inputRange, outputRange, Extrapolation.CLAMP),
-        },
-      ],
-    };
-  }, [animValue, index, count, horizontal]);
-
-  return (
-    <Pressable
-      onPress={onPress}
-      accessibilityLabel={resolvedAccessibilityLabel}
-      accessibilityRole={resolvedAccessibilityRole}
-      accessibilityHint={resolvedAccessibilityHint}
-      accessibilityState={resolvedAccessibilityState}
-    >
-      <View
-        style={[
-          {
-            width,
-            height,
-            overflow: "hidden",
-            transform: [
-              {
-                rotateZ: horizontal ? "90deg" : "0deg",
-              },
-            ],
-          },
-          dotStyle,
-        ]}
-      >
-        <Animated.View
-          style={[
-            {
-              backgroundColor: "black",
-              flex: 1,
-            },
-            animStyle,
-            activeDotStyle,
-          ]}
-        >
-          {children}
-        </Animated.View>
-      </View>
-    </Pressable>
-  );
-};

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

@@ -1,98 +0,0 @@
-import { type StyleProp, View, type ViewStyle } from "react-native";
-import type { SharedValue } from "react-native-reanimated";
-
-import React from "react";
-import type { DotStyle, PaginationItemAccessibilityOverrides } from "./PaginationItem";
-import { PaginationItem } from "./PaginationItem";
-
-export interface BasicProps<T> {
-  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;
-  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;
-}
-
-export const Basic = <T extends {}>(props: BasicProps<T>) => {
-  const {
-    activeDotStyle,
-    dotStyle,
-    progress,
-    horizontal = true,
-    data,
-    size,
-    containerStyle,
-    renderItem,
-    onPress,
-    carouselName,
-    paginationItemAccessibility,
-  } = props;
-
-  if (
-    typeof size === "string" ||
-    typeof dotStyle?.width === "string" ||
-    typeof dotStyle?.height === "string"
-  )
-    throw new Error("size/width/height must be a number");
-
-  return (
-    <View
-      style={[
-        {
-          justifyContent: "space-between",
-          alignSelf: "center",
-        },
-        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}
-            onPress={() => onPress?.(index)}
-            accessibilityLabel={
-              accessibilityOverrides.accessibilityLabel ?? defaultAccessibilityLabel
-            }
-            accessibilityHint={accessibilityOverrides.accessibilityHint}
-            accessibilityRole={accessibilityOverrides.accessibilityRole}
-            accessibilityState={accessibilityOverrides.accessibilityState}
-          >
-            {renderItem?.(item, index)}
-          </PaginationItem>
-        );
-      })}
-    </View>
-  );
-};

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>
-  );
-};