React Native Onboarding

import { AppDNA } from '@appdna/react-native-sdk';

try {
  await AppDNA.presentOnboarding('main_flow');
} catch (e) {
  console.log('Flow config not available — check Console or network:', e);
}

const onboarding = AppDNA.onboarding;

const context: OnboardingContext = {
  source: 'app_launch',
  campaign: 'winter_2025',
  referrer: 'social_ad',
  userProperties: { locale: 'en_US' },
  experimentOverrides: { onboarding_variant: 'b' },
};

await AppDNA.onboarding.present('main_flow', context);

interface AppDNAOnboardingDelegate {
  onOnboardingStarted(flowId: string): void;
  onOnboardingStepChanged(
    flowId: string,
    stepId: string,
    stepIndex: number,
    totalSteps: number,
  ): void;
  onOnboardingCompleted(flowId: string, responses: Record<string, unknown>): void;
  onOnboardingDismissed(flowId: string, atStep: number): void;

  // Async hooks — see "Async Step Hooks" below
  onBeforeStepAdvance?(
    flowId: string,
    fromStepId: string,
    stepIndex: number,
    stepType: string,
    responses: Record<string, unknown>,
    stepData: Record<string, unknown> | null,
  ): Promise<StepAdvanceResult>;

  onBeforeStepRender?(
    flowId: string,
    stepId: string,
    stepIndex: number,
    stepType: string,
    responses: Record<string, unknown>,
  ): Promise<StepConfigOverride | null>;
}

AppDNA.onboarding.setDelegate(myOnboardingDelegate);

const onboardingHandler: AppDNAOnboardingDelegate = {
  onOnboardingStarted(flowId) {
    console.log(`Onboarding started: ${flowId}`);
  },

  onOnboardingStepChanged(flowId, stepId, stepIndex, totalSteps) {
    console.log(`Step ${stepIndex + 1}/${totalSteps}: ${stepId}`);
    // Update progress indicator
  },

  onOnboardingCompleted(flowId, responses) {
    console.log(`Onboarding completed: ${flowId}`);
    console.log('User responses:', responses);
    // Navigate to main app screen
    // Use responses to personalize the experience
  },

  onOnboardingDismissed(flowId, atStep) {
    console.log(`Onboarding dismissed at step ${atStep}`);
    // Handle early exit — maybe show again later
  },
};

import { AppDNA, StepAdvanceResult, AppDNAOnboardingDelegate } from '@appdna/react-native-sdk';
import ReactNativeBiometrics from 'react-native-biometrics';

const biometrics = new ReactNativeBiometrics();

const onboardingHandler: AppDNAOnboardingDelegate = {
  onOnboardingStarted: () => {},
  onOnboardingStepChanged: () => {},
  onOnboardingCompleted: () => {},
  onOnboardingDismissed: () => {},

  async onBeforeStepAdvance(flowId, fromStepId, stepIndex, stepType, responses, stepData) {
    const action = stepData?.action as string | undefined;
    if (!action) return { type: 'proceed' };

    switch (action) {
      case 'login': {
        const email = (stepData?.email as string) ?? '';
        const password = (stepData?.password as string) ?? '';
        try {
          const user = await authClient.signIn({ email, password });
          return { type: 'proceedWithData', data: { user_id: user.id } };
        } catch {
          return { type: 'block', message: 'Invalid email or password.' };
        }
      }

      case 'register': {
        const email = (stepData?.email as string) ?? '';
        const password = (stepData?.password as string) ?? '';
        try {
          const user = await authClient.register({ email, password });
          return { type: 'proceedWithData', data: { user_id: user.id } };
        } catch {
          return { type: 'block', message: "Couldn't create account — try a different email." };
        }
      }

      case 'reset_password': {
        const email = (stepData?.email as string) ?? '';
        try {
          await authClient.requestPasswordReset({ email });
        } catch {
          // Stay quiet; we always show the same confirmation banner
        }
        // Stay on step; show inline confirmation banner.
        return {
          type: 'stay',
          message: `If an account exists for ${email}, we've emailed a reset link.`,
        };
      }

      case 'request_otp': {
        // Fail explicitly when the SDK couldn't resolve the channel
        // (step has both phone and email inputs, or neither). Set the
        // button's action_value in the Console to disambiguate.
        const channel = stepData?.channel as string | undefined;
        const recipient = stepData?.recipient as string | undefined;
        if (!channel || !recipient) {
          return {
            type: 'block',
            message: "Couldn't determine OTP delivery channel — please contact support.",
          };
        }
        try {
          await otpClient.send({ channel, to: recipient });
          return { type: 'proceed' };
        } catch {
          return { type: 'block', message: "Couldn't send code — please retry." };
        }
      }

      case 'verify_otp': {
        const code = stepData?.otp_code as string | undefined;
        const recipient = stepData?.recipient as string | undefined;
        if (!code || !recipient) {
          return { type: 'block', message: 'Missing code or recipient.' };
        }
        try {
          await otpClient.verify({ code, recipient });
          return { type: 'proceed' };
        } catch {
          return { type: 'block', message: "Code didn't match — try again." };
        }
      }

      case 'enable_biometric': {
        const { available } = await biometrics.isSensorAvailable();
        if (!available) return { type: 'proceed' };
        const { success } = await biometrics.simplePrompt({
          promptMessage: 'Enable Face ID / Fingerprint for faster sign-in',
        });
        return { type: 'proceedWithData', data: { biometric_enabled: success } };
      }

      default:
        return { type: 'proceed' };
    }
  },
};

