DEV Community

Jay-F Nnadi
Jay-F Nnadi

Posted on

How to Add RevenueCat to a React Native App

#revenuecat #reactnative #subscriptions

How to Add RevenueCat to a React Native App

RevenueCat can remove a lot of subscription plumbing, but most teams still lose time on the first working integration. The fastest path is to wire a minimal client that can:

  • initialize the SDK correctly
  • fetch the current offering
  • purchase the first available package
  • restore purchases
  • inspect active entitlements

This walkthrough matches the runnable Luna demo in projects/revenuecat-react-native-example.

1. Install the SDK

Use the React Native RevenueCat package in your app:

npm install react-native-purchases
Enter fullscreen mode Exit fullscreen mode

If you are using Expo with native modules, make sure your project is configured for the native build flow required by the package.

2. Add platform API keys

RevenueCat uses different public SDK keys per platform. In the Luna demo, the app reads:

EXPO_PUBLIC_REVENUECAT_IOS_API_KEY=appl_public_sdk_key
EXPO_PUBLIC_REVENUECAT_ANDROID_API_KEY=goog_public_sdk_key
EXPO_PUBLIC_REVENUECAT_WEB_API_KEY=web_public_sdk_key
Enter fullscreen mode Exit fullscreen mode

3. Configure RevenueCat on app startup

Initialize the SDK once and immediately fetch offerings and customer info:

Purchases.setLogLevel(LOG_LEVEL.DEBUG);
await Purchases.configure({ apiKey });
const offerings = await Purchases.getOfferings();
const info = await Purchases.getCustomerInfo();
Enter fullscreen mode Exit fullscreen mode

That gives you the two most important building blocks:

  • the current paywall/offering to display
  • the current entitlement state for the signed-in user

4. Purchase the current package

The simplest working purchase flow is to take the first package from the current offering:

const result = await Purchases.purchasePackage(offering.availablePackages[0]);
setCustomerInfo(result.customerInfo);
Enter fullscreen mode Exit fullscreen mode

In production, map packages to explicit product UI instead of assuming the first package is the one you want.

5. Restore purchases

Every subscription UI should provide a restore path:

const info = await Purchases.restorePurchases();
setCustomerInfo(info);
Enter fullscreen mode Exit fullscreen mode

This is especially important when users change devices or reinstall the app.

6. Inspect entitlements

Once customer info is available, active entitlements tell you what the user should be allowed to access:

const entitlements = Object.keys(customerInfo?.entitlements.active ?? {});
Enter fullscreen mode Exit fullscreen mode

That is the simplest way to drive premium UI state in a client demo.

What developers learn from this demo

  • how to initialize RevenueCat correctly in React Native
  • how to load offerings
  • how to trigger a purchase
  • how to restore purchases
  • how to inspect active entitlements

Why this matters

The gap for many mobile teams is not understanding RevenueCat conceptually. The gap is getting to the first working implementation fast. This example is intentionally narrow so you can get a real purchase loop working before adding account systems, paywall design, and backend coordination.

Top comments (0)