gradient blur
Engineering

Integrating Superwall in your React Native app

Looking to get started with Superwall using React Native? This guide will get you up and running in just a couple of steps.

react native-2

Jordan Morgan

Developer Advocate

Published

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 a placement.

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

gradient blur
dashboard-header

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' }
    }
}

ungroup Copy

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"

javascript

ungroup Copy

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...
}

javascript

ungroup Copy

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();
    });
};

Javascript

ungroup Copy

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:

gradient blur

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 or YouTube channel 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!

gradient blur

Get a demo

We'd love to show you Superwall

Want to learn more?

  1. Fill out this tiny form →
  2. We'll prepare you a custom demo
  3. Walk you through Superwall
  4. Follow up and answer questions

Key features

  • Drag 'n Drop Paywalls
  • 200+ Custom Templates
  • Unlimited A/B tests
  • Surveys, Charts & More
Select...

By proceeding you consent to receiving emails and our terms.

gradient blur
shape-starshape-starshape-starshape-starshape-star

Customer Stories

Our customers refer to Superwall as their most impactful monetization tool. In their own words:

dashboard-header

Thanks to Superwall, we were able to 2x our iOS app profitability in just six months. It has greatly assisted our growth team in achieving exceptional results by facilitating high-frequency experimentation.

Mojo launch
Bernard Bontemps, Head of Growth
dashboard-header

Really excited about the progress we made recently on paywalls with Superwall. We got more than 50% increase in conversion for upsell screens. This is crazy.

Photoroom launch
Matthieu Rouif, CEO
dashboard-header

Superwall has completely changed the game for us. We’re able to run experiments 10x faster and unlock the ideal monetization model for our users.

RapChat launch
Seth Miller, CEO
dashboard-header

Superwall made testing paywalls so much faster. Instead of releasing a new version of the app each time, we were able to iterate on the winning paywalls much quicker. Thanks to that it increased our revenue per customer by 40%.

Teleprompter launch
Mate Kovacs, Indie Dev
dashboard-header

Superwall lets us move 10x faster on our monetization strategy. We can build and launch multiple paywall iterations without the need for client releases or complicated deploys. Our product iteration loop is days, rather than months because of Superwall.

Citizen launch
Jon Rhome, Head of Product
dashboard-header

Superwall enables Bickster’s marketing team to design and optimize app paywalls, freeing up engineering to concentrate on innovation. As a result, Superwall helped accelerate our install-to-subscription rates, lower engineering expenses, and cured our team’s frustration with the (once) time-consuming process of iterating on paywalls.

Bickster launch
Chris Bick, CEO
dashboard-header

Superwall has revolutionized our monetization strategy. It’s an essential tool that allows rapid paywall testing and optimization, leading to remarkable improvements in our subscription conversions and revenue generation. Can’t recommend Superwall enough for any app-based business.

Coinstats launch
Vahe Baghdasaryan, Sr. Growth
dashboard-header

Superwall has played an integral part of improving our subscription business. Compared to other providers, Superwall has proven superior in facilitating high-frequency experimentation allowing us to achieve an ideal monetization model, resulting in a significant increase in revenue.

Hornet launch
Nils Breitmar, Head of Growth
dashboard-header

Superwall is the single greatest tool we’ve used to help us increase our revenue. Our material wins from Superwall are greater than any tool we’ve worked with to date!

Pixite launch
Jordan Gaphni, Head of Growth
dashboard-header

Shout out to Superwall for helping us dial in our paywall — made a big impact on monetization, increasing revenue by more than 50% 💸

Polycam launch
Chris Heinrich, CEO
dashboard-header

Superwall increases revenue. Full stop. Being able to test paywalls on the fly and quickly analyze results has drastically increased our revenue and improved our monetization of users. Highly recommend this tool!

Hashtag Expert launch
Zach Shakked, Founder
Start for FREE

Simple win-win pricing

Interest aligned pricing. Contact us for a discount.

dashboard-header
Indie
Free
Up to 250 conversions per month
Access to every standard feature
Try it free

Standard Features

  • 250 Conversions a Month
  • Drag 'n Drop Paywall Editor
  • 200+ Paywall Templates
  • Unlimited A/B tests
  • Charts & Analytics
dashboard-header
Startup
$0.20/conversion
Pay as you go pricing that scales
Up to 5,000 conversions a month
Sign Up

Standard Features

  • 5,000 Conversions a Month
  • Drag 'n Drop Paywall Editor
  • 200+ Paywall Templates
  • Unlimited A/B tests
  • Charts & Analytics
dashboard-header
Growth
Flat-Rate
100% custom flat-rate pricing
Terms that make sense for you
Get a quote

Premium Features

  • Unlimited Conversions
  • We Build Your Paywalls
  • 4 Weekly Growth Meetings
  • Dedicated Slack Channel
  • Custom Integrations