Quick Start

Basic Usage

Import BegynnOnboarding and render it with your placement ID:


import { BegynnOnboarding } from "@begynn/react-native";
 
function OnboardingScreen() {
  return (
    <BegynnOnboarding
      placementId="your-placement-id"
      onComplete={(event) => {
        console.log("Onboarding completed!", event.payload);
      }}
    />
  );
}

The placementId is available in your Begynn dashboard.

User Identification

The SDK automatically generates and persists a unique user ID using AsyncStorage. This ID is maintained across app sessions to ensure consistent user tracking and A/B testing.

Preview Mode

Use isPreview to test your onboarding without being locked on a variant and impacting quotas:


<BegynnOnboarding
  placementId="your-placement-id"
  isPreview
/>

Handling Completion

The onComplete handler receives an event with the user’s choices:


<BegynnOnboarding
  placementId="your-placement-id"
  onComplete={(event) => {
    console.log("Duration:", event.total_duration_ms, "ms");
    console.log("Screens viewed:", event.screens_viewed);
    console.log("User choices:", event.payload);
  }}
/>

The payload object contains user responses from choicelists:


{
  "choicelist-goals": ["fitness", "nutrition"],
  "choicelist-experience": ["beginner"]
}

Handling Exit

Handle early exits with onExit:


<BegynnOnboarding
  placementId="your-placement-id"
  onExit={(event) => {
    console.log("User exited at", event.progress_percentage, "% progress");
  }}
/>