Carousel

1import * as React from "react";
2import {
3  View,
4  Text,
5  Pressable,
6  Dimensions,
7  ScrollView,
8  AccessibilityInfo,
9} from "react-native";
10import { cn } from "@/lib/utils";
11import { Ionicons } from "@expo/vector-icons";
12 
13type CarouselContextProps = {
14  scrollViewRef: React.RefObject<ScrollView | null>;
15  currentIndex: number;
16  scrollTo: (index: number) => void;
17  canScrollPrev: boolean;
18  canScrollNext: boolean;
19  itemsCount: number;
20  orientation?: "horizontal" | "vertical";
21};
22 
23const CarouselContext = React.createContext<CarouselContextProps | null>(null);
24 
25function useCarousel() {
26  const context = React.useContext(CarouselContext);
27  if (!context) {
28    throw new Error("useCarousel must be used within a <Carousel />");
29  }
30  return context;
31}
32 
33interface CarouselProps {
34  children: React.ReactNode;
35  className?: string;
36  orientation?: "horizontal" | "vertical";
37  showControls?: boolean;
38  showIndicators?: boolean;
39  autoPlay?: boolean;
40  autoPlayInterval?: number;
41  loop?: boolean;
42  indicatorStyle?: "dots" | "lines" | "numbers";
43  onIndexChange?: (index: number) => void;
44}
45 
46const Carousel = React.forwardRef<View, CarouselProps>(
47  (
48    {
49      children,
50      className,
51      orientation = "horizontal",
52      showControls = true,
53      showIndicators = true,
54      autoPlay = false,
55      autoPlayInterval = 3000,
56      loop = true,
57      indicatorStyle = "dots",
58      onIndexChange,
59      ...props
60    },
61    ref
62  ) => {
63    const scrollViewRef = React.useRef<ScrollView>(null);
64    const [currentIndex, setCurrentIndex] = React.useState(0);
65    const [itemsCount, setItemsCount] = React.useState(0);
66    const dimensions = {
67      width: Dimensions.get("window").width,
68      height: Dimensions.get("window").height,
69    };
70 
71    const canScrollPrev = currentIndex > 0 || loop;
72    const canScrollNext = currentIndex < itemsCount - 1 || loop;
73 
74    const scrollTo = React.useCallback(
75      (index: number) => {
76        if (!scrollViewRef.current) return;
77 
78        let targetIndex = index;
79        if (index < 0) {
80          targetIndex = loop ? itemsCount - 1 : 0;
81        } else if (index >= itemsCount) {
82          targetIndex = loop ? 0 : itemsCount - 1;
83        }
84 
85        const offset =
86          orientation === "horizontal"
87            ? targetIndex * dimensions.width
88            : targetIndex * dimensions.height;
89 
90        scrollViewRef.current.scrollTo({
91          [orientation === "horizontal" ? "x" : "y"]: offset,
92          animated: true,
93        });
94 
95// … truncated