AppDNA.onboarding.setDelegate(onboardingHandler);

import { AppDNA } from '@appdna/react-native-sdk';
import { TermsAcceptanceView, MyCustomView } from './components';

AppDNA.registerCustomView('my_view', (config) => <MyCustomView config={config} />);

// Register before presenting the onboarding flow
AppDNA.registerCustomView(
  'terms_acceptance',
  (config) => (
    <TermsAcceptanceView
      config={config}
      onAccept={(accepted) => {
        // Handle acceptance
      }}
    />
  ),
);

onOnboardingCompleted(flowId: string, responses: Record<string, unknown>) {
  const formData = responses['profile_step'] as Record<string, unknown> | undefined;
  if (formData) {
    const name = formData['full_name'] as string | undefined;
    const age = formData['age'] as number | undefined;
    const email = formData['email'] as string | undefined;
    // Use collected data to personalize the experience
  }
}

onOnboardingCompleted(flowId: string, responses: Record<string, unknown>) {
  const formData = responses['location_step'] as Record<string, unknown> | undefined;
  const location = formData?.user_location as Record<string, unknown> | undefined;
  if (location) {
    console.log('City:', location.city);                  // "New York"
    console.log('Country:', location.country_code);       // "US"
    console.log('Timezone:', location.timezone);          // "America/New_York"
    console.log('Coords:', location.latitude, location.longitude);
  }
}

Welcome from {{onboarding.location_step.user_location.city}}!
Your timezone: {{onboarding.location_step.user_location.timezone}}

{
  "event": "chat_message",
  "flow_id": "onboarding_v1",
  "step_id": "chat_intro",
  "app_id": "app_abc123",
  "user_id": "user_xyz",
  "conversation": {
    "turn": 2,
    "user_message": "I've been having vivid dreams lately",
    "max_turns": 5,
    "remaining_turns": 3,
    "messages": [
      { "role": "ai",   "content": "Hi, what brings you here?",       "id": "msg_a0", "timestamp": "2026-04-15T10:00:00Z" },
      { "role": "user", "content": "I've been having vivid dreams...", "id": "msg_u1", "timestamp": "2026-04-15T10:00:12Z" }
    ]
  },
  "context": { "threadId": "thread_UXJWTKpSvBRWpGEhHLXqnA6O" },
  "rating": null
}

{
  "action": "reply",
  "messages": [
    { "content": "Tell me more about the most recent one." }
  ]
}

app.post('/chat', async (req, res) => {
  const { conversation } = req.body;
  const userMessage = conversation.user_message;

  const replyText = await myLLM.complete(userMessage);

  res.json({
    action: 'reply',
    messages: [{ content: replyText }],
  });
});

app.post('/chat', async (req, res) => {
  const { conversation, context } = req.body;

  // Resume if we have a threadId; create a fresh one otherwise
  let threadId = context?.threadId;
  if (!threadId) {
    threadId = await aiService.createThread();
  }

  let replyText;
  try {
    replyText = await aiService.sendMessage(threadId, conversation.user_message);
  } catch (err) {
    // Thread expired or invalid — start fresh and retry once
    if (err.code === 'thread_expired') {
      threadId = await aiService.createThread();
      replyText = await aiService.sendMessage(threadId, conversation.user_message);
    } else {
      throw err;
    }
  }

  res.json({
    action: 'reply',
    messages: [{ content: replyText }],
    data: { threadId },   // round-tripped to every subsequent call
  });
});

