Onboarding Integration

VibeFast includes a robust onboarding system that supports multi-step flows, Lottie animations, and built-in analytics tracking. It is designed to be easily extensible for feature-specific tutorials or global app onboarding.

How it Works

• Configuration: apps/native/src/features/onboarding/config/onboarding-flow-config.ts defines the steps, categories, and metadata for each flow.
• Demos: The feature includes multiple pre-built flows:
  • DEMO_ONE: A comprehensive, multi-step flow with animations.
  • DEMO_TWO: A minimal, single-screen feature highlight.
  • expense-tracker: A specialized onboarding for the tracker template.
• Analytics: apps/native/src/features/onboarding/services/onboarding-analytics.ts tracks step completions, skips, and flow performance.

Customizing Flows

You can define your own onboarding flow by adding to onboarding-flow-config.ts:

export const MY_CUSTOM_FLOW: OnboardingFlowConfig = {
  flowId: "my_app_intro",
  flowName: "Custom Introduction",
  steps: [
    { id: "step_1", name: "Welcome", index: 0, category: "intro" },
    { id: "step_2", name: "Feature Reveal", index: 1, category: "feature" },
  ],
};

The UI components (OnboardingView, OnboardingStepContainer) automatically consume these configs to render the appropriate screens and navigation.

A/B Testing & Variants

The system supports ONBOARDING_VARIANTS, allowing you to test different flow structures or copy. You can switch between "control" and "experimental" variants using the getOnboardingFlowConfig helper.

Integration

To start an onboarding flow, use the provided hook or navigation helper:

import { useOnboarding } from "@/features/onboarding/hooks/use-onboarding";

const { startFlow } = useOnboarding();

// Trigger the onboarding
startFlow("demoOne");