Building & Monetizing a React Native App for Three Platforms in 20 Minutes

The Challenge Hey, I'm Perttu. I'll be showing you today how to monetize a React Native app for three platforms. We're going to be doing it in approximately 20 minutes. Yeah, so let's get started.

So, about the agenda. Since we're monetizing an app for three platforms, meaning iOS, Android, and web, we're going to first, of course, talk about what is monetization and why is it so hard? We're going to look at some of the options we have there. Then we're going to move on from there to take a project that's been bundled with Expo or has been started with Expo and React Native, and we're going to keep the code base so that it works on iOS and web and Android, all of them.

I'm going to be showing the iOS and web platforms today because it's easy. I have the device here. Android, you're just going to have to trust me that the code is there and works with that. I'm not going to be demoing today due to the time. Then I'm going to jump into Revenue Cat, talk a little bit about what that is and how it makes it easy for you to monetize your mobile app. So, I'll be clicking around through the dashboard to do that. Then we're going to get to the actual building bars, so I'm going to be pretty much hands-on showing you how this all works, how to get subscriptions and monetized on all three platforms.

What we won't be doing today is we won't be configuring the App Store, so this means that setting up an App Store account or setting up a Google Play account, connecting those to Revenue Cat, and for example, also setting up a Stripe account. We won't be doing that. We'll just have to assume that that is something you would have done already. We have pretty good guidance on that on Revenue Cat's website to do that. I'm going to show it to you, link it to you, follow that to get started.

But otherwise, the actual code part is going to be the main stuff we talk about today. A little bit about me. My name is Perttu Lähtenähti. I'm based in Helsinki. I'm a senior developer advocate at Revenue Cat, where I help developers make more money. I'm only on Twitter, essentially, with this handle. And you can find some of my writings from the QR code, which links to this website, thereperttu.dev. Most of those are oriented towards, like, when it comes, they talk about how to monetize apps, how to make the different kind of monetization features, how to build good products that monetize well. That's what I mostly talk about.

First, why are we using React Native in this project and not, for example, React? Well, that's simple. Because we're going to have a single code base that builds for iOS or Android and web without us having to do any platform-specific code, so to say. Essentially, none in this project. And in real life, you would also have very little, or depending on your needs, of course, you could have more. But the whole idea of React Native is that you write it, you keep most of the code same, the logic and whatnot, and then you have to do some platform-specific parts, but very little otherwise.

But the whole idea of React Native is that you write it, you keep most of the code same, the logic and whatnot, and then you have to do some platform-specific parts, but very little otherwise. And of course, as the end result, we get a fully native experience. So iOS apps and Android feel like they're actual iOS and Android apps, and web apps feel like it's a web app, not something else. So we can easily follow the platform conventions with React Native, and it's also pleasant to work with, of course.

But then, why is monetization hard? So on iOS and Android, in case you have never built your own app for those platforms, to monetize anything there when it comes to digital things, you need to use their in-app purchasing systems. So you can't use Stripe or anything there, but you have to use their own. Okay, fair enough. And on the web, you of course don't have those options from Apple and Google, but instead, you have to use Stripe or Paddle or similar. So it becomes like this that if you have multiple platforms, you have to play along with all of these very nicely and connect them very nicely and make it so that you can also use this cross-platform.

With the innovations released, you have to maintain a backend for yourself, which keeps track of the subscription states, handles refunds, etc. and connects all of these services together. And that's kind of where RevityGAD comes in. So we provide, essentially, a subscription backend as a service, so we take care of all the complexity that you would have to otherwise do yourself on the backend, like receive validation, the refunds, the subscription state, all of that, and also a bunch of other good things. Also, we have paywalls, for example. We support all the major platforms, so Android, iOS, and web. We have, for React Native, for Flutter, for native iOS and native Android, SDKs, so you can use us with basically everything.

And we keep up with the regulatory changes and billing requirements as they change. So, for example, when Apple allowed you to purchase outside of the store, we rolled out a feature to do that in just a few days. And, well, the best part is, of course, that we have a very easy-to-use SDK to accomplish all of this.

