# Glass Carousel — React Native component for Expo

> Swipe cards through a liquid-glass lens; tap one to lift it while the rest fall away.

A full-screen carousel seen through liquid glass: as you swipe, the cards bend inward at the screen edges with a rainbow fringe while the settled card stays sharp. Cards shrink with speed and snap on a critically damped spring. Tap the centre card and it lifts while the others fall away in a stagger; tap again to bring them back. Backgrounds cross-fade with the scroll.

- Docs: https://expokit.in/docs/components/glass-carousel
- Tier: Pro (ExpoKit Pro plan)
- Also called: liquid glass carousel, full screen card carousel, glass swiper
- Category: Glass
- Platforms: iOS, Android, web
- Expo Go: yes, no development build needed
- npm dependencies: @shopify/react-native-skia, react-native-reanimated, react-native-worklets, react-native-gesture-handler
- Uses ExpoKit items: kit
- Variants: Invites, Albums

## Installation

This component is part of ExpoKit Pro. With a Pro plan, log the CLI in once and add it like any other item:

```bash
npx @expokit/cli@latest login
```

Plans: https://expokit.in/pricing

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data` | `T[]` | — | One card each; the carousel loops. |
| `renderItem` | `({ item, index, onLoad }) => ReactNode` | — | Card content (snapshotted). Call onLoad when its images have loaded. |
| `renderBackdrop` | `({ item, index, onLoad }) => ReactNode` | — | Layer under the content, blurred toward the bottom. |
| `renderBackground` | `({ item, index }) => ReactNode` | — | Full-size layer behind the carousel; cross-fades between items as you scroll. |
| `keyExtractor` | `(item: T, index: number) => string` | `index` | React key for each card. |
| `itemLabel` | `(item: T, index: number) => string` | `'Card N'` | What screen readers say for a card. |
| `cardHeight` | `number` | `520` | Card height; shrinks to fit short screens. |
| `aspect` | `number` | `0.66` | Card width ÷ height. |
| `gap` | `number` | `12` | Space between cards. |
| `radius` | `number` | `kit radius.scale(28)` | Card corner radius. |
| `lens` | `number` | `1` | Strength of the glass bend, 0–1. |
| `index` | `number` | — | Controlled centre card; turns the shortest way round. |
| `defaultIndex` | `number` | `0` | Uncontrolled initial card. |
| `onIndexChange` | `(index: number) => void` | — | Fires when the centre card changes. |
| `onFocusChange` | `(open: boolean, index: number) => void` | — | The centre card opened or closed. |
| `extraData` | `unknown` | — | Change it to snapshot every card again. |
| `children` | `ReactNode` | — | Drawn above the carousel: a header, buttons. |
| `style` | `StyleProp<ViewStyle>` | `flex: 1` | Root style; give it a screen or a tall card. |

## 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 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.

## More

- Live preview, variants and code: https://expokit.in/docs/components/glass-carousel
- Every ExpoKit component, screen, template and chart: https://expokit.in/llms.txt
- Install commands and props for every free component: https://expokit.in/llms-full.txt
- Pricing: https://expokit.in/pricing