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