So now let's actually look at how to do that. Here we have a project, a preview of my mobile app here on the side, for a quick time, and then approaches that I've built with Expo. The first thing we need to do here is install a direct native purchase package, which is our SDK. Bun, add, React Native, purchases. That package is added now.

Because our SDK on iOS and Android requires some native code, we're gonna have to make a so-called development build of our Expo app. That allows us to use native code, which comes bundled in with the SDK, so we don't have to touch native code ourselves. Let's do bun, Expo, pre-build. We can see the folder structure here. Now we have a development build on an Expo app. We've added code for a list view showing the subscription status and options. Let's focus on building this for the device to see it on iOS.

But because I've run this project already once, I have those. But we would have to run the pre-build command in order to generate those. And we can actually see that if we delete the Android folder and run this command, it will generate that for us, as you can see there. So, that's all good.

Now we have a development build on an Expo app. We've added a little bit of code, which is basically a list view showing you the subscription status and then all the subscription options that you have. These are two components that I made before this. They're very simple. You're gonna see how they look like.

Let's now focus on building this for the device, so we actually get something here on the iOS. So, let's do bun, Expo, run iOS, and select device. And let's select my own device from there. And then we need to wait for a bit as this thing starts to build all the native dependencies in order to run the app. I'm just gonna let this sit there and do its job, and take a look at dashboard.

So, here's what RevenueCat dashboard looks like. This is after you've registered the account, you can create projects. Those can include multiple apps. For example, this one called React Advanced, using the sandbox data, would technically have three apps. The web app, the iOS app, and the Android app in by itself.

And before this, I've already configured a connection with App Store Connect, Google Play Console, and then RevenueCat web billing, so that those things can actually function correctly. If I take a look at App Store Connect, this is where my iOS app is hosted. Same for Google in Google Play Console. The way to do this is go to our documentation, check Connect apps and web providers documentation, and follow the guidance here how to set up, for example, App Store Connect after uploading your app there first.

It's very simple to take into use. We're constantly making it easier. We can now see that there's the index page with loading state because we don't have a customer info object that will tell if the user is subscribed or not. Let's reload this page. We have the same page, and this should be hot reloadable. Let's change that back, go back here. And what we need to do next is, of course, start adding some code. So, if we jump into this, back into Revenue Cat, what I've also done is I've set up products for this.

And then we have the Safari. Let's reload this page. We have the same page, and this should be hot reloadable. So, if we change the color, yep, everything's good. Let's change that back, go back here. And what we need to do next is, of course, start adding some code. So, if we jump into this, back into Revenue Cat, what I've also done is I've set up products for this.

So, I've set up two products for the web purchases, monthly and yearly, and same for the Google Play and App Store. There's monthly and yearly products. And then I've set there an entitlement that gets unlocked when you purchase those, called Advanced Access. An entitlement is just to tell us that, okay, when you purchase something, grant this entitlement to the user, which then you can use in the code to check that if the user has that entitlement, they can get access to features or content based on it. So, very easy. That's how easy it is to essentially configure a gated access using Revenue Cat.

And we don't have to do anything when it comes to setting up products anymore. In this case, I've done it before. Follow our SDK to setting up, but it's also very easy. You can just go to the products, select a new product, select the app that you're working on, for example, App Store Connect, and create the necessary files if you want. So, let's then install the SDK. We've installed the package. Next thing we need to do is we need to configure it. So, we see that we need to take purchases from React Native Purchases and run the configuration with API key. We can find the API keys here from this section. These are public keys, so they can be bundled in with your app.

