React Native screen for ExpoPaywall
Animated paywall screens people actually read. A membership card lit by a drifting aurora (drag it to tilt), plans that tint as you pick them, a dark glow layout with an annual toggle and sliding price, and a free-trial timeline that draws itself. Comes with a “You’re Pro” success screen with confetti and a cancel flow that asks why and offers a reason to stay. Respects Reduce Motion.
Also known as: paywall screen, subscription screen, upgrade screen, pricing plans screen.
Installation
Copies the screen into src/components/blocks along with every component it uses.
Props
| Prop | Type | Default |
|---|---|---|
| variant Gradient card + plan picker, dark full-bleed with an annual toggle, or how the free trial works. | "card" | "glow" | "trial" | "card" |
| appName Shown on the card and the glow pill. | string | 'Lumen' |
| title Heading. | string | per variant |
| subtitle Line under the heading. | string | per variant |
| features Feature grid (card) or pills (glow). | { title, icon? }[] | per variant |
| plans { id, label, price, period, caption?, badge?, trialDays?, cta? }. In glow the toggle picks plans[0] (on) or plans[1] (off). | PaywallPlan[] | yearly / monthly / lifetime |
| plan Selected plan id (controlled). | string | — |
| defaultPlan Initial plan when uncontrolled. | string | plans[0].id |
| onPlanChange A plan was picked. | (id: string) => void | — |
| onPurchase Pressed the main button. | (plan: PaywallPlan) => void | — |
| onRestore Shows “Restore” in the top-left corner. | () => void | — |
| onClose Shows a close button. | () => void | — |
| reminder trial: the “remind me” switch (controlled with onReminderChange). | boolean | true |
| auroraColors Colours of the moving aurora. | [string, string, string] | orange, violet, cyan |
| accent Button and selected-plan colour. | string | theme accent |
| topInset Space above the restore / close buttons, e.g. useSafeAreaInsets().top. Also on PaywallSuccess and PaywallWinback. | number | 0 |
| bottomInset Space under the button, e.g. useSafeAreaInsets().bottom + 12. | number | 30 on iOS, 16 elsewhere |
| style Root style. | StyleProp<ViewStyle> | — |
FAQ
- How do I make a paywall screen in React Native?
- Use ExpoKit's Paywall, a Pro screen: with ExpoKit Pro, the ExpoKit CLI copies a ready-made paywall screen into your Expo or React Native app as plain TypeScript you can edit. It works on iOS, Android and web, and in Expo Go.
- Does Paywall work in Expo Go?
- Yes. Paywall runs in Expo Go on iOS and Android with no development build — its packages (
react-native-svg,expo-haptics) are all included in Expo Go. - How do I add Paywall to my Expo app?
- With ExpoKit Pro, add it with the ExpoKit CLI: it copies the screen's source into your app and installs
react-native-svg,expo-haptics, so the code is yours to change. The install command is on this page for Pro members. - Is Paywall free?
- Paywall is part of ExpoKit Pro. With a Pro plan, log the CLI in once (
npx @expokit/cli@latest login) and it installs the full source into your app. - Can I change how Paywall looks?
- Yes. It takes its colours, radius and light / dark mode from
useKit(), so wrapping your app in<KitProvider accent radius>re-skins it with every other ExpoKit screen. The code lives in your project, so you can also edit anything directly.
