Migrating from React Native SDK

Important: Expo SDK 53+ Required

This SDK is exclusively compatible with Expo SDK version 53 and newer. For projects using older Expo versions, please use our legacy React Native SDK.

This guide is to help you migrate your project using the legacy react-native-superwall SDK to the new Expo SDK. The expo-superwall/compat SDK is intended to make it easy for existing projects to migrate over.

Installation

First, you need to install expo-superwall using your package manager of choice.

bunx expo install expo-superwall

Basic Setup

Configure the SDK with your Public API Key. You'll retrieve this from the Superwall settings page, same as your existing React Native project.

import Superwall from "expo-superwall/compat"
import { useEffect, useState } from "react"
import { Platform } from "react-native"

// Initialize Superwall
useEffect(()=> {
	const apiKey = Platform.OS === "ios"
        ? "yourSuperwall_iOSKey"
        : "yourSuperwall_androidKey";
	Superwall.configure({ // `await` is optional here if not chaining or needing immediate confirmation
		apiKey,
	});
})

Identify User

// Identify a user
await Superwall.shared.identify({ userId })

// Set User Attributes
await Superwall.shared.setUserAttributes({
        someCustomVal: "abc",
        platform: Platform.OS,
        timestamp: new Date().toISOString(),
})

Present a Paywall

// Present a paywall
Superwall.shared.register({
      placement: "yourPlacementName",
      feature() {
        console.log(`Feature called!`)
      },
})

Listen to Events

// 1. Define your Superwall Delegate
import {
  EventType,
  type PaywallInfo,
  type RedemptionResult,
  type SubscriptionStatus,
  SuperwallDelegate,
  type SuperwallEventInfo,
} from "expo-superwall/compat"

export class MyDelegate extends SuperwallDelegate {
  handleSuperwallEvent(eventInfo) {
    switch (eventInfo.event.type) {
      case EventType.paywallOpen:
        console.log("Paywall opened");
        break;
      case EventType.paywallClose:
        console.log("Paywall closed");
        break;
    }
  }
}

// 2. Simply set the delegate
const delegate = new MyDelegate()
await Superwall.shared.setDelegate(delegate)