Using purchases

Read Pro status and present a paywall from your own screens.

Complete RevenueCat setup first. The app already mounts RevenueCatProvider in its root layout.

RevenueCatContext

Read the context inside a component:


import { useContext } from 'react';
import { RevenueCatContext } from '@/provider/RevenueCatProvider';
 
const { isPro, isConfigured } = useContext(RevenueCatContext);

Value	Type	Meaning
`isPro`	`boolean`	Whether the configured Pro entitlement is active.
`isConfigured`	`boolean`	Whether the RevenueCat SDK has been configured for this platform.
`identifyUser`	`(userId: string) => Promise<void>`	Associates RevenueCat with the Supabase user ID. SessionProvider calls it after sign-in.
`logout`	`() => Promise<void>`	Logs out of RevenueCat. SessionProvider calls it after sign-out.

The context exposes subscription state and identity methods. Purchase and restore controls are provided by the paywall.

Use isPro to choose what the UI displays. Paid AI features also require the server-side entitlement check.

Showing the paywall

Import Paywall from @/components/paywall/Paywall. It fills its parent, so return it while the purchase screen is open:


import { useContext, useState } from 'react';
import { Text } from 'react-native';
import Paywall from '@/components/paywall/Paywall';
import { PaymentPlan } from '@/components/profile/PaymentPlan';
import { RevenueCatContext } from '@/provider/RevenueCatProvider';
import { i18n } from '@/i18n';
 
export function SubscriptionScreen() {
  const [showPaywall, setShowPaywall] = useState(false);
  const { isPro, isConfigured } = useContext(RevenueCatContext);
 
  if (!isConfigured) {
    return <Text>{i18n.t('paywall.not_configured')}</Text>;
  }
 
  if (showPaywall) {
    return <Paywall onClose={() => setShowPaywall(false)} />;
  }
 
  return <PaymentPlan onPress={() => setShowPaywall(true)} isPro={isPro} />;
}

The wrapper accepts two props:

Prop	Type	Behavior
`onClose`	`() => void`	Required. Called on dismissal, purchase cancellation or completion, and restore completion or failure.
`onPurchaseError`	`() => void`	Optional. Called after the built-in purchase-error toast.

These callbacks have no payload. onClose can run without a purchase, so read isPro to check access.

Placements

Use presentPaywall for paywalls tied to onboarding or AI usage:


import { presentPaywall } from '@/services/paywall';
 
await presentPaywall('quota_exceeded');

Placement	Default behavior
`onboarding_end`	Opens RevenueCat’s paywall when the SDK is configured.
`quota_exceeded`	Opens a bottom sheet whose upgrade button presents the RevenueCat paywall.

Setting the platform’s EXPO_PUBLIC_SUPERWALL_API_KEY_* variable routes both placements to Superwall. The Paywall component above still displays RevenueCat’s UI directly.

presentPaywall returns Promise<void>. It logs presentation errors, and opening the quota sheet resolves immediately. Do not treat its completion as a purchase or dismissal signal.

Restoring purchases

Keep the restore action in your paywall. Test it with a store account that already owns a subscription, then confirm that the Pro entitlement becomes active.

For your own purchase UI, RevenueCat’s restore guide shows how to call Purchases.restorePurchases() and inspect the returned customer information.

Building a custom purchase screen

Keep direct RevenueCat SDK calls under src/services/paywall/ or src/components/paywall/. The lint rules prevent those imports in screens.

Use the SDK’s getOfferings() to load the current offering and its availablePackages, then purchasePackage() to buy the selected package. These are RevenueCat SDK methods, not members of RevenueCatContext.

RevenueCat’s product display and purchase guides include React Native examples. Handle loading, empty offerings, cancellation and errors in your UI.

Verify

On a development or test build with store sandbox accounts, open the paywall, complete a purchase and check that Profile shows Pro access. Reopen the app and confirm the entitlement remains active. Also test cancellation and restoration.

Check a paid AI action, such as image generation, to verify the server recognizes the same entitlement.