A snapping carousel whose neighbouring slides shrink, fade or tilt with the scroll.
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| data Items to render, one slide each. | T[] | — |
| renderItem Render a slide. `progress` runs -1 → 0 → 1 across the centre — use it for parallax. | ({ item, index, progress, width }) => ReactNode | — |
| keyExtractor React key for each slide. | (item: T, index: number) => string | index |
| itemWidth Fraction of the carousel (≤ 1) or points. Capped at 460pt for tablets. | number | 0.82 |
| height Slide height. | number | 200 |
| gap Space between slides. | number | 12 |
| effect How neighbours look. | "scale" | "coverflow" | "flat" | "scale" |
| pagination Indicator under the slides; dots are tappable. | "dots" | "expanding" | "bar" | "none" | "dots" |
| autoplay Advance every 3.5s (or N ms); pauses while touched. | boolean | number | false |
| loop Autoplay wraps to the first slide. | boolean | true |
| index Controlled active slide. Pair with onIndexChange so autoplay / swipes update parent state. | number | — |
| defaultIndex Uncontrolled initial slide (ignored when index is set). | number | 0 |
| onIndexChange Fires when the centred slide changes (swipe, dots, autoplay). | (index: number) => void | — |
| accent Active dot / bar colour. | string | theme accent |
| style Style for the root view wrapping the slides and pagination. | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Touch
- Swipe to snap from slide to slide. Autoplay waits while you drag and resumes after.
- Motion
- Slide effects are interpolated from the scroll position on the native driver. renderItem also gets a progress value for your own parallax.
- Screen readers
- The scroller is adjustable, reads "Slide 2 of 5" and supports increment and decrement. Dots are buttons labelled "Go to slide N".
- Web
- Settles on the nearest slide once scrolling stops, since the web has no snap momentum.
Source
Did you like the content?