Examples

import { useRef } from "react";
import { View, ActivityIndicator, Alert } from "react-native";
import {
  BegynnOnboarding,
  BegynnOnboardingRef,
  OnboardingCompleteEvent,
  OnboardingExitEvent,
} from "@begynn/react-native";
 
function OnboardingScreen({ onFinish }) {
  const ref = useRef<BegynnOnboardingRef>(null);
 
  const handleComplete = (event: OnboardingCompleteEvent) => {
    console.log("Completed in", event.total_duration_ms, "ms");
    console.log("User choices:", event.payload);
    onFinish();
  };
 
  const handleExit = (event: OnboardingExitEvent) => {
    Alert.alert(
      "Exit Onboarding?",
      `You're ${event.progress_percentage}% done.`,
      [
        { text: "Continue", onPress: () => ref.current?.reload() },
        { text: "Exit", onPress: onFinish },
      ],
    );
  };
 
  return (
    <BegynnOnboarding
      ref={ref}
      placementId="onboarding-v2"
      debug={__DEV__}
      containerStyle={{ flex: 1 }}
      renderLoading={() => (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
          <ActivityIndicator size="large" />
        </View>
      )}
      onComplete={handleComplete}
      onExit={handleExit}
      onError={(error) => console.error("Onboarding error:", error)}
    />
  );
}

import { View, Text, ActivityIndicator } from "react-native";
import { BegynnOnboarding } from "@begynn/react-native";
 
function OnboardingScreen() {
  return (
    <BegynnOnboarding
      placementId="your-placement-id"
      renderLoading={() => (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "#f5f5f5" }}>
          <ActivityIndicator size="large" color="#007AFF" />
          <Text style={{ marginTop: 16, color: "#666" }}>Loading onboarding...</Text>
        </View>
      )}
    />
  );
}

import { BegynnOnboarding, SDKEvent } from "@begynn/react-native";
import analytics from "@react-native-firebase/analytics";
 
function OnboardingScreen() {
  const handleEvent = (event: SDKEvent) => {
    analytics().logEvent(`onboarding_${event.type}`, {
      onboarding_id: event.onboarding_id,
      session_id: event.session_id,
      timestamp: event.timestamp,
    });
  };
 
  return (
    <BegynnOnboarding
      placementId="your-placement-id"
      onEvent={handleEvent}
      onComplete={(event) => {
        analytics().logEvent("onboarding_complete", {
          duration_ms: event.total_duration_ms,
          screens_viewed: event.screens_viewed,
        });
      }}
    />
  );
}

import { useRef } from "react";
import { Button, View } from "react-native";
import { BegynnOnboarding, BegynnOnboardingRef } from "@begynn/react-native";
 
function OnboardingScreen() {
  const ref = useRef<BegynnOnboardingRef>(null);
 
  return (
    <View style={{ flex: 1 }}>
      <BegynnOnboarding
        ref={ref}
        placementId="your-placement-id"
        containerStyle={{ flex: 1 }}
      />
      <Button title="Reload" onPress={() => ref.current?.reload()} />
    </View>
  );
}