React Native subscription app template for ExpoHow to build a subscription app in React Native
Any app with a paid plan needs the money screens to feel good: a welcome flow, sign in, an animated paywall with a free-trial timeline, and settings to manage it.
Screens
- OnboardingProA minimal swipeable welcome flow. Illustrations float and drift with a parallax, copy slides in behind them, the active dot stretches into a pill and the round next button grows into “Get started” on the last step — all tied to the swipe. Respects Reduce Motion.
- Sign InProOne configurable sign-in flow modelled on top mobile apps: Apple / Google / Microsoft / GitHub buttons, phone number + SMS code with a dial-code picker and resend countdown, and email with a password (plus sign-up strength meter and forgot password), a one-time code or a magic link with a 'Check your inbox' screen. Every method is optional; steps slide in direction-aware, respect Reduce Motion, and stay clear of the keyboard. Monochrome by default.
- PaywallProAnimated paywall, free-trial timeline, success and win-back screens.
- SettingsProAn iOS-style grouped settings screen: profile header with a Pro badge, System / Light / Dark picker, animated switches, chevron rows with details and a destructive sign-out row.
Components
- Progress StepsFinished steps pop and draw a check while the line pours into the next one.
- Stateful ButtonButton whose label rolls and width springs through loading, success and error.
- SwitchA toggle whose thumb squashes and stretches toward the other side while held.
- ProgressA bar, ring or segments with a glowing head; finishing flashes and draws a check.
- ToastSonner-style toasts whose tone icon draws itself while a hairline drains away.
Get started
Set up the shared theme once, then add the free pieces in one go:
Items marked Pro install the same way after ExpoKit Pro and npx @expokit/cli@latest login.
FAQ
- What's the fastest way to build a subscription app in React Native?
- Add ready-made screens from ExpoKit — Onboarding, Sign In, Paywall and Settings — to an Expo Router app with one CLI command each. The ExpoKit CLI copies each one's TypeScript source into your project, so you own and edit the code. It runs on iOS, Android and web.
- Does this subscription app UI work in Expo Go?
- Yes. Every screen and component on this page runs in Expo Go on iOS and Android, no development build needed.
- Is it free?
- Onboarding, Sign In, Paywall and Settings are part of ExpoKit Pro (one payment, unlimited projects). The other 5 items here are free and MIT-licensed.
- What does it install?
- The CLI adds the shared ExpoKit theme once and these packages where the items need them: expo-haptics, react-native-gesture-handler, react-native-reanimated, react-native-svg, react-native-worklets.