> For the complete documentation index, see [llms.txt](https://docs.tiun.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tiun.io/guides/app-integration/monetize-in-react-native.md).
# Integrate with React Native
This guide walks through a complete React Native integration: creating products, installing the SDK, wiring checkout, gating content on what the user has bought, and going live.
The tiun React Native SDK covers **authentication and checkout** — subscriptions and one-time purchases. It renders the tiun overlays inside your app and binds the user's session to a hardware-backed device key, so the session survives restarts without you storing anything.
***
## 1. Set up your environment and products
Most teams build against sandbox first: click the **Sandbox** toggle in the dashboard sidebar and **Enable** it — see [setting up your environment](/guides/getting-started/set-up-environment.md).
Then, in the environment you'll point the app at, go to **Settings → Environment setup**, turn on **App**, and enter your **app scheme** — for example `myapp://`. This is how checkout gets back into your app after payment; you'll register the same scheme natively in step 3. tiun checks your app's `returnUrl` against this scheme when login or checkout opens, so a scheme that isn't registered here — or is registered in the other environment — fails right away, not at the end of payment.
Create one product per plan — for example **Light** and **Pro** — and copy their product IDs. The full walkthrough is in [creating your first product](/guides/getting-started/creating-first-product.md). Copy your **snippet ID** from the same environment.
***
## 2. Install the SDK
Install the SDK and its native dependencies, then rebuild:
```bash
npm install @tiun/react-native-sdk react-native-webview \
react-native-secure-sign react-native-keychain \
react-native-inappbrowser-nitro react-native-nitro-modules
```
```bash
cd ios && bundle exec pod install
```
These are native modules, so a JavaScript reload isn't enough — rebuild and reinstall the app. The full list of what each dependency does is in [Installation](/sdk/react-native-sdk/installation.md).
***
## 3. Register the return deep link
After payment, the provider redirects back into your app through a deep link that you choose — for example `myapp://tiun/return`. Register its scheme natively, or checkout can never complete.
{% hint style="info" %}
**One scheme, three places.** The scheme has to match everywhere: the **App scheme** in the dashboard's Environment setup (`myapp://`), the native registration below (`myapp`), and the `returnUrl` you pass to the SDK in step 4 (`myapp://tiun/return`). The host and path after the scheme are up to you.
{% endhint %}
On iOS, add it to `Info.plist`:
```xml
CFBundleURLTypesCFBundleURLNametiun.checkout.returnCFBundleURLSchemesmyapp
```
Still on iOS, forward incoming links to React Native's `Linking` module in `AppDelegate.swift` — the `Info.plist` entry alone doesn't get the link to React Native, and checkout won't resolve without it:
```swift
func application(
_ application: UIApplication,
open url: URL,
options: [UIApplication.OpenURLOptionsKey: Any] = [:]
) -> Bool {
return RCTLinkingManager.application(application, open: url, options: options)
}
```
On Android, add an intent filter to your main activity and set `android:launchMode="singleTask"`:
```xml
```
***
## 4. Add the provider
Keep your config and product IDs in one module so every screen references the same values:
```tsx
// tiun.ts
import type { TiunConfig } from '@tiun/react-native-sdk';
export const TIUN_CONFIG: TiunConfig = {
snippetId: 'YOUR_SANDBOX_SNIPPET_ID',
host: 'https://api-sandbox.tiun.live',
returnUrl: 'myapp://tiun/return',
language: 'en',
debug: true,
};
export const TIUN_PRODUCTS = {
light: 'p-test-light',
pro: 'p-test-pro',
} as const;
```
Wrap your app root in ``. The one rule is that it sits above everything that uses the tiun hooks — the overlay sizes itself to the window, so it covers your UI from anywhere in the tree:
```tsx
import { TiunProvider } from '@tiun/react-native-sdk';
import { TIUN_CONFIG } from './tiun';
export default function App() {
return (
);
}
```
The provider takes up no space on screen until the user opens login or checkout.
***
## 5. Build a pricing screen
One button per plan, each calling `checkout()` with its product ID:
```tsx
import { Button, View } from 'react-native';
import { useTiun } from '@tiun/react-native-sdk';
import { TIUN_PRODUCTS } from './tiun';
function PricingScreen() {
const { checkout } = useTiun();
return (
);
}
```
tiun opens the checkout overlay — it collects the user's email, verifies their identity, takes payment, and grants access in one flow. Payment itself happens in the in-app browser and returns to your app through the deep link you registered in step 3. For what the overlay does behind the scenes, see [Checkout / How it works](/reference/checkout/how-it-works.md) in Reference.
***
## 6. Gate content on what the user bought
After a successful purchase the user's `productAccess` array contains the product they just bought. It's the canonical source of truth for what they can access — see [Product access](/reference/checkout/product-access.md) in Reference.
Derive the current tier in one place:
```tsx
import { useTiun } from '@tiun/react-native-sdk';
import { TIUN_PRODUCTS } from './tiun';
type Tier = 'free' | 'light' | 'pro';
export function useTier(): Tier {
const { user } = useTiun();
const access = user?.productAccess ?? [];
if (access.includes(TIUN_PRODUCTS.pro)) return 'pro';
if (access.includes(TIUN_PRODUCTS.light)) return 'light';
return 'free';
}
```
Then gate your screens on it:
```tsx
import { Button } from 'react-native';
function PremiumScreen() {
const tier = useTier();
const { checkout } = useTiun();
if (tier !== 'pro') {
return (