# Welcome Deck — React Native screen for Expo

> A 3D card fan you throw in any direction, then a sign-up carousel.

A welcome and sign-up screen built around a 3D fan of cards. Grab anywhere and drag — the front card follows your finger in any direction, turning and swinging in 3D; let go and it's thrown off the screen while the next card moves to the front and the headline blurs into the next one, its key words in your accent. Get started or Log in flattens the fan into a swipeable carousel and brings up Continue with Apple / Google / email; back folds it into a fan again.

- Docs: https://expokit.in/docs/blocks/welcome-deck
- Tier: Pro (ExpoKit Pro plan)
- Also called: welcome screen, card fan onboarding, sign up screen with carousel, fintech landing screen
- Category: Blocks
- Platforms: iOS, Android, web
- Expo Go: yes, no development build needed
- npm dependencies: expo-blur, react-native-svg
- Uses ExpoKit items: kit
- Variants: Default

## Installation

This screen 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 |
| --- | --- | --- | --- |
| `slides` | `{ title, highlight?, image?, card? }[]` | — | One card and headline each. highlight is a phrase inside title drawn in the accent; card replaces the photo with your own content. |
| `onProvider` | `(provider: 'apple' \| 'google' \| 'email') => void` | — | A sign-up button was pressed. |
| `providers` | `('apple' \| 'google' \| 'email')[]` | `['apple', 'google', 'email']` | Sign-up buttons in order. |
| `title / subtitle` | `string` | `'Get started' / 'Your money, one tap away'` | Heading and line under it on the sign-up step. |
| `terms` | `ReactNode` | — | Small print under the sign-up buttons (a string or your own node with links). |
| `getStartedLabel / logInLabel` | `string` | `'Get started' / 'Log in'` | Welcome button text; both open the sign-up step. |
| `defaultOpen` | `boolean` | `false` | Start on the sign-up step. |
| `onOpenChange` | `(open: boolean) => void` | — | Get started / Log in opened the sign-up step, or back closed it. |
| `onIndexChange` | `(index: number) => void` | — | The front card changed (an index into slides). |
| `accent` | `string` | `theme accent` | Colour of the highlighted words. |
| `style` | `StyleProp<ViewStyle>` | — | Root style. |

## Behaviour & accessibility

- **Deck**: Drag from anywhere on the screen, in any direction: the front card follows your finger and the cards behind start moving up. Let go past a short distance (or flick) and it's thrown that way; a short drag glides back. Each thrown card fades in again at the back of the fan. Nothing moves on its own.
- **Headline**: Starts to blur bit by bit as you drag, then glides into the next one once the card is thrown, with no snap at the end (a real blur on iOS and web; soft copies on Android).
- **Get started / Log in**: Both open the sign-up step: the fan flattens and rises, then spreads into a row centred on the front card that you can swipe; the sign-up buttons slide up and the heading fades in. Back folds the centred card to the front of the fan.
- **Screen readers**: The headline is a header that announces changes; the deck offers Next as an action. Only the current step's buttons are exposed.
- **Reduced motion**: Cards fade instead of flying and the steps crossfade quickly.

## FAQ

### How do I make a welcome screen in React Native?

Use ExpoKit's Welcome Deck, a Pro screen: with ExpoKit Pro, the ExpoKit CLI copies a ready-made welcome screen 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 Welcome Deck work in Expo Go?

Yes. Welcome Deck runs in Expo Go on iOS and Android with no development build — its packages (expo-blur, react-native-svg) are all included in Expo Go.

### How do I add Welcome Deck to my Expo app?

With ExpoKit Pro, add it with the ExpoKit CLI: it copies the screen's source into your app and installs expo-blur, react-native-svg, so the code is yours to change. The install command is on this page for Pro members.

### Is Welcome Deck free?

Welcome Deck 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 Welcome Deck 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 screen. The code lives in your project, so you can also edit anything directly.

## More

- Live preview, variants and code: https://expokit.in/docs/blocks/welcome-deck
- 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