And let's go here and do a use effect that first, like, oh, there it actually is already. So, that's good. The use effect that basically initializes the SDK. I'm making a lot of typos here. Wonderful. Weird keyboard. That's it. To do that, we need to call purchases, which we need to actually import from here. Purchases, configure, and with an API key, which we don't have. Purchases is a static function. You see that it needs an API key. API key is remedy.getAPIkey. Since we have multiple platforms, we need multiple different API keys, basically one for each platform. To get around that, I've saved those keys already in a file called constants. They just look like this. And we're gonna do const API key and use React Native's platform helper function to select from there and give it the keys. And what this does is basically when you run this app on iOS or web, it will select to use that key instead of the iOS key. Let's save that. We should start getting some logs. We are. That is wonderful. But we're still not seeing anything. So, let's instead add the necessary parts to see if users are subscribed or not. And for that, let's add another useEffect. You can see that we have the setCustomerInfoState here. So, useEffect. To do that, we need to have a function called getInfo that is an asynchronous function. And it will call const info to be – well, maybe we'll just call customer info is purchases getCustomerInfo. And this is an asynchronous function that's at the weight there. And then just set that in the state, setCustomerInfo, customer info, like so.

And then let's call this. Save that. And we get subscription status is active. So, that's because we've already once purchased something for this user. That's not a problem. That's all right.

So then, let's implement the purchasing logic, how to show actually some packages here. So, in RemedyCAD, we have – let's do another useEffect. We have a function to get all the possible purchasing options, which is called getOfferings. An offering is just a way to group different products together.

So, do const getPackages, like so. Also, an asynchronous function. And there we use the getOfferings. So, const offerings is purchases getOfferings keep forgetting the await function a little bit there. And then we just save it in the package state. So, setPackages, we do offerings, we check all, and we – oh, sorry. We check offerings current, and we set available packages. And it's complaining to us now that that can be undefined as well. So, we're going to add a clause to get that. And then we still need to call it. And once we do this, we should start seeing – yeah, there we have it. So, we have the packages when you click on them. It gives us the option to purchase them. How does it look for the web? It seems that we need to refresh the web version. It does the same. So, that's cool. That's very, very cool. Next up, of course, to purchasing. So, if we now select and click subscribe, nothing's going to happen. And that's because we haven't implemented the handle purchase.

Handle purchasing itself is very easy. We're just going to do this. We're going to take const – or actually, we're going to take purchases package there. We're going to give it the selected package like so. And that would be enough. But if we now ended up purchasing something, we would have to reload the app in order to see what's happening in this.

For us to see that the customer stayed up and chose customers subscribe, we would have to refresh the app. But actually, the purchase packet also returns a customer info. So, we can just take that and set customer info with customer info to do it. We save there. Let's try. We do click subscribe.

You're currently subscribed to this. Okay, well, let's not do that. Let's instead do the yearly packets. Subscribe. We get that nice little native model. You can click to subscribe. Hopefully, it goes through. It did go through and we have a subscription there. You are currently subscribed to the yearly packets. If we click manage, we can actually see that we can also cancel it using the native cancellation model. We're going to keep it for now.

Okay, so that works for iOS. It would do the same on Android. So, let's go to the web app and see how that works. We take the yearly advanced. We do subscribe. And tada, we have the also familiar Stripe payment portal where you can put the card there and pay for this. And it will similarly do the iOS version, subscribe to the app, go back, grant you the entitlement, and that's it.

We can test it out. Let's do a quick – let's log out the user. It's now showing us that the user is subscribed, although that happened already before we started doing anything because this was an old version of the app. So, let's call purchases log out. Actually, let's – yeah, I have to do it like this. I'm just going to log out the user so we can see the whole purchase flow like this. There, wait, tada. Whoops, what am I writing here? There. All right, and then call the logout.

We only have to do this once, and then we'll just – wait, what do you get? Oh, yeah, there. Okay, okay, okay, don't get angry at me. Apparently, you are already with the infinite loops and everything. Subscription that is not subscribed. Okay, so now we're back to the state where the user does not have. So, we're just going to save it. User hasn't subscribed to anything, so we're going to see how the subscription stage changes. We're going to take the monthly, we're going to subscribe, we get the model, we click it, all set, subscription status update, it updated. That's it.