Skip to main content

​
Onboarding Screen

Multi-step onboarding flow to collect user preferences.

​
File

app/onboarding.tsx

​
Customizing Steps

Each step has:
  • Title - Main heading
  • Subtitle - Supporting text
  • Options - For selection steps
  • Visual - Image or animation

​
Example

const STEPS = [
  {
    id: 'welcome',
    type: 'welcome',
    title: 'Welcome to MyApp',
    subtitle: 'The best app for X',
  },
  {
    id: 'goals',
    type: 'options',
    title: 'What brings you here?',
    options: [
      { id: 'goal1', label: 'Goal 1', emoji: '🎯' },
      { id: 'goal2', label: 'Goal 2', emoji: '🚀' },
    ],
    multiSelect: true,
  },
];

​
Best Practices

  • Keep it short: 3-5 steps max
  • Each step should have clear purpose
  • Use visuals when possible