Circular slider
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.