React Native SDK · TypeScript · Hooks

React Native Paywalls with 0 ms Latency.

Design and configure paywalls remotely in the MySuperWall dashboard. The React Native TypeScript SDK evaluates rules locally on the device and displays dynamic paywalls with zero network wait.

Quick start

import React, { useEffect } from 'react';
import { View, Button } from 'react-native';
import { MySuperwall, PaywallModal, usePaywall } from '@mysuperwall/react-native';

export default function App() {
  const { activePaywall, isVisible, dismiss, callbacks } = usePaywall();

  useEffect(() => {
    MySuperwall.initialize({
      appKey: 'YOUR_APP_KEY'
    });
  }, []);

  const onOpenPaywall = () => {
    MySuperwall.shared.handleTrigger('onboarding_finish', {
      onPurchase: async (productId) => {
        console.log('User selected product:', productId);
        // Execute purchase flow
      },
      onRestore: () => console.log('Restore tapped'),
      onDismiss: () => console.log('Dismissed')
    });
  };

  return (
    
      
      
    
  );
}

Install the SDK

Install the npm package and keep native dependency versions compatible with your app. Bare iOS requires pod install; Expo requires a native development build.

Open guided setup · npm

npm install @mysuperwall/react-native@^1.4.0

# If not already installed, add compatible native dependencies:
npm install react-native-webview @react-native-async-storage/async-storage

# Bare iOS: run pod install from ios/.
# Expo: use expo install for native dependencies.

Initialize

import { Platform } from 'react-native';

MySuperwall.initialize({
  appKey: 'YOUR_APP_KEY',
  platform: Platform.OS === 'android' ? 'android' : 'ios',
  userId: 'user_123', // Optional
  baseUrl: 'https://mysuperwall.com/' // Optional
});

Load store prices and prepare the paywall

After initialization, fetch real products from your existing billing provider and build localizedProducts keyed by exact product ID. Values must include displayPrice, priceString and currencyCode; include derived period prices when used. The snippet shows the SDK call, not a complete billing adapter. Wait for successful price and paywall loading before enabling the entry point. Currency follows the store account; it is not converted from device language. Do this once at startup and again only when prices or the language change: new prices or a new locale before every presentation discard the prepared paywall and make each opening slow.

await MySuperwall.shared.setProductData(localizedProducts);
// Verify manifestService.manifest is available before presenting.

Show a Paywall

MySuperwall.shared.handleTrigger('pro_feature', {
  metadata: { source: 'dashboard_card' },
  onPurchase: async (productId) => {
    // Handle purchase
  },
  onRestore: () => {
    // Handle restore
  },
  onDismiss: () => {
    // Handle dismiss
  }
});

User Attributes & Targeting

// Set persistent attributes for audience targeting
MySuperwall.shared.setUserAttributes({
  tier: 'silver',
  level: 8,
  isSubscriber: false
});

// Identify user
MySuperwall.shared.identify('user_555');

Push notifications (optional)

Send notifications from the dashboard through your own Firebase project, for example a reminder after someone closes the paywall that opens a discount paywall. The SDK has no Firebase dependency: your app reads the FCM token and hands it over.

Requires React Native SDK 1.5.0 or later.

1. Connect Firebase. In the dashboard open Integrations → Push notifications and upload a Firebase service account key (role: Firebase Cloud Messaging Admin).
2. Register the device. After the user allows notifications, pass the FCM token to the SDK, and again whenever it refreshes. It is registered for the current user and language, and again by itself when you change either.
3. Handle taps. Give the notification data to the SDK when the user taps it. It reports the tap and returns the trigger to open, so a discount trigger shows your offer.
4. Create a notification. In the dashboard open Notifications, choose when to send (for example after the paywall was closed), write the text per language and pick the trigger each reminder opens.

import messaging from '@react-native-firebase/messaging';

await messaging().requestPermission();
await MySuperwall.shared.setPushToken(await messaging().getToken());
messaging().onTokenRefresh(token => MySuperwall.shared.setPushToken(token));

// Taps: app in the background, and app started by the notification
messaging().onNotificationOpenedApp(message =>
  MySuperwall.shared.handleNotificationOpened(message.data));
const initial = await messaging().getInitialNotification();
if (initial) await MySuperwall.shared.handleNotificationOpened(initial.data);

// Stop notifications (logout, or the user turned them off):
await MySuperwall.shared.clearPushToken();

Each device gets the text for its language (the SDK locale); devices without a matching language get the default one. Someone who just bought is skipped, and a purchase cancels pending notifications. Translating the text with DeepL is a Premium feature.

Mount PaywallModal before handling a tap, so the paywall has somewhere to appear.

Android shows FCM notifications only while the app is in the background. Keep the WAKE_LOCK permission in your manifest (Firebase needs it) and request POST_NOTIFICATIONS on Android 13+.

iOS: enable the Push Notifications capability and the Remote notifications background mode, and upload your APNs key in the Firebase console (Project settings → Cloud Messaging).

0 ms Offline Cache & Local Rule Engine

The React Native SDK caches active paywall manifests using AsyncStorage. Trigger evaluations run in pure JavaScript/TypeScript in <1 ms with zero network latency, ensuring your paywall displays instantly.

API Reference