{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel",
  "type": "registry:ui",
  "title": "Carousel",
  "description": "A carousel component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/carousel/carousel.tsx",
      "content": "import * as React from \"react\";\nimport {\n  View,\n  Text,\n  Pressable,\n  Dimensions,\n  ScrollView,\n  AccessibilityInfo,\n} from \"react-native\";\nimport { cn } from \"@/lib/utils\";\nimport { Ionicons } from \"@expo/vector-icons\";\n\ntype CarouselContextProps = {\n  scrollViewRef: React.RefObject<ScrollView | null>;\n  currentIndex: number;\n  scrollTo: (index: number) => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n  itemsCount: number;\n  orientation?: \"horizontal\" | \"vertical\";\n};\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext);\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\");\n  }\n  return context;\n}\n\ninterface CarouselProps {\n  children: React.ReactNode;\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  showControls?: boolean;\n  showIndicators?: boolean;\n  autoPlay?: boolean;\n  autoPlayInterval?: number;\n  loop?: boolean;\n  indicatorStyle?: \"dots\" | \"lines\" | \"numbers\";\n  onIndexChange?: (index: number) => void;\n}\n\nconst Carousel = React.forwardRef<View, CarouselProps>(\n  (\n    {\n      children,\n      className,\n      orientation = \"horizontal\",\n      showControls = true,\n      showIndicators = true,\n      autoPlay = false,\n      autoPlayInterval = 3000,\n      loop = true,\n      indicatorStyle = \"dots\",\n      onIndexChange,\n      ...props\n    },\n    ref\n  ) => {\n    const scrollViewRef = React.useRef<ScrollView>(null);\n    const [currentIndex, setCurrentIndex] = React.useState(0);\n    const [itemsCount, setItemsCount] = React.useState(0);\n    const dimensions = {\n      width: Dimensions.get(\"window\").width,\n      height: Dimensions.get(\"window\").height,\n    };\n\n    const canScrollPrev = currentIndex > 0 || loop;\n    const canScrollNext = currentIndex < itemsCount - 1 || loop;\n\n    const scrollTo = React.useCallback(\n      (index: number) => {\n        if (!scrollViewRef.current) return;\n\n        let targetIndex = index;\n        if (index < 0) {\n          targetIndex = loop ? itemsCount - 1 : 0;\n        } else if (index >= itemsCount) {\n          targetIndex = loop ? 0 : itemsCount - 1;\n        }\n\n        const offset =\n          orientation === \"horizontal\"\n            ? targetIndex * dimensions.width\n            : targetIndex * dimensions.height;\n\n        scrollViewRef.current.scrollTo({\n          [orientation === \"horizontal\" ? \"x\" : \"y\"]: offset,\n          animated: true,\n        });\n\n        setCurrentIndex(targetIndex);\n        onIndexChange?.(targetIndex);\n        AccessibilityInfo.announceForAccessibility(\n          `Image ${targetIndex + 1} of ${itemsCount}`\n        );\n      },\n      [orientation, dimensions, itemsCount, onIndexChange, loop]\n    );\n\n    const handleScroll = React.useCallback(\n      (event: any) => {\n        const {\n          nativeEvent: { contentOffset, layoutMeasurement },\n        } = event;\n        const offset =\n          orientation === \"horizontal\" ? contentOffset.x : contentOffset.y;\n        const size =\n          orientation === \"horizontal\"\n            ? layoutMeasurement.width\n            : layoutMeasurement.height;\n        const index = Math.round(offset / size);\n\n        if (index !== currentIndex) {\n          setCurrentIndex(index);\n          onIndexChange?.(index);\n        }\n      },\n      [orientation, currentIndex, onIndexChange]\n    );\n\n    React.useEffect(() => {\n      if (autoPlay && canScrollNext) {\n        const interval = setInterval(() => {\n          if (currentIndex < itemsCount - 1) {\n            scrollTo(currentIndex + 1);\n          } else if (loop) {\n            scrollTo(0);\n          }\n        }, autoPlayInterval);\n\n        return () => clearInterval(interval);\n      }\n    }, [currentIndex, autoPlay, autoPlayInterval, loop, itemsCount, scrollTo]);\n\n    const renderIndicator = () => {\n      switch (indicatorStyle) {\n        case \"lines\":\n          return (\n            <View\n              className={cn(\n                \"absolute flex-row justify-center items-center gap-1.5 z-10\",\n                orientation === \"horizontal\"\n                  ? \"bottom-4 left-0 right-0\"\n                  : \"right-4 top-1/2 -translate-y-1/2 flex-col\"\n              )}\n              style={{\n                shadowColor: \"#000\",\n                shadowOffset: { width: 0, height: 2 },\n                shadowOpacity: 0.25,\n                shadowRadius: 3.84,\n                elevation: 5,\n              }}\n            >\n              {Array.from({ length: itemsCount }).map((_, index) => (\n                <Pressable\n                  key={index}\n                  onPress={() => scrollTo(index)}\n                  accessibilityRole=\"button\"\n                  accessibilityLabel={`Go to image ${index + 1}`}\n                  accessibilityState={{ selected: currentIndex === index }}\n                  style={[\n                    {\n                      height: orientation === \"horizontal\" ? 2 : 16,\n                      width:\n                        orientation === \"horizontal\"\n                          ? currentIndex === index\n                            ? 16\n                            : 8\n                          : 2,\n                      borderRadius: 2,\n                      backgroundColor:\n                        currentIndex === index\n                          ? \"#3b82f6\"\n                          : \"rgba(255, 255, 255, 0.5)\",\n                    },\n                  ]}\n                />\n              ))}\n            </View>\n          );\n        case \"numbers\":\n          return (\n            <View\n              className={cn(\n                \"absolute bg-black/50 px-2.5 py-1.5 rounded-full z-10\",\n                orientation === \"horizontal\"\n                  ? \"bottom-4 right-4\"\n                  : \"right-4 top-4\"\n              )}\n              style={{\n                shadowColor: \"#000\",\n                shadowOffset: { width: 0, height: 2 },\n                shadowOpacity: 0.25,\n                shadowRadius: 3.84,\n                elevation: 5,\n              }}\n            >\n              <Text className=\"text-white text-sm font-medium\">\n                {currentIndex + 1} / {itemsCount}\n              </Text>\n            </View>\n          );\n        default:\n          return (\n            <View\n              className={cn(\n                \"absolute flex-row justify-center items-center gap-2 z-10\",\n                orientation === \"horizontal\"\n                  ? \"bottom-4 left-0 right-0\"\n                  : \"right-4 top-1/2 -translate-y-1/2 flex-col\"\n              )}\n              style={{\n                shadowColor: \"#000\",\n                shadowOffset: { width: 0, height: 2 },\n                shadowOpacity: 0.25,\n                shadowRadius: 3.84,\n                elevation: 5,\n              }}\n            >\n              {Array.from({ length: itemsCount }).map((_, index) => (\n                <Pressable\n                  key={index}\n                  onPress={() => scrollTo(index)}\n                  accessibilityRole=\"button\"\n                  accessibilityLabel={`Go to image ${index + 1}`}\n                  accessibilityState={{ selected: currentIndex === index }}\n                  style={[\n                    {\n                      width: 8,\n                      height: 8,\n                      borderRadius: 4,\n                      transform: [{ scale: currentIndex === index ? 1.25 : 1 }],\n                      backgroundColor:\n                        currentIndex === index\n                          ? \"#3b82f6\"\n                          : \"rgba(255, 255, 255, 0.5)\",\n                    },\n                  ]}\n                />\n              ))}\n            </View>\n          );\n      }\n    };\n\n    return (\n      <CarouselContext.Provider\n        value={{\n          scrollViewRef,\n          currentIndex,\n          scrollTo,\n          canScrollPrev,\n          canScrollNext,\n          itemsCount,\n          orientation,\n        }}\n      >\n        <View\n          ref={ref}\n          className={cn(\"relative\", className)}\n          {...props}\n          style={{ width: dimensions.width }}\n          accessibilityRole=\"tablist\"\n          accessibilityLabel=\"Image carousel\"\n        >\n          <ScrollView\n            ref={scrollViewRef}\n            horizontal={orientation === \"horizontal\"}\n            showsHorizontalScrollIndicator={false}\n            showsVerticalScrollIndicator={false}\n            pagingEnabled\n            onScroll={handleScroll}\n            scrollEventThrottle={16}\n            onContentSizeChange={(w, h) => {\n              setItemsCount(\n                Math.ceil(\n                  (orientation === \"horizontal\" ? w : h) /\n                  (orientation === \"horizontal\"\n                    ? dimensions.width\n                    : dimensions.height)\n                )\n              );\n            }}\n          >\n            {children}\n          </ScrollView>\n\n          {showControls && (\n            <>\n              <CarouselPrevious />\n              <CarouselNext />\n            </>\n          )}\n\n          {showIndicators && renderIndicator()}\n        </View>\n      </CarouselContext.Provider>\n    );\n  }\n);\n\nCarousel.displayName = \"Carousel\";\n\nconst CarouselContent = React.forwardRef<\n  View,\n  React.ComponentProps<typeof View>\n>(({ className, children, ...props }, ref) => {\n  const { orientation } = useCarousel();\n\n  return (\n    <View\n      ref={ref}\n      className={cn(\n        \"flex\",\n        orientation === \"horizontal\" ? \"flex-row\" : \"flex-col\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </View>\n  );\n});\n\nCarouselContent.displayName = \"CarouselContent\";\n\nconst CarouselItem = React.forwardRef<View, React.ComponentProps<typeof View>>(\n  ({ className, children, ...props }, ref) => {\n    const { orientation } = useCarousel();\n    const dimensions = Dimensions.get(\"window\");\n\n    return (\n      <View\n        ref={ref}\n        className={cn(\"flex-1\", className)}\n        style={{\n          width: orientation === \"horizontal\" ? dimensions.width : \"100%\",\n          height: orientation === \"vertical\" ? dimensions.height : \"100%\",\n        }}\n        accessibilityRole=\"tab\"\n        {...props}\n      >\n        {children}\n      </View>\n    );\n  }\n);\n\nCarouselItem.displayName = \"CarouselItem\";\n\nconst CarouselPrevious = React.forwardRef<\n  View,\n  React.ComponentProps<typeof View>\n>(({ className, ...props }, ref) => {\n  const { scrollTo, currentIndex, canScrollPrev, orientation } = useCarousel();\n\n  if (!canScrollPrev) return null;\n\n  return (\n    <Pressable\n      onPress={() => scrollTo(currentIndex - 1)}\n      className={cn(\n        \"absolute z-10 p-3 rounded-full bg-background/50 backdrop-blur-sm\",\n        orientation === \"horizontal\"\n          ? \"left-4 top-1/2 -translate-y-1/2\"\n          : \"left-1/2 -translate-x-1/2 top-4\",\n        className\n      )}\n      accessibilityRole=\"button\"\n      accessibilityLabel=\"Previous image\"\n      {...props}\n    >\n      <Ionicons\n        name={orientation === \"horizontal\" ? \"chevron-back\" : \"chevron-up\"}\n        size={28}\n        color=\"#000\"\n      />\n    </Pressable>\n  );\n});\n\nCarouselPrevious.displayName = \"CarouselPrevious\";\n\nconst CarouselNext = React.forwardRef<View, React.ComponentProps<typeof View>>(\n  ({ className, ...props }, ref) => {\n    const { scrollTo, currentIndex, canScrollNext, orientation } =\n      useCarousel();\n\n    if (!canScrollNext) return null;\n\n    return (\n      <Pressable\n        onPress={() => scrollTo(currentIndex + 1)}\n        className={cn(\n          \"absolute z-10 p-3 rounded-full bg-background/50 backdrop-blur-sm\",\n          orientation === \"horizontal\"\n            ? \"right-4 top-1/2 -translate-y-1/2\"\n            : \"left-1/2 -translate-x-1/2 bottom-4\",\n          className\n        )}\n        accessibilityRole=\"button\"\n        accessibilityLabel=\"Next image\"\n        {...props}\n      >\n        <Ionicons\n          name={\n            orientation === \"horizontal\" ? \"chevron-forward\" : \"chevron-down\"\n          }\n          size={28}\n          color=\"#000\"\n        />\n      </Pressable>\n    );\n  }\n);\n\nCarouselNext.displayName = \"CarouselNext\";\n\nexport {\n  type CarouselProps,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n};\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import {\n    Carousel,\n    CarouselContent,\n    CarouselItem,\n} from \"@/components/ui/carousel\";\nimport * as React from \"react\";\nimport { Image, Text, View } from \"react-native\";\n\nconst images = [\n    {\n        id: 1,\n        title: \"Mountain Landscape\",\n        description: \"Beautiful mountain landscape with snow peaks\",\n        url: \"https://images.unsplash.com/photo-1506905925346-21bda4d32df4\",\n    },\n    {\n        id: 2,\n        title: \"Beach Sunset\",\n        description: \"Stunning sunset view at the beach\",\n        url: \"https://images.unsplash.com/photo-1507525428034-b723cf961d3e\",\n    },\n];\n\nexport const CarousselExample = () => {\n\n    return (\n        <Carousel indicatorStyle=\"dots\">\n            <CarouselContent>\n                {images.map((image) => (\n                    <CarouselItem key={image.id} className=\"px-4\">\n                        <View className=\"relative\">\n                            <Image\n                                source={{ uri: image.url }}\n                                className=\"w-full h-64 rounded-lg\"\n                                resizeMode=\"cover\"\n                            />\n                            <View className=\"absolute bottom-0 left-0 right-0 p-4 bg-black/50 rounded-b-lg\">\n                                <Text className=\"text-white text-lg font-semibold mb-1\">\n                                    {image.title}\n                                </Text>\n                                <Text className=\"text-white/80 text-sm\">\n                                    {image.description}\n                                </Text>\n                            </View>\n                        </View>\n                    </CarouselItem>\n                ))}\n            </CarouselContent>\n        </Carousel>\n    );\n}\n",
  "customPreview": "import {\n    Carousel,\n    CarouselContent,\n    CarouselItem,\n} from \"@/components/ui/carousel\";\nimport { Ionicons } from \"@expo/vector-icons\";\nimport * as React from \"react\";\nimport { Image, Pressable, ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nconst images = [\n    {\n        id: 1,\n        title: \"Mountain Landscape\",\n        description: \"Beautiful mountain landscape with snow peaks\",\n        url: \"https://images.unsplash.com/photo-1506905925346-21bda4d32df4\",\n    },\n    {\n        id: 2,\n        title: \"Beach Sunset\",\n        description: \"Stunning sunset view at the beach\",\n        url: \"https://images.unsplash.com/photo-1507525428034-b723cf961d3e\",\n    },\n    {\n        id: 3,\n        title: \"City Lights\",\n        description: \"Night city view with bright lights\",\n        url: \"https://images.unsplash.com/photo-1519501025264-65ba15a82390\",\n    },\n    {\n        id: 4,\n        title: \"Forest Path\",\n        description: \"Peaceful path through a green forest\",\n        url: \"https://images.unsplash.com/photo-1441974231531-c6227db76b6e\",\n    },\n];\n\nconst InstagramPost = () => {\n    const [currentIndex, setCurrentIndex] = React.useState(0);\n    const carouselRef = React.useRef<View>(null);\n\n    const handleIndexChange = React.useCallback((index: number) => {\n        setCurrentIndex(index);\n    }, []);\n\n    return (\n        <View className=\"bg-card rounded-xl overflow-hidden\">\n            <View className=\"flex-row items-center p-3\">\n                <Image\n                    source={{ uri: \"https://avatars.githubusercontent.com/u/204157942?s=200&v=4\" }}\n                    className=\"w-8 h-8 rounded-full\"\n                />\n                <Text className=\"ml-3 font-semibold text-foreground\">shadcn</Text>\n                <Pressable className=\"ml-auto\">\n                    <Ionicons name=\"ellipsis-horizontal\" size={20} color=\"#666\" />\n                </Pressable>\n            </View>\n\n            <View className=\"-mx-4\">\n                <Carousel\n                    ref={carouselRef}\n                    showControls={false}\n                    showIndicators={false}\n                    onIndexChange={handleIndexChange}\n                    className=\"aspect-square\"\n                    loop={false}\n                >\n                    <CarouselContent>\n                        {images.map((image) => (\n                            <CarouselItem key={image.id} className=\"px-4\">\n                                <Image\n                                    source={{ uri: image.url }}\n                                    className=\"w-full h-full\"\n                                    resizeMode=\"cover\"\n                                />\n                                {images.length > 1 && (\n                                    <View\n                                        className=\"absolute top-4 right-4 bg-black/50 px-2.5 py-1.5 rounded-full\"\n                                        style={{\n                                            shadowColor: \"#000\",\n                                            shadowOffset: { width: 0, height: 2 },\n                                            shadowOpacity: 0.25,\n                                            shadowRadius: 3.84,\n                                            elevation: 5\n                                        }}\n                                    >\n                                        <Text className=\"text-white text-xs font-medium\">\n                                            {currentIndex + 1} / {images.length}\n                                        </Text>\n                                    </View>\n                                )}\n                            </CarouselItem>\n                        ))}\n                    </CarouselContent>\n                </Carousel>\n            </View>\n\n            <View className=\"p-4\">\n                <View className=\"flex-row items-center gap-4 mb-3\">\n                    <Pressable>\n                        <Ionicons name=\"heart-outline\" size={24} color=\"#666\" />\n                    </Pressable>\n                    <Pressable>\n                        <Ionicons name=\"chatbubble-outline\" size={24} color=\"#666\" />\n                    </Pressable>\n                    <Pressable>\n                        <Ionicons name=\"paper-plane-outline\" size={24} color=\"#666\" />\n                    </Pressable>\n                    {images.length > 1 && (\n                        <View className=\"flex-row gap-1.5 flex-1 justify-center\">\n                            {images.map((_, idx) => (\n                                <Pressable\n                                    key={idx}\n                                    onPress={() => {\n                                        const carousel = carouselRef.current as any;\n                                        if (carousel?.scrollTo) {\n                                            carousel.scrollTo(idx);\n                                        }\n                                    }}\n                                    className=\"rounded-full\"\n                                    style={{\n                                        width: 6,\n                                        height: 6,\n                                        backgroundColor: currentIndex === idx ? \"#000\" : \"#d1d5db\"\n                                    }}\n                                />\n                            ))}\n                        </View>\n                    )}\n                    <Pressable>\n                        <Ionicons name=\"bookmark-outline\" size={24} color=\"#666\" />\n                    </Pressable>\n                </View>\n\n                <Text className=\"font-semibold text-foreground mb-1\">\n                    {images[currentIndex].title}\n                </Text>\n                <Text className=\"text-muted-foreground\">\n                    {images[currentIndex].description}\n                </Text>\n            </View>\n        </View>\n    );\n};\n\nexport default function CarouselExample() {\n    const [currentSlideIndex, setCurrentSlideIndex] = React.useState(0);\n    const [customSlideIndex, setCustomSlideIndex] = React.useState(0);\n\n    const handleCustomIndexChange = React.useCallback((index: number) => {\n        setCustomSlideIndex(index);\n    }, []);\n\n    return (\n        <SafeAreaView edges={[\"left\", \"right\"]} className=\"flex-1 bg-background\">\n            <ScrollView className=\"flex-1\">\n                <View className=\"p-4\">\n                    <View className=\"mb-6\">\n                        <Text className=\"text-2xl font-bold mb-2 text-foreground\">\n                            Carousel\n                        </Text>\n                        <Text className=\"text-base text-muted-foreground mb-6\">\n                            A carousel component for cycling through elements like a slideshow.\n                        </Text>\n                    </View>\n\n                    {/* Instagram-style Post */}\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Instagram-style Post\n                        </Text>\n                        <InstagramPost />\n                    </View>\n\n                    {/* Basic Carousel */}\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Basic Carousel\n                        </Text>\n                        <View className=\"-mx-4\">\n                            <Carousel indicatorStyle=\"dots\">\n                                <CarouselContent>\n                                    {images.map((image) => (\n                                        <CarouselItem key={image.id} className=\"px-4\">\n                                            <View className=\"relative\">\n                                                <Image\n                                                    source={{ uri: image.url }}\n                                                    className=\"w-full h-64 rounded-lg\"\n                                                    resizeMode=\"cover\"\n                                                />\n                                                <View className=\"absolute bottom-0 left-0 right-0 p-4 bg-black/50 rounded-b-lg\">\n                                                    <Text className=\"text-white text-lg font-semibold mb-1\">\n                                                        {image.title}\n                                                    </Text>\n                                                    <Text className=\"text-white/80 text-sm\">\n                                                        {image.description}\n                                                    </Text>\n                                                </View>\n                                            </View>\n                                        </CarouselItem>\n                                    ))}\n                                </CarouselContent>\n                            </Carousel>\n                        </View>\n                    </View>\n\n                    {/* Autoplay Carousel */}\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Autoplay Carousel\n                        </Text>\n                        <View className=\"-mx-4\">\n                            <Carousel\n                                autoPlay\n                                autoPlayInterval={5000}\n                                indicatorStyle=\"numbers\"\n                                onIndexChange={setCurrentSlideIndex}\n                            >\n                                <CarouselContent>\n                                    {images.map((image) => (\n                                        <CarouselItem key={image.id} className=\"px-4\">\n                                            <Image\n                                                source={{ uri: image.url }}\n                                                className=\"w-full h-48 rounded-lg\"\n                                                resizeMode=\"cover\"\n                                            />\n                                        </CarouselItem>\n                                    ))}\n                                </CarouselContent>\n                            </Carousel>\n                        </View>\n                    </View>\n\n                    {/* Vertical Carousel */}\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Vertical Carousel\n                        </Text>\n                        <View className=\"-mx-4\">\n                            <Carousel\n                                className=\"h-96\"\n                                orientation=\"vertical\"\n                                indicatorStyle=\"lines\"\n                                onIndexChange={setCurrentSlideIndex}\n                            >\n                                <CarouselContent>\n                                    {images.map((image) => (\n                                        <CarouselItem key={image.id} className=\"px-4\">\n                                            <Image\n                                                source={{ uri: image.url }}\n                                                className=\"w-full h-full rounded-lg\"\n                                                resizeMode=\"cover\"\n                                            />\n                                        </CarouselItem>\n                                    ))}\n                                </CarouselContent>\n                            </Carousel>\n                        </View>\n                    </View>\n\n                    {/* Custom Carousel */}\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Custom Carousel\n                        </Text>\n                        <View className=\"-mx-4\">\n                            <Carousel\n                                className=\"bg-muted py-4\"\n                                showControls={false}\n                                showIndicators={false}\n                                onIndexChange={handleCustomIndexChange}\n                                loop={false}\n                            >\n                                <CarouselContent>\n                                    {Array.from({ length: 5 }).map((_, index) => (\n                                        <CarouselItem key={index} className=\"px-4\">\n                                            <View className=\"items-center justify-center p-6 bg-card rounded-lg\">\n                                                <Text className=\"text-4xl font-semibold text-foreground\">\n                                                    {index + 1}\n                                                </Text>\n                                                <Text className=\"text-muted-foreground mt-2\">\n                                                    Slide {index + 1}\n                                                </Text>\n                                            </View>\n                                        </CarouselItem>\n                                    ))}\n                                </CarouselContent>\n                            </Carousel>\n\n                            {/* Custom Indicators */}\n                            <View className=\"flex-row justify-center mt-4 gap-2\">\n                                {Array.from({ length: 5 }).map((_, idx) => (\n                                    <Pressable\n                                        key={idx}\n                                        onPress={() => handleCustomIndexChange(idx)}\n                                        className=\"rounded-full\"\n                                        style={{\n                                            width: customSlideIndex === idx ? 24 : 8,\n                                            height: 8,\n                                            backgroundColor: customSlideIndex === idx ? \"#000\" : \"#d1d5db\"\n                                        }}\n                                    />\n                                ))}\n                            </View>\n                        </View>\n                    </View>\n\n                    <View className=\"h-20\" />\n                </View>\n            </ScrollView>\n        </SafeAreaView>\n    );\n}\n"
}