Installing and Configuring the SDK

Let us look at how to set up react-native-purchases in a modern Expo or bare React Native project. First, install the package:

npm install react-native-purchases
cd ios && pod install

Next, initialize the SDK inside your root component, usually App.tsx or _layout.tsx if you are using Expo Router:

import { useEffect } from 'react';
import Purchases from 'react-native-purchases';

export default function App() {
  useEffect(() => {
    if (__DEV__) {
      Purchases.setLogLevel(Purchases.LOG_LEVEL.DEBUG);
    }

    // Initialize with your App Store or Play Store public API key
    Purchases.configure({ apiKey: 'appl_your_api_key_here' });
  }, []);

  return (
    // Your app navigation tree
  );
}

Designing a High-Converting Paywall

A paywall should never feel like a blocker; it should feel like an invitation to unlock more value. Here are three design rules I follow when building paywalls for my clients:

1. Clear Value Proposition: Show what the user gets immediately. Use icons and bullet points instead of walls of text.
2. Highlighted Best Value: Pre-select the annual plan and show a badge like "Save 50%" or "Best Value".
3. Restore Purchases Button: Apple mandates a visible "Restore Purchases" button, or your app risks rejection during review.

Here is a simple, clean paywall screen component written in React Native:

import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, Alert } from 'react-native';
import Purchases, { PurchasesPackage } from 'react-native-purchases';

export default function PaywallScreen({ navigation }: { navigation: any }) {
  const [packages, setPackages] = useState<PurchasesPackage[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [purchasing, setPurchasing] = useState<boolean>(false);

  useEffect(() => {
    async function loadOfferings() {
      try {
        const offerings = await Purchases.getOfferings();
        if (offerings.current && offerings.current.availablePackages.length > 0) {
          setPackages(offerings.current.availablePackages);
        }
      } catch (error: any) {
        Alert.alert('Error', error.message);
      } finally {
        setLoading(false);
      }
    }
    loadOfferings();
  }, []);

  const handlePurchase = async (pkg: PurchasesPackage) => {
    setPurchasing(true);
    try {
      const { customerInfo } = await Purchases.purchasePackage(pkg);
      if (customerInfo.entitlements.active['pro'] !== undefined) {
        Alert.alert('Success', 'Welcome to Pro!');
        navigation.goBack();
      }
    } catch (error: any) {
      if (!error.userCancelled) {
        Alert.alert('Purchase Failed', error.message);
      }
    } finally {
      setPurchasing(false);
    }
  };

  if (loading) {
    return (
      <View style={styles.center}>
        <ActivityIndicator size="large" color="#000" />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Unlock Full Access</Text>
      <Text style={styles.subtitle}>Get unlimited features and remove all limits.</Text>

      {packages.map((pkg) => (
        <TouchableOpacity
          key={pkg.identifier}
          style={styles.packageCard}
          onPress={() => handlePurchase(pkg)}
          disabled={purchasing}
        >
          <Text style={styles.packageName}>{pkg.product.title}</Text>
          <Text style={styles.packagePrice}>{pkg.product.priceString}</Text>
        </TouchableOpacity>
      ))}

      {purchasing && <ActivityIndicator style={{ marginTop: 20 }} color="#000" />}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 24, justifyContent: 'center', backgroundColor: '#fff' },
  center: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 28, fontWeight: 'bold', textAlign: 'center', marginBottom: 8 },
  subtitle: { fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 32 },
  packageCard: { padding: 20, borderWidth: 1, borderColor: '#ddd', borderRadius: 12, marginBottom: 16, backgroundColor: '#f9f9f9' },
  packageName: { fontSize: 18, fontWeight: '600' },
  packagePrice: { fontSize: 16, color: '#007AFF', marginTop: 4 }
});

Handling App Store Review Guidelines

Apple and Google are notoriously strict when reviewing apps with in-app purchases. To avoid getting rejected on your first submission, ensure you meet these criteria:

• Sandbox Testing: Always test purchases using sandbox user accounts on physical iOS and Android devices. Simulator purchases can be unreliable.
• Clear Terms: Include links to your Terms of Use (EULA) and Privacy Policy directly on the paywall screen.
• Active Subscriptions Info: Clearly state subscription duration, renewal price, and that payment will be charged to their account.

Wrapping Up

Implementing in-app purchases does not have to be a painful detour in your mobile app development journey. By combining a reliable service like RevenueCat with a clean, well-designed React Native UI, you can launch your monetization engine quickly and securely.

Need help building, scaling, or monetizing your next mobile app or SaaS product? Get in touch and let us chat about your project.