MobanaProvider

React component that enables flow presentation. Required for startFlow().

When Is It Needed?#

Required for flows: If you use startFlow(), you must wrap your app with this provider.
Not needed for attribution: If you only use attribution and conversion tracking, you can skip the provider.

Usage#

App.tsx

import { MobanaProvider } from '@mobana/react-native-sdk';

export default function App() {
  return (
    <MobanaProvider>
      {/* Your app */}
    </MobanaProvider>
  );
}

Place the provider near the root of your component tree, outside your navigation container. This ensures flows can be shown from anywhere in your app.

Props#

Parameter	Type	Description
`children`Required	`ReactNode`	Your app content.
`modalProps`	`Partial<ModalProps>`	Custom props passed to the React Native Modal component. Use to customize animation type, status bar behavior, etc.
`loadingComponent`	`ReactNode`	Custom component shown while the flow is loading. Default is an ActivityIndicator.
`backgroundColor`	`string \| { light: string; dark: string }`	Background color shown behind the flow while it loads and during modal transitions. Pass a string for a fixed color, or an object to automatically follow the system theme. Defaults to `#FFFFFF` (light) / `#1c1c1e` (dark).

Customization#

App.tsx

<MobanaProvider
  // Custom Modal props
  modalProps={{
    animationType: 'fade',          // 'slide' (default), 'fade', or 'none'
    statusBarTranslucent: true,     // Android only
  }}
  // Custom loading component while flow loads
  loadingComponent={<CustomSpinner />}
  // Static background color
  backgroundColor="#F5F5F5"
>
  <App />
</MobanaProvider>

Custom Loading Component#

function CustomLoadingComponent() {
  return (
    <View style={styles.loading}>
      <ActivityIndicator size="large" color="#007AFF" />
      <Text style={styles.text}>Loading...</Text>
    </View>
  );
}

// Usage
<MobanaProvider loadingComponent={<CustomLoadingComponent />}>
  <App />
</MobanaProvider>

Background Color#

The background color is shown behind the flow while it loads and during the modal slide-in animation. By default it matches the system theme. You can override it with a static color or an object that switches automatically with the device theme:

App.tsx

// Automatically switches with the system theme
<MobanaProvider
  backgroundColor={{ light: '#F0EEE9', dark: '#1A1A1A' }}
>
  <App />
</MobanaProvider>

When using the object form, the color updates automatically whenever the system theme changes during the app lifecycle — no extra state management required.

Requirements#

react-native-webview: Must be installed as a peer dependency.
react-native-safe-area-context: Recommended for proper safe area handling (notches, home indicators).

Expo Go Not Supported

Since the provider requires react-native-webview (native code), it won't work in Expo Go. Use expo-dev-client instead.

How It Works#

The provider creates a React Context that the SDK uses to present flows. When you call startFlow():

The SDK fetches the flow content (or uses cached version)
The provider opens a full-screen Modal
A WebView renders the flow's HTML/CSS/JS
The JavaScript bridge enables communication between flow and SDK
When the user completes or dismisses, the Modal closes
The Promise resolves with the result

getInstallId()

Overview

AI agents: for complete Mobana SDK & API documentation, get full context here or visit llms.txt