Setting up Superwall in React Native takes no time at all. Get started with paywall experiments in a few minutes.

Superwall's React Native SDK is ready to go! In this post, I'll show how to integrate Superwall in a React Native project. Essentially, this is a three-step process. If you've installed Superwall in iOS for example, a lot of this will be familiar.

Those three steps are:

1. Installing Superwall's SDK.

2. Configuring the Superwall client inside a React Native project.

3. And finally, presenting a paywall by registering an event.

I've got a React Native project setup already, and once we're done — a configurable paywall will show when a button is pressed:

React Native Paywall presenting on iOS

Before we dive in, this post assumes that you've already signed up with Superwall and added your respective products from App Store Connect or Google Play. If you need help with either of those, sign up for a free account here or learn how to add products into Superwall.

Finally, our React Native's minimum SDK support as of this writing is iOS 14, and SDK version 26 for Android.

Install the SDK

To install Superwall's SDK, there are a few different options. Some React Native projects use Expo, other's don't. All of them will work with Superwall, though.

First Route: Install via React Native Package

Here, installation goes through either npm or yarn.

1. Navigate to where your React Native project's package.json is at (i.e. cd documents/amazingapp).

2. If you're using npm, run npm install @superwall/react-native-superwall.

3. For yarn, execute yarn add @superwall/react-native-superwall.

Second Route: Installation for Expo Projects

1. Navigate to your Expo project (i.e. cd documents/amazingapp).

2. Then execute npx expo install @superwall/react-native-superwall.

If you only are targeting iOS, then you're ready for the next step. If you're also developing for Android, then be sure to also add Superwall's Maven repository:

// In your app's android/build.gradle...
allprojects {
    repositories {
        maven { url 'https://mvn.superwall.com/release' }
    }
}

Now is a good time to check that everything is working. Make sure there are no errors after installing the SDK and that your app still runs just fine.

Configure Superwall

Now we can initialize the Superwall client. Open up your App.tsx file and import Superwall:

import Superwall from "@superwall/react-native-superwall"

Then, within your App function, setup Superwall:

const App = () => {
  // Configure Superwall
  React.useEffect(() => {
    const apiKey = Platform.OS === "ios" ? "IOS_API_KEY" : "ANDROID_API_KEY"
    Superwall.configure(apiKey);
  }, []);

  // Rest of app's code...
}

If you aren't sure of what your API keys are, just go to Superwall's dashboard and choose either your iOS or Android app that was created for your React Native project. Then go to Settings -> Keys -> Public API Key to copy your app's key.

Present a paywall

Okay, now we're all setup to present paywalls!

In my demo app, I want a paywall to show when someone tries to log caffeine and they aren't on a pro plan. So, this is the function I'll invoke when the log button is pressed:

const onLogCaffeine = () => {
    Superwall.shared.register('caffeineLogged').then(() => {
      presentLogCaffeine();
    });
};

Now, when I run my app and tap on the blue button to log some caffeine — a paywall is shown! Otherwise, the caffeine logging screen will be presented:

Paywall presenting from a button press

If you're new to Superwall, you may be wondering how this is working. Read on for a quick explanation, or if you're a Superwall veteran — then you're all set!

Understanding Placements

With Superwall, we can present paywalls from button taps or any other user action. That said, it helps to understand how paywalls should be handled using our SDK.

Paywalls are typically shown based off of placements you create for a campaign. Each campaign has one (or more!) paywalls. Placements can represent anything in an app that should be a paid feature or interaction, otherwise known as being "paywalled”. For example, in a caffeine tracking app, some placements might be:

1. When a user logs caffeine, caffeineLogged.

2. Or, possibly setting a custom icon, customIconSelected.

3. And so on...

This approach is flexible, because it'll allow you to dynamically feature gate things remotely — all without requiring an app update. You can create advanced filters and rules for when these placements should be evaluated, assign different paywalls for them and more.

Superwall will create an example campaign and a corresponding placement for you when you create an app. So, feel free to use those to get started. And remember, this is just the start, be sure to visit our documentation to learn more!

Finishing up

And just like, we’ve installed Superwall and presented a remotely configurable paywall in React Native. If you had any issues with your setup, feel free to reach out to us via Superwall's support channels or ping me on Twitter. We're all happy to help, and we can't wait to see what developers can do with our React Native SDK!