Configuration

Mount the provider

Wrap your app in <TiunProvider> once. It holds the tiun session and renders the login and checkout overlays, so it must sit above every component that uses the tiun hooks — that's the only placement rule. The overlay sizes itself to the window, so it covers your UI correctly wherever in the tree the provider is mounted; the app root is simply the most convenient place for it.

import { TiunProvider } from '@tiun/react-native-sdk';

export default function App() {
  return (
    <TiunProvider
      config={{
        snippetId: 'YOUR_SNIPPET_ID',
        returnUrl: 'myapp://tiun/return',
      }}
    >
      <RootNavigator />
    </TiunProvider>
  );
}

The provider is invisible until the user opens login or checkout; the rest of the time it takes up no space on screen.

---

Configuration options

Option	Type	Default	Description
snippetId	string	—	Required. Your snippet ID from the dashboard.
returnUrl	string	—	Required. The deep link the in-app browser returns to after payment, for example myapp://tiun/return. Its scheme must be registered natively — see Installation — and must match the App scheme in the dashboard's Settings → Environment setup for the environment you target. If it doesn't, login and checkout close as soon as they open.
host	string	https://api.tiun.live	Origin of the tiun environment to use, without a trailing slash. Set this to target sandbox.
language	string	'en'	Language for the overlay UI: 'en', 'de', or 'fr'.
debug	boolean	false	Log the native bridge traffic to the console, prefixed [tiun].

Keep the config object stable — define it as a module-level constant rather than building it inline on every render:

import type { TiunConfig } from '@tiun/react-native-sdk';

export const TIUN_CONFIG: TiunConfig = {
  snippetId: 'YOUR_SNIPPET_ID',
  returnUrl: 'myapp://tiun/return',
  language: 'en',
};

---

Sandbox and live

tiun runs live and sandbox as two independent parallel environments, each with its own snippet ID, products, and product IDs. In React Native you select the environment with host:

Environment	host	Snippet and product IDs
Live	https://api.tiun.live (default — omit host)	Live snippet ID, p-live-… products
Sandbox	https://api-sandbox.tiun.live	Sandbox snippet ID, p-test-… products

// Development build — sandbox
export const TIUN_CONFIG: TiunConfig = {
  snippetId: 'YOUR_SANDBOX_SNIPPET_ID',
  host: 'https://api-sandbox.tiun.live',
  returnUrl: 'myapp://tiun/return',
  debug: true,
};

The React Native SDK has no sandbox flag. Where the web SDK takes sandbox: true, the React Native SDK takes the environment's origin in host. Switch the snippet ID and the product IDs together with it — IDs never cross between environments.

For how the two environments relate, see Sandbox in Reference, and setting up your environment for the dashboard side.

---

Next: read the state and call tiun from your components with Hooks and events.