React Native AI chat app template for ExpoHow to build an AI chat app in React Native
An assistant app lives or dies on its chat screen: streamed replies, a thinking state, a stop button. Around it you need onboarding, sign in, a paywall for the paid model and settings.
Start from the template
AI assistant appProA complete Expo Router app for an AI chat assistant: onboarding once, Apple / Google / email-code sign in, a streaming chat with suggestions and stop, conversation history, profile and settings.Screens
- ChatProAI assistant chat with streamed, fading-in replies, Thinking state and a Stop button.
- 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
- TextareaA multiline field that glides taller line by line, with a ring-style counter.
- Text AnimationReveal, shimmer, cascade, scramble and typewriter text effects.
- SkeletonLoading placeholders swept by one angled light band across the whole screen.
- Bottom SheetA draggable sheet with snap points whose grabber stretches as you pull it.
- ToastSonner-style toasts whose tone icon draws itself while a hairline drains away.
- Action SheetAn iOS-style action sheet that follows your finger and flings away to dismiss.
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 an AI chat app in React Native?
- Start from ExpoKit's AI assistant app template — a complete Expo Router app — then add screens such as Chat, Onboarding, Sign In, Paywall and Settings. 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 AI chat 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?
- AI assistant app, Chat, Onboarding, Sign In, Paywall and Settings are part of ExpoKit Pro (one payment, unlimited projects). The other 6 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: @react-native-async-storage/async-storage, expo-haptics, expo-router, expo-splash-screen, expo-status-bar, react-native-gesture-handler, react-native-reanimated, react-native-safe-area-context, react-native-screens, react-native-svg, react-native-worklets.