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 One card each; the carousel loops. | T[] | — |
| renderItem Card content (snapshotted). Call onLoad when its images have loaded. | ({ item, index, onLoad }) => ReactNode | — |
| renderBackdrop Layer under the content, blurred toward the bottom. | ({ item, index, onLoad }) => ReactNode | — |
| renderBackground Full-size layer behind the carousel; cross-fades between items as you scroll. | ({ item, index }) => ReactNode | — |
| keyExtractor React key for each card. | (item: T, index: number) => string | index |
| itemLabel What screen readers say for a card. | (item: T, index: number) => string | 'Card N' |
| cardHeight Card height; shrinks to fit short screens. | number | 520 |
| aspect Card width ÷ height. | number | 0.66 |
| gap Space between cards. | number | 12 |
| radius Card corner radius. | number | kit radius.scale(28) |
| lens Strength of the glass bend, 0–1. | number | 1 |
| index Controlled centre card; turns the shortest way round. | number | — |
| defaultIndex Uncontrolled initial card. | number | 0 |
| onIndexChange Fires when the centre card changes. | (index: number) => void | — |
| onFocusChange The centre card opened or closed. | (open: boolean, index: number) => void | — |
| extraData Change it to snapshot every card again. | unknown | — |
| children Drawn above the carousel: a header, buttons. | ReactNode | — |
| style Root style; give it a screen or a tall card. | StyleProp<ViewStyle> | flex: 1 |
Behaviour & accessibility
- Touch
- Drag or flick sideways; a flick always moves at least one card. Tap a side card to turn to it and open it, tap the centre card to open it, tap anywhere to close.
- Lens
- A Skia shader bends the cards at the screen edges, magnified inward with a red/green/blue split. Once the carousel settles, the centre card is drawn sharp.
- Snapshots
- Each card's content is snapshotted into an image, so keep it static. Call onLoad from your images so the card is captured again once they load; change extraData to capture every card again.
- Backdrop
- renderBackdrop draws under the content and is blurred in toward the bottom of the card, so text there stays readable over a photo.
- Screen readers
- One adjustable element ('Sunrise Yoga, 1 of 4'): swipe up or down to change cards; activate and escape open and close.
- Reduced motion
- Scrolling settles faster and opening jumps straight to its end state.
- Web
- No view snapshots there: the cards scroll and open the same way as live views, without the lens.
FAQ
- How do I make a liquid glass carousel in React Native?
- Use ExpoKit's Glass Carousel, a Pro component: with ExpoKit Pro, the ExpoKit CLI copies a ready-made liquid glass carousel into your Expo or React Native app as plain TypeScript you can edit. It works on iOS, Android and web, and in Expo Go.
- Does Glass Carousel work in Expo Go?
- Yes. Glass Carousel runs in Expo Go on iOS and Android with no development build — its packages (
@shopify/react-native-skia,react-native-reanimated,react-native-worklets,react-native-gesture-handler) are all included in Expo Go. - How do I add Glass Carousel to my Expo app?
- With ExpoKit Pro, add it with the ExpoKit CLI: it copies the component's source into your app and installs
@shopify/react-native-skia,react-native-reanimated,react-native-worklets,react-native-gesture-handler, so the code is yours to change. The install command is on this page for Pro members. - Is Glass Carousel free?
- Glass Carousel is part of ExpoKit Pro. With a Pro plan, log the CLI in once (
npx @expokit/cli@latest login) and it installs the full source into your app. - Can I change how Glass Carousel looks?
- Yes. It takes its colours, radius and light / dark mode from
useKit(), so wrapping your app in<KitProvider accent radius>re-skins it with every other ExpoKit component. The code lives in your project, so you can also edit anything directly.
