Onboarding

The onboarding flow is the first thing users see when they open your app. It is designed to introduce your app's features and guide users through an initial setup experience.

CLI Configuration

During project setup, you can configure the following onboarding options:

Number of Pages

Choose between 1-5 onboarding pages. Each page is a separate screen that users swipe through.

Skip Button

Optionally include a skip button that allows users to bypass the onboarding flow entirely.

Show Paywall

When enabled, users are shown the paywall screen after completing onboarding.

Requires RevenueCat

The "Show Paywall" option requires RevenueCat integration to be enabled.

File Structure

Onboarding screens are generated in the mobile/app/(onboarding)/ directory:

mobile/app/(onboarding)/
├── _layout.tsx      # Stack navigator layout
├── page-1.tsx       # First onboarding screen
├── page-2.tsx       # Second onboarding screen (if pages >= 2)
└── page-3.tsx       # Third onboarding screen (if pages >= 3)

Customization

Each onboarding page uses the OnboardingLayout component. Customize the content by editing the individual page files:

// mobile/app/(onboarding)/page-1.tsx
import OnboardingLayout from '@/components/ui/OnboardingLayout';

export default function OnboardingPage1() {
const handleContinue = () => {
  router.replace('/(onboarding)/page-2');
};

return (
  <OnboardingLayout
    title="Welcome to Your App"
    subtitle="Get started with powerful features."
    pageIndicators={1}
    totalPages={3}
    onContinue={handleContinue}
  >
    <View style={styles.imageContainer}>
      <Image
        source={require('@/assets/images/onboarding_page_1.png')}
        resizeMode="contain"
      />
    </View>
  </OnboardingLayout>
);
}

Onboarding Assets

Default placeholder images are included in mobile/assets/images/:

mobile/assets/images/
├── onboarding_page_1.png
├── onboarding_page_2.png
└── onboarding_page_3.png

Replace these with your own images to customize the onboarding experience.