Examples

Common tiun patterns in a React Native app. Each section is standalone — use what applies to your integration.

These assume the SDK and its native dependencies are installed and your return deep link is registered. See Installation if not.

---

Set up the provider

Keep the config and your product IDs in one module so screens, gating logic, and analytics all reference the same values.

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

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

export const TIUN_PRODUCTS = {
  light: 'p-live-light',
  pro: 'p-live-pro',
} as const;

Wrap the app root in the provider:

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

export default function App() {
  return (
    <TiunProvider config={TIUN_CONFIG}>
      <RootNavigator />
    </TiunProvider>
  );
}

---

Checkout

Call checkout() with the product ID from your dashboard. tiun opens the overlay and handles email, payment, and access in one flow.

import { Button, View } from 'react-native';
import { useTiun } from '@tiun/react-native-sdk';
import { TIUN_PRODUCTS } from './tiun';

function PricingScreen() {
  const { checkout } = useTiun();

  return (
    <View>
      <Button
        title="Light — EUR 19/mo"
        onPress={() => checkout({ productId: TIUN_PRODUCTS.light })}
      />
      <Button
        title="Pro — EUR 199/mo"
        onPress={() => checkout({ productId: TIUN_PRODUCTS.pro })}
      />
    </View>
  );
}

---

Track the user

useTiun() already re-renders your component when the user changes, so for most screens reading user directly is enough:

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

function AccountBadge() {
  const { isAuthenticated, user } = useTiun();

  if (!isAuthenticated) return <Text>Not signed in</Text>;
  return <Text>{user?.email}</Text>;
}

Use useTiunEvent('userChange') when you need to react to the change — refetching data, resetting a screen, or mirroring the user into your own store:

import { useState } from 'react';
import { useTiunEvent, type TiunUser } from '@tiun/react-native-sdk';

function AppShell() {
  const [user, setUser] = useState<TiunUser | null>(null);

  useTiunEvent('userChange', ({ user: nextUser }) => {
    setUser(nextUser);
  });

  // ...
}

userChange also fires once when the stored session is restored at launch, so this covers the initial state too.

---

Gate content

Derive what the user can see from productAccess. Deriving a single "current tier" keeps the check in one place instead of scattering includes() calls through your screens.

import { useTiun } from '@tiun/react-native-sdk';
import { TIUN_PRODUCTS } from './tiun';

type Tier = 'free' | 'light' | 'pro';

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 on it:

import { Button, Text, View } from 'react-native';
import { useTiun } from '@tiun/react-native-sdk';
import { TIUN_PRODUCTS } from './tiun';

function ArticleScreen({ article }: { article: Article }) {
  const tier = useTier();
  const { checkout } = useTiun();

  if (!canRead(article, tier)) {
    return (
      <View>
        <Text>This article is for Pro subscribers.</Text>
        <Button
          title="Upgrade to Pro"
          onPress={() => checkout({ productId: TIUN_PRODUCTS.pro })}
        />
      </View>
    );
  }

  return <ArticleBody article={article} />;
}

---

Login and logout

Returning subscribers sign in without going through checkout again. Their productAccess comes back with the session.

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

function AuthButton() {
  const { isAuthenticated, login, logout } = useTiun();

  return (
    <Button
      title={isAuthenticated ? 'Log out' : 'Log in'}
      onPress={() => (isAuthenticated ? logout() : login())}
    />
  );
}

---

Verify on your server

Client-side gating controls what the app renders. If your backend serves the premium payload itself, verify the user there before responding.

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

function usePremiumFetch() {
  const { getUserVerificationToken } = useTiun();

  return async function fetchPremium(path: string) {
    const token = await getUserVerificationToken();
    if (!token) return null;

    const response = await fetch(`https://api.example.com${path}`, {
      headers: { Authorization: `Bearer ${token}` },
    });

    return response.ok ? response.json() : null;
  };
}

The backend half is the same as for the web SDK — see verify authentication server-side and verify subscriptions server-side.

---

Full example

A tiered app in one file: entitlements drive the current tier, the pricing screen opens checkout, and the tab bar handles auth.

import { useMemo, useState } from 'react';
import { Button, SafeAreaView, Text, View } from 'react-native';
import {
  TiunProvider,
  useTiun,
  useTiunEvent,
  type TiunConfig,
  type TiunUser,
} from '@tiun/react-native-sdk';

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

const TIUN_PRODUCTS = {
  light: 'p-live-light',
  pro: 'p-live-pro',
} as const;

type Tier = 'free' | 'light' | 'pro';

function tierFromUser(user: TiunUser | null): Tier {
  const access = user?.productAccess ?? [];
  if (access.includes(TIUN_PRODUCTS.pro)) return 'pro';
  if (access.includes(TIUN_PRODUCTS.light)) return 'light';
  return 'free';
}

function AppShell() {
  const { checkout, login, logout, isAuthenticated } = useTiun();
  const [user, setUser] = useState<TiunUser | null>(null);

  useTiunEvent('userChange', ({ user: nextUser }) => setUser(nextUser));

  const tier = useMemo(() => tierFromUser(user), [user]);

  return (
    <SafeAreaView>
      <Text>Current plan: {tier}</Text>

      {tier === 'free' && (
        <Button
          title="Subscribe to Light"
          onPress={() => checkout({ productId: TIUN_PRODUCTS.light })}
        />
      )}

      {tier !== 'pro' && (
        <Button
          title="Go Pro"
          onPress={() => checkout({ productId: TIUN_PRODUCTS.pro })}
        />
      )}

      <View>
        <Button
          title={isAuthenticated ? 'Log out' : 'Log in'}
          onPress={() => (isAuthenticated ? logout() : login())}
        />
      </View>
    </SafeAreaView>
  );
}

export default function App() {
  return (
    <TiunProvider config={TIUN_CONFIG}>
      <AppShell />
    </TiunProvider>
  );
}

---

For the full API, see Hooks and events. For an end-to-end walkthrough from dashboard to production, see monetize in React Native in Guides.