Cards on a 3D ring you spin with a swipe; it snaps and loops forever.
Pro<RingCarousel />3 variantsiOS · Android · Expo Go
9:41
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
Colours, radius and light / dark come from
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| data Items, one card each. | T[] | — |
| renderItem Render a card. `active` is true for the card facing you. | ({ item, index, active }) => ReactNode | — |
| keyExtractor React key for each card. | (item: T, index: number) => string | index |
| itemWidth Card width. | number | 170 |
| itemHeight Card height. | number | 230 |
| spacing Degrees between neighbours. | number | 360 / count (≤ 45) |
| autoplay Turn every 3s (or N ms); pauses while touched. | boolean | number | false |
| index Controlled front card. | number | — |
| defaultIndex Uncontrolled initial front card. | number | 0 |
| onIndexChange Fires when the front card changes. | (index: number) => void | — |
| onPress Tap on the front card. | (item: T, index: number) => void | — |
| pagination Dots under the ring. | boolean | true |
| accent Active dot colour. | string | theme foreground |
| radius Corner radius of each card. | number | 18 |
| style Style for the root view. | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Touch
- Horizontal drags spin the ring and a flick carries it a little further before snapping. Tapping a side card turns to it; tapping the front card calls onPress.
- Motion
- Neighbours turn, shrink and fall into shadow as they go round the back. With autoplay it advances every 3s by default and pauses while touched.
- Screen readers
- The ring is one adjustable element ('2 / 7'): swipe up or down to turn it, double-tap to press the front card. Side cards are hidden.
- Platforms
- The loop runs on the native driver via Animated.modulo. Each card turns in its own flat layer so iOS never slices a side card into the front one.
Source
Did you like the content?