async onBeforeStepAdvance(
  flowId: string,
  fromStepId: string,
  stepIndex: number,
  stepType: string,
  responses: Record<string, unknown>,
  stepData: Record<string, unknown> | null,
): Promise<StepAdvanceResult> {
  // Example: validate a referral code with your backend
  if (stepType === 'form') {
    const stepResponses = responses[fromStepId] as Record<string, unknown> | undefined;
    const code = stepResponses?.referral_code as string | undefined;
    if (code) {
      const isValid = await validateReferralCode(code);
      if (!isValid) {
        return { type: 'block', message: 'Invalid referral code. Please try again.' };
      }
      return { type: 'proceedWithData', data: { referral_validated: true } };
    }
  }
  return { type: 'proceed' };
}

case 'reset_password': {
  const email = ((responses[fromStepId] as Record<string, unknown>)?.email as string) ?? '';
  try {
    await myAuthBackend.sendPasswordReset({ to: email });
    return { type: 'stay', message: `Reset email sent to ${email}` };
  } catch {
    return { type: 'block', message: "Couldn't send reset email. Please try again." };
  }
}

async onBeforeStepRender(
  flowId: string,
  stepId: string,
  stepIndex: number,
  stepType: string,
  responses: Record<string, unknown>,
): Promise<StepConfigOverride | null> {
  // Pre-fill form fields based on user data
  if (stepId === 'profile_step') {
    return {
      fieldDefaults: {
        email: currentUser.email,
        name: currentUser.displayName,
      },
      title: `Welcome back, ${currentUser.firstName}!`,
    };
  }
  return null;
}

// Example: Two buttons side by side, equally spaced
Row (direction: horizontal, distribution: equal)
  ├── Button "Skip"
  └── Button "Continue"

Step 1: "What's your fitness goal?"
  → "Lose weight"  → Step 2a: Weight loss program
  → "Build muscle" → Step 2b: Muscle building program
  → "Stay active"  → Step 2c: General fitness

import React, { useEffect } from 'react';
import { View, ActivityIndicator } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { AppDNA, AppDNAOnboardingDelegate } from '@appdna/react-native-sdk';

export function OnboardingScreen() {
  const navigation = useNavigation();

  useEffect(() => {
    const delegate: AppDNAOnboardingDelegate = {
      onOnboardingStarted(flowId) {
        console.log(`Starting flow: ${flowId}`);
      },

      onOnboardingStepChanged(flowId, stepId, stepIndex, totalSteps) {
        // Track progress
      },

      onOnboardingCompleted(flowId, responses) {
        // Personalize based on responses
        const goal = responses['fitness_goal'] as string | undefined;
        if (goal) {
          AppDNA.identify('current_user_id', { fitness_goal: goal });
        }
        navigation.replace('Home');
      },

      onOnboardingDismissed(flowId, atStep) {
        navigation.replace('Home');
      },
    };

    AppDNA.onboarding.setDelegate(delegate);
    showOnboardingIfNeeded();

    return () => {
      AppDNA.onboarding.setDelegate(null);
    };
  }, [navigation]);

  async function showOnboardingIfNeeded() {
    try {
      await AppDNA.onboarding.present('main_flow', { source: 'app_launch' });
    } catch (e) {
      // No active flow or config not loaded yet
      navigation.replace('Home');
    }
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <ActivityIndicator />
    </View>
  );
}

☑ Skip if user already has an active subscription   ← default for new + legacy nodes

const hasSub = await AppDNA.billing.hasActiveSubscription();

const paywallDelegate: AppDNAPaywallDelegate = {
  // ... other 8 AppDNAPaywallDelegate methods

  onPaywallRestoreCompleted(paywallId, restoredProductIds) {
    if (restoredProductIds.length > 0) {
      console.log(`Restored ${restoredProductIds.length} product(s) — SDK is dismissing the paywall.`);
    } else {
      console.log('Restore returned no entitlements — paywall stays open.');
    }
  },
};

AppDNA.paywall.setDelegate(paywallDelegate);

const paywallDelegate: AppDNAPaywallDelegate = {
  // ... other 8 methods

  onPaywallRestoreCompleted(paywallId, productIds) {
    // Your custom UI handling — show overlay, etc.
    // No need to call dismiss() yourself; the SDK auto-dismiss path
    // handles dismissal once your synchronous body returns. If you
    // want to suppress the SDK auto-dismiss (e.g., to show your own
    // overlay), call AppDNA.paywall.dismiss() inside this method first
    // — the dispatchedDismiss guard prevents a second auto-dismiss.
  },
};

await AppDNA.identify('user_abc', { plan: 'free' });
// Native entitlement cache is refreshed in the background.
// The next paywall_trigger node will see the updated state.