Carousel pagination with timer - Reanimated

Description

This animated component is an autoplay carousel pagination indicator built with React Native Reanimated. It smoothly animates between dots representing your data items, advancing automatically on a timer. You can customize the animation duration, dot size, and handle index changes through a callback for full control over the carousel’s behavior. The `onIndexChange` callback is triggered whenever the active index updates, allowing you to synchronize the pagination with other UI elements or actions. **Props** - `data`: Array of items represented as dots in the carousel. - `initialActiveIndex`: Starting index for the active dot. - `duration`: Duration (in milliseconds) of the autoplay animation for each transition. - `dotSize`: Size of each pagination dot. - `onIndexChange`: Callback invoked when the active index changes.

Installation

bunx @animatereactnative/cli@latest add carousel-pagination-with-timer-reanimated

npx @animatereactnative/cli@latest add carousel-pagination-with-timer-reanimated

yarn @animatereactnative/cli@latest add carousel-pagination-with-timer-reanimated

pnpm dlx @animatereactnative/cli@latest add carousel-pagination-with-timer-reanimated

Preview

Dependencies

PackageVersion
lucide-react-native^0.456.0
react-native-reanimated~4.1.0
react-native-worklets^0.5.1

To install these dependencies, you can use the following command:

bun add lucide-react-native@"^0.456.0" react-native-reanimated@"~4.1.0" react-native-worklets@"^0.5.1"

npm install lucide-react-native@"^0.456.0" react-native-reanimated@"~4.1.0" react-native-worklets@"^0.5.1"

yarn install lucide-react-native@"^0.456.0" react-native-reanimated@"~4.1.0" react-native-worklets@"^0.5.1"

pnpm install lucide-react-native@"^0.456.0" react-native-reanimated@"~4.1.0" react-native-worklets@"^0.5.1"

Source code