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.

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

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

reset()

Overview