Expo SDK

pnpm add @getrheo/react-native-expo \
  react react-native \
  react-native-permissions react-native-gesture-handler react-native-reanimated \
  react-native-linear-gradient react-native-svg lottie-react-native \
  react-native-vector-icons @react-native-async-storage/async-storage \
  react-native-safe-area-context expo-store-review expo-video

npx expo install @getrheo/react-native-expo \
  react-native-gesture-handler react-native-reanimated \
  react-native-safe-area-context expo-store-review expo-video \
  @react-native-async-storage/async-storage lottie-react-native \
  react-native-svg react-native-linear-gradient react-native-vector-icons \
  react-native-permissions

import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { RheoProvider } from '@getrheo/react-native-expo';

const RootLayout = () => (
  <SafeAreaProvider>
    <GestureHandlerRootView style={{ flex: 1 }}>
      <RheoProvider config={rheoConfig}>
        {/* routes */}
      </RheoProvider>
    </GestureHandlerRootView>
  </SafeAreaProvider>
);

import { buildBrandingFontLoadMap } from '@getrheo/react-native-expo';
import * as Font from 'expo-font';

// After resolve (or from a cached manifest):
const fontMap = buildBrandingFontLoadMap(branding);
await Font.loadAsync(fontMap);

import type { RheoConfig } from '@getrheo/react-native-expo';

const rheoConfig: RheoConfig = {
  publishableKey: 'ob_pk_test_xxxxxxxx',
  // apiBaseUrl: 'http://localhost:4000', // local dev only
  userId: 'user_stable_id',       // required for RN — analytics + experiment bucketing
  sessionId: `sess_${Date.now()}`, // per app launch
  appVersion: '1.4.0',
  locale: 'en',
  customUserId: 'crm_123',         // optional — your backend user id
  customProperties: { tier: 'pro' },
  sdkAttributes: { onboarding_cohort: '2026-q2' }, // decision node inputs
};

import { RheoProvider } from '@getrheo/react-native-expo';

<RheoProvider config={rheoConfig} prefetch="all">
  <App />
</RheoProvider>

<RheoProvider config={rheoConfig} prefetch="all" logLevel="warn">
  <App />
</RheoProvider>

import { Flow } from '@getrheo/react-native-expo';
import type { FlowTerminalSnapshot } from '@getrheo/react-native-expo';

const OnboardingScreen = () => (
  <Flow
    channelId="ch_test_a1b2c3d4"
    theme="dark"
    onFlowCompleted={(payload: FlowTerminalSnapshot) => {
      void fetch('/api/onboarding-complete', {
        method: 'POST',
        body: JSON.stringify(payload),
      });
    }}
    onFlowAbandoned={(payload) => {
      console.log('abandoned', payload.correlation.channelId);
    }}
  />
);

<Flow
  channelId="ch_test_…"
  onOAuthLogin={(payload) => {
    signInWithGoogle()
      .then(() => payload.resolve({ success: true }))
      .catch((err) => payload.resolve({ success: false, error: String(err) }));
  }}
  onEmailPasswordAuth={(payload) => {
    signUp(payload.email, payload.password)
      .then(() => payload.resolve({ success: true }))
      .catch((err) => payload.resolve({ success: false, error: String(err) }));
  }}
/>

import {
  useFlow,
  LayerRenderer,
  ScreenChrome,
  DefaultResolveError,
} from '@getrheo/react-native-expo';

const CustomFlow = ({ channelId }: { channelId: string }) => {
  const {
    loading,
    resolveFailed,
    retry,
    screen,
    manifest,
    state,
    respond,
    branding,
    mediaMap,
    interpolationContext,
    relayNativeButtonAction,
    trackExternalLinkOpened,
    abandon,
  } = useFlow({
    channelId,
    onFlowCompleted: (p) => console.log(p.terminal),
  });

  if (loading) return <ActivityIndicator />;
  if (resolveFailed) return <DefaultResolveError onRetry={retry} />;
  if (!screen || !manifest) return null;

  return (
    <ScreenChrome screen={screen} branding={branding} theme="light">
      <LayerRenderer
        manifest={manifest}
        screen={screen}
        locale="en"
        branding={branding}
        mediaMap={mediaMap}
        interpolationContext={interpolationContext}
        onRespond={respond}
        relayNativeButtonAction={relayNativeButtonAction}
        trackExternalLinkOpened={trackExternalLinkOpened}
        flowState={state}
      />
    </ScreenChrome>
  );
};

import { useRheoCustomUserId } from '@getrheo/react-native-expo';

const ProfileLinked = () => {
  const { customUserId, setCustomUserId } = useRheoCustomUserId();

  useEffect(() => {
    if (user?.crmId) setCustomUserId(user.crmId);
  }, [user?.crmId, setCustomUserId]);

  return <Flow channelId="ch_test_…" />;
};

<RheoProvider config={config} prefetch="all">
  {/* warms every assigned channel via POST /v1/sdk/resolve-all */}
</RheoProvider>

<RheoProvider config={config} prefetch={['ch_test_paywall', 'ch_test_onboarding']}>
  {/* selective */}
</RheoProvider>

import { prefetch, prefetchAll, useRheoPrefetch } from '@getrheo/react-native-expo';

// After RheoProvider has mounted once:
await prefetch('ch_test_onboarding');
await prefetchAll();

// Inside a component:
const { prefetch, prefetchAll } = useRheoPrefetch();

<Flow
  channelId="ch_test_…"
  fallback={<OfflineOnboarding />}
/>

npx expo install expo-store-review

import {
  clearManifestResolveCache,
  listManifestResolveCacheEntries,
  manifestResolveCacheKey,
} from '@getrheo/react-native-expo';