Circular slider
Description
This example showcases a circular slider built with React Native Reanimated. As users scroll through the items, the background dynamically updates to reflect the currently active image, creating a smooth and engaging visual transition.
The animation is driven by a `scrollX` value, which is clamped between `0` and the total number of items using Reanimated’s interpolation utilities. This ensures that the animation doesn’t overshoot the bounds of the slider. By clamping the value, we maintain consistent behavior even during fast or over-scrolling gestures.
To keep track of the active item, `runOnJS` is used to trigger a JavaScript function that updates the `activeIndex`. This allows the UI to remain in sync with the animation state, enabling you to trigger side effects or update the app state based on the currently visible item.
Installation
bunx @animatereactnative/cli@latest add circular-slider
npx @animatereactnative/cli@latest add circular-slider
yarn @animatereactnative/cli@latest add circular-slider
pnpm dlx @animatereactnative/cli@latest add circular-slider
Dependencies
| Package | Version | 
|---|---|
| react-native-reanimated | ~4.1.0 | 
To install these dependencies, you can use the following command:
bun add react-native-reanimated@"~4.1.0"
npm install react-native-reanimated@"~4.1.0"
yarn install react-native-reanimated@"~4.1.0"
pnpm install react-native-reanimated@"~4.1.0"