Swipeable pages that turn like the faces of a cube, with flick momentum.
Pro<CubePager />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 |
|---|---|---|
| children One child per page. | ReactNode | — |
| height Page height. | number | 260 |
| effect Outside of a cube, its inner walls, or each page spinning in place. | "cube" | "inside" | "flip" | "cube" |
| index Controlled page. | number | — |
| defaultIndex Uncontrolled initial page. | number | 0 |
| onIndexChange Fires when the page changes. | (index: number) => void | — |
| pagination Dots under the pager. | boolean | true |
| shade Darken faces as they turn away. | boolean | true |
| accent Active dot colour. | string | theme foreground |
| radius Corner radius of the pages. | number | 20 |
| disabled Turn swiping off (dots and a controlled index still work). | boolean | false |
| style Style for the root view. | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Touch
- Pages follow your finger. A quick flick or a drag past 35% turns the page, and the first and last pages rubber-band.
- Motion
- Pages rotate around their shared edge in 3D (cube, inside or flip) and darken as they turn away when shade is on.
- Screen readers
- The pager is adjustable with a "2 / 5" value and increment and decrement actions. Off-screen pages are hidden and dots are buttons.
Source
Did you like the content?