OnboardingCreate a flow

The entire onboarding flow is defined in a single configuration file.

This file describes which steps are shown, in which order, and how data is stored.

You do not create screens manually. You declare steps.

Onboarding config location

The onboarding configuration lives here: src/shared/config/onboarding.config.ts

This file exports a configuration object consumed by the Onboarding component.

Basic structure

A minimal onboarding config looks like this:

tsx

The onboarding engine will:

• Render each step in order
• Store answers automatically
• Handle navigation and persistence

The steps array

steps is an ordered array.

Each object represents one screen in the onboarding flow.

Order matters:

• Steps are shown from top to bottom
• Conditional steps can be skipped (covered later)

Choosing property keys

The property field defines where the answer is stored.

Example: property: "goal"

Result: userData.goal

Best practices:

• Use snake_case or camelCase consistently
• Keep names short and explicit
• Do not reuse the same property twice unless intentional

Example: real-world onboarding flow

tsx

What happens to the data

• Each step writes its result to userData[property]
• Data is merged progressively
• Data is persisted automatically
• Final userData is available once onboarding completes

You can access it anywhere in the app via the store.

Connecting the onboarding to the app

The onboarding config is passed directly to the Onboarding component:

tsx

You usually do this inside the onboarding screen located in:

src/app/(onboarding)/index.tsx