React Native Onboarding

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

const shown = await AppDNA.presentOnboarding('main_flow');
if (!shown) {
  console.log('Flow config not available — check Console or network');
}

const onboarding = AppDNA.onboarding;

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;
  /** Observe-only: fires after an onboarding permission resolves, however it resolved. */
  onPermissionResult(
    flowId: string,
    stepId: string,
    permissionType: string,
    granted: boolean,
  ): void;

  // Async veto hooks — see "Async Step Hooks" below. Each returns a plain object that native
  // decodes; the TypeScript return type is Record<string, unknown>.
  onBeforeStepAdvance?(
    flowId: string,
    fromStepId: string,
    stepIndex: number,
    stepType: string,
    responses: Record<string, unknown>,
    stepData: Record<string, unknown> | undefined,
  ): Promise<Record<string, unknown>>;

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

  onElementInteraction?(
    flowId: string,
    stepId: string,
    blockId: string,
    action: string,
    value: string | undefined,
    inputValues: Record<string, unknown>,
  ): Promise<Record<string, unknown> | null>;

  onPermissionRequest?(permissionType: string): Promise<Record<string, unknown> | null>;
}

declare const myOnboardingDelegate: AppDNAOnboardingDelegate;

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
  },

  onPermissionResult(flowId, stepId, permissionType, granted) {
    console.log(`${permissionType} permission: ${granted ? 'granted' : 'denied'}`);
  },
};

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

declare const authClient: {
  signIn(a: { email: string; password: string }): Promise<{ id: string }>;
  register(a: { email: string; password: string }): Promise<{ id: string }>;
  requestPasswordReset(a: { email: string }): Promise<void>;
};
declare const otpClient: {
  send(a: { channel: string; to: string }): Promise<void>;
  verify(a: { code: string; recipient: string }): Promise<void>;
};

const biometrics = new ReactNativeBiometrics();

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

  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:
        // {} advances an ordinary step and BLOCKS a sign-in action this switch does not handle —
        // the safe default. Never answer { type: 'proceed' } for a sign-in action you have not
        // actually authenticated.
        return {};
    }
  },
};

AppDNA.onboarding.setDelegate(onboardingHandler);

// ios/AppDelegate.swift
AppDNA.registerCustomView("terms_acceptance") {
    AnyView(TermsAcceptanceView())   // your SwiftUI view
}

// android/app/.../MainApplication.kt
AppDNA.registerCustomView("terms_acceptance") { config ->
    TermsAcceptanceView(config)      // your @Composable
}

const delegate: Pick<AppDNAOnboardingDelegate, 'onOnboardingCompleted'> = {
  onOnboardingCompleted(flowId, responses) {
    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
      console.log(flowId, name, age, email);
    }
  },
};

const delegate: Pick<AppDNAOnboardingDelegate, 'onOnboardingCompleted'> = {
  onOnboardingCompleted(flowId, responses) {
    const flags = (responses['flags'] as Record<string, unknown> | undefined) ?? {};

    if (flags['upsell_choice'] === 'booking') {
      console.log(flowId, 'route to booking');
    }
    if (flags['wants_callback'] === 'true') {
      console.log(flowId, 'schedule a callback');
    }
  },
};

const delegate: Pick<AppDNAOnboardingDelegate, 'onOnboardingCompleted'> = {
  onOnboardingCompleted(flowId, responses) {
    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
  });
});

declare function validateReferralCode(code: string): Promise<boolean>;

const delegate: Pick<AppDNAOnboardingDelegate, 'onBeforeStepAdvance'> = {
  async onBeforeStepAdvance(flowId, fromStepId, stepIndex, stepType, responses, stepData) {
    // This hook handles no sign-in action. A step advanced by a button action — a sign-in action
    // among them — gets {}: it advances an ordinary step and BLOCKS a sign-in action. Never answer
    // { type: 'proceed' } for a sign-in action you have not actually authenticated.
    if (stepData?.action) return {};

    // 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 } };
      }
    }
    // {} advances this step; it would block a sign-in action, so it is the safe catch-all.
    return {};
  },
};

AppDNA.onboarding.setDelegate(delegate as AppDNAOnboardingDelegate);

declare const myAuthBackend: { sendPasswordReset(args: { to: string }): Promise<void> };

const delegate: Pick<AppDNAOnboardingDelegate, 'onBeforeStepAdvance'> = {
  async onBeforeStepAdvance(flowId, fromStepId, stepIndex, stepType, responses, stepData) {
    switch (stepData?.action) {
      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." };
        }
      }
      default:
        // {} advances an ordinary step and blocks any sign-in action this switch does not handle.
        return {};
    }
  },
};

declare const currentUser: { email: string; displayName: string; firstName: string };

const delegate: Pick<AppDNAOnboardingDelegate, 'onBeforeStepRender'> = {
  async onBeforeStepRender(flowId, stepId, stepIndex, stepType, responses) {
    // 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;
  },
};

declare const api: { verifyCode(code: string): Promise<boolean> }; // your client

const delegate: Pick<AppDNAOnboardingDelegate, 'onElementInteraction'> = {
  async onElementInteraction(flowId, stepId, blockId, action, value, inputValues) {
    if (action === 'otp_entered' && typeof value === 'string') {
      const ok = await api.verifyCode(value); // your client, your auth
      return ok ? { inputValuePatches: { phone_verified: true }, advance: true } : null;
    }
    return null;
  },
};

const delegate: Pick<AppDNAOnboardingDelegate, 'onPermissionRequest' | 'onPermissionResult'> = {
  async onPermissionRequest(permissionType) {
    if (permissionType === 'notifications' && __DEV__) {
      return { handledByHost: true, granted: true }; // never prompt in dev builds
    }
    return null;
  },

  onPermissionResult(flowId, stepId, permissionType, granted) {
    console.log(`${permissionType} → ${granted}`);
  },
};

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

declare const myBackend: {
  booking(stepId: string): Promise<{ unitPrice: number; venueName: string }>;
};

const delegate: Pick<AppDNAOnboardingDelegate, 'onBeforeStepRender'> = {
  async onBeforeStepRender(flowId, stepId, stepIndex, stepType, responses) {
    const booking = await myBackend.booking(stepId);   // your client, your auth
    return {
      dataContext: {
        booking: { unitPrice: booking.unitPrice, venue: booking.venueName },
      },
    };
  },
};

{ "type": "image", "image_url": "https://…/uploaded-fallback.png",
  "data_templates": { "image_url": "{{hook_data.hero.imageUrl}}" } }

declare const venueBackend: {
  recommendations(responses: Record<string, unknown>): Promise<
    Array<{ id: string; name: string; region: string; photoUrl: string }>
  >;
};

const venueDelegate: Pick<AppDNAOnboardingDelegate, 'onBeforeStepRender'> = {
  async onBeforeStepRender(flowId, stepId, stepIndex, stepType, responses) {
    if (stepId !== 'step8') return null;
    const venues = await venueBackend.recommendations(responses);   // your client, your auth
    return {
      dataContext: {
        recommendations: venues.map((w) => ({
          id: w.id, name: w.name, subtitle: w.region, imageUrl: w.photoUrl,
        })),
      },
    };
  },
};

// Your own model and client — declared here so the snippet stands alone.
type Venue = { id: string; name: string; region: string; photoUrl: string };
declare const myBackend: { recommendations(page: { after: number }): Promise<Venue[]> };

// Your paging state, per step. Also answer onBeforeStepRender with it on a revisit (below).
const shownVenues = new Map<string, Venue[]>();

const delegate: Pick<AppDNAOnboardingDelegate, 'onElementInteraction'> = {
  async onElementInteraction(flowId, stepId, blockId, action, value, inputValues) {
    if (action !== 'refresh' || stepId !== 'step8') return null; // value === 'recs_more'
    const shown = shownVenues.get(stepId) ?? [];
    const all = [...shown, ...(await myBackend.recommendations({ after: shown.length }))]; // your client
    shownVenues.set(stepId, all);
    return {
      dataContext: {
        // The WHOLE list so far — page 1 + page 2 … — under the key the Select repeats over.
        recommendations: all.map((w) => ({ id: w.id, name: w.name, subtitle: w.region, imageUrl: w.photoUrl })),
      },
      advance: false,
    };
  },
};

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-ai/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');
      },

      onPermissionResult(flowId, stepId, permissionType, granted) {
        // Observe-only
      },
    };

    // Pass null to clear the delegate; registering a new one replaces it.
    AppDNA.onboarding.setDelegate(delegate);
    showOnboardingIfNeeded();
  }, [navigation]);

  async function showOnboardingIfNeeded() {
    // `present` takes the flow ID and nothing else, and resolves `false` when there was no
    // view controller / activity to present from.
    const presented = await AppDNA.onboarding.present('main_flow');
    if (!presented) {
      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: Pick<AppDNAPaywallDelegate, 'onPaywallRestoreCompleted'> = {
  // ... plus the other 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 as AppDNAPaywallDelegate);

const paywallDelegate: Pick<AppDNAPaywallDelegate, 'onPaywallRestoreCompleted'> = {
  // ... plus the other AppDNAPaywallDelegate methods

  onPaywallRestoreCompleted(paywallId, productIds) {
    // Update your own state (e.g., unlock content).
    // No need to dismiss anything yourself: the SDK dismisses on its own,
    // and this handler runs after that decision. (Earlier revisions of this page told
    // you to call `AppDNA.paywall.dismiss()` — no such method has ever
    // existed on any platform. There is no host-callable paywall dismiss;
    // the SDK owns the paywall's lifecycle.)
  },
};

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.