CarouselWrapper (React Native + Reanimated)

A reusable, auto-scrolling carousel component for React Native built using React Native Reanimated v2, offering customizable pagination indicators, smooth animations, and infinite looping.

✨ Features

• 📸 Horizontal carousel with snapping
• 🔁 Auto-scrolling with customizable duration
• 🎯 Smart pagination indicators (max 3 dots)
• 🎨 Customizable active/inactive dot colors and size
• 📱 Fully responsive and easy to integrate

📦 Pre-requisites

Ensure you have react-native-reanimated and react-native-gesture-handler installed and configured.

npm install @seirei/carousel

Follow Reanimated setup guide if not already configured.

🚀 Usage

import { CarouselWrapper } from "./CarouselWrapper";

<CarouselWrapper
  snapDuration={2500}
  wrapperStyle={{ marginVertical: 20 }}
  activeSlideAccentColor="#FF7A00"
  inactiveSlideAccentColor="#E0E0E0"
  dotSize={12}
>
  {[...Array(5)].map((_, i) => (
    <YourSlideComponent key={i} />
  ))}
</CarouselWrapper>

⚙️ Props

| Prop | Type | Default | Description | | -------------------------- | ------------------- | ------------- | --------------------------------------------- | | children | React.ReactNode[] | Required | The slides to be rendered inside the carousel | | wrapperStyle | ViewStyle | undefined | Optional style for the outer container | | snapDuration | number | 1000 | Time in ms between auto-scrolls | | activeSlideAccentColor | string | "#00000070" | Color of the active pagination dot | | inactiveSlideAccentColor | string | "#D3D3D350" | Color of the inactive pagination dots | | dotSize | number | 10 | Diameter of each pagination dot |

InfiniteCarouselWrapper

InfiniteCarouselWrapper is a horizontally scrollable, auto-playing carousel component designed using Animated.FlatList from react-native-reanimated. It supports infinite-like scrolling behavior by continuously appending the initial children to the data list and handles both manual swiping and automatic transitions.

✨ Features

• Infinite scroll effect via data duplication
• Optional auto-play with configurable interval
• 3-dot pagination logic:
  • First dot active on the first slide
  • Middle dot active on intermediate slides
  • Last dot active on the final slide
• Customizable pagination through a render prop
• Slide change callback support

🔧 Props

| Prop | Type | Default | Description | |-------------------------|---------------------------------------|------------------|-----------------------------------------------------------------------------| | children | ReactNode[] | Required | Carousel items to be displayed. | | wrapperStyle | ViewStyle | undefined | Custom style for the FlatList container. | | autoSlide | boolean | false | Enables automatic sliding at intervals. | | snapDuration | number | 1000 | Duration between auto slides (in ms). | | activeSlideAccentColor| string | #00000070 | Color of the active pagination dot. | | inactiveSlideAccentColor | string | #D3D3D350 | Color of the inactive pagination dots. | | dotSize | number | 10 | Diameter of the pagination dots. | | onSlideChange | (index: number) => void | undefined | Callback triggered when the current visible slide changes. | | paginationComponent | (index: number) => ReactNode | undefined | Optional render prop to provide custom pagination component. |

📦 Behavior

• Internally manages the FlatList's scroll position using react-native-reanimated.
• Duplicates the children array dynamically to simulate infinite scroll.
• Uses ViewabilityConfig to track the visible item and update pagination.
• Pagination by default shows only 3 dots:
  • First dot highlighted when at the first index.
  • Last dot highlighted when at the final index.
  • Middle dot highlighted for all other indices.

🧠 Notes

• Ensure your children array contains at least 1 element.
• The autoSlide timer resets on user scroll interaction and resumes after.
• The component works well for image sliders, banners, and promotional cards.

📌 Example Usage

<InfiniteCarouselWrapper autoSlide snapDuration={3000}>
  {[<Card1 />, <Card2 />, <Card3 />]}
</InfiniteCarouselWrapper>

🔍 To Do / Improvements

• Pause on press
• Add manual navigation controls (next/prev)
• Add loop reset when data grows too large

📄 License

MIT License. Feel free to use and modify in your own projects.

🙌 Author

Crafted with ❤️ by Priyanshu Dixit