Paywall screen

Installation

$ npx shadcn@latest add @goodui-native-pro/paywall-screen

Then run npx expo install --fix so react-native-reanimated, react-native-svg match your Expo SDK. Files land in components/goodui-native/paywall-screen.

Pro screens install from the license-gated @goodui-native-pro registry. Setup: Pro access.

Usage

// app/paywall.tsx (presented as a modal route)
import { router } from "expo-router";
import Purchases from "react-native-purchases";
import { PaywallScreen } from "@/components/goodui-native/paywall-screen/paywall-screen";
import { packageFor } from "@/lib/purchases";

export default function PaywallRoute() {
  return (
    <PaywallScreen
      appName="Stride"
      heroImage={require("@/assets/paywall.jpg")}
      currency="USD"
      onSubscribe={(planId, period) => Purchases.purchasePackage(packageFor(planId, period))}
      onSubscribed={() => router.back()}
      onRestore={async () => {
        const info = await Purchases.restorePurchases();
        if (!info.entitlements.active.pro) throw new Error("Nothing to restore");
      }}
      onClose={router.back}
      onOpenTerms={() => router.push("/legal/terms")}
      onOpenPrivacy={() => router.push("/legal/privacy")}
    />
  );
}

When to use

Examples

<PaywallScreen
  currency="EUR"
  locale="de-DE"
  trialDays={0}
  plans={[
    { id: "plus", name: "Plus", description: "Unlimited projects", price: { monthly: 4.99, yearly: 39.99 } },
    { id: "team", name: "Team", description: "Up to 10 people", price: { monthly: 12.99, yearly: 119 }, badge: "Best value" },
  ]}
  onSubscribe={buy}
/>

API reference

Motion and haptics

• •Switching monthly and yearly rolls every price digit by digit, up or down with the change, and the per-month or per-year line under it rolls too.
• •Selecting a plan springs the accent border and the radio dot in on the morph spring; cards sink to 98 % on touch down.
• •Subscribe gathers into a spinner, then opens into 'Welcome to {appName} Pro' or shakes with 'Try again'.
• •Reduced motion: prices change in place, the selection fades, no press scale or shake.

• •Haptic: select on the billing toggle (from segmented-control)
• •Haptic: tap, success and error from Subscribe and Restore purchases

• •Prices are rolling-number strips on the UI thread; switching the period re-renders only the cards and the note.
• •The hero is one Image; pass an optimized local asset.

Accessibility

• •Plans are a radio group named 'Plan'; each card is a radio with its checked state. Native screen readers hear name, price per period, description and badge; the web reads the card's visible text.
• •The billing toggle is a segmented control named 'Billing period' (from segmented-control). Prices read as their full formatted value (from rolling-number).
• •The trial note is a polite live region on Android and the web, so a new price is announced there when the plan or period changes.
• •Subscribe and Restore purchases are buttons that report busy and announce their result; Close is a labelled icon button.

Notes for AI

Related