An iOS alarm-style picker whose rows curve away on a 3D cylinder.
Pro<WheelList />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 Rows. | T[] | — |
| getLabel Text for default rows. | (item: T) => string | String(item) |
| renderItem Custom row; `active` is the row in the band. | ({ item, index, active }) => ReactNode | — |
| value Controlled selected index. | number | — |
| defaultValue Uncontrolled initial index. | number | 0 |
| onValueChange Fires as the selection changes. | (index: number, item: T) => void | — |
| itemHeight Row height. | number | 44 |
| visible Rows visible at once (odd numbers centre the band). | number | 5 |
| curve Degrees each row curves away from the band. | number | 22 |
| bandColor Selection band colour. | string | faint foreground |
| textColor Text colour of default rows — white on a photo or dark panel. | string | theme foreground |
| fadeColor Colour of the surface behind the wheel; rows fade into it top and bottom. | string | — |
| align Text alignment for default rows. | "left" | "center" | "right" | "center" |
| accessibilityLabel What the wheel picks, for screen readers. | string | — |
| style Style for the root (width). | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Touch
- Flick to spin and it snaps to a row; tap a row to scroll it into the band.
- Motion
- Each row rotates, scales and fades by its distance from the band, interpolated from the scroll position on the native driver.
- Screen readers
- One adjustable element with increment / decrement actions; its value is the selected label, or "3 / 12" for custom rows.
- Web
- Browsers lack snap momentum, so it settles on the nearest row shortly after scrolling stops.
Source
Did you like the content?