React Native screen for ExpoWelcome Deck
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.
Also known as: welcome screen, card fan onboarding, sign up screen with carousel, fintech landing screen.
Installation
Copies the screen into src/components/blocks along with every component it uses.
Props
| Prop | Type | Default |
|---|---|---|
| slides One card and headline each. highlight is a phrase inside title drawn in the accent; card replaces the photo with your own content. | { title, highlight?, image?, card? }[] | — |
| onProvider A sign-up button was pressed. | (provider: 'apple' | 'google' | 'email') => void | — |
| providers Sign-up buttons in order. | ('apple' | 'google' | 'email')[] | ['apple', 'google', 'email'] |
| title / subtitle Heading and line under it on the sign-up step. | string | 'Get started' / 'Your money, one tap away' |
| terms Small print under the sign-up buttons (a string or your own node with links). | ReactNode | — |
| getStartedLabel / logInLabel Welcome button text; both open the sign-up step. | string | 'Get started' / 'Log in' |
| defaultOpen Start on the sign-up step. | boolean | false |
| onOpenChange Get started / Log in opened the sign-up step, or back closed it. | (open: boolean) => void | — |
| onIndexChange The front card changed (an index into slides). | (index: number) => void | — |
| accent Colour of the highlighted words. | string | theme accent |
| style Root style. | StyleProp<ViewStyle> | — |
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 (
npx @expokit/cli@latest login) 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.
