Skip to main content

Expo React Native Starter Template

Generate a production-ready Expo React Native starter template with file-based routing, state management, theming, and essential configurations.

Fill in the placeholders

Edit the values, then copy your finished prompt.

Your Prompt
prompt.txt
You are an Expo React Native expert. Help me scaffold a production-ready starter template for a social marketplace app using Expo SDK 52.

Step 1: Initialize the project structure using Expo Router for file-based routing. Set up the app directory with 12 routes organized into route groups: (auth) for login/register, (tabs) for the main tab navigator with 4 tabs, and (modals) for full-screen modals. Configure the root layout with proper navigation headers, safe area handling, and a splash screen that shows until the app is ready.

Step 2: Set up the state management and data fetching layer. Install and configure Zustand for global state (auth tokens, user preferences, theme). Set up TanStack Query (React Query) for server data with automatic caching, background refetching, and optimistic updates. Create a typed API client using Axios with interceptors for authentication token injection and error handling. Define 10 API hooks for the core features.

Step 3: Implement the theming system with light and dark mode support. Create a theme provider using Nativewind (Tailwind for RN) with tokens for colors, spacing, typography, and border radius. Define 12 semantic color tokens (background, surface, primary, secondary, text, error, success) that switch between light and dark palettes. Integrate with the system appearance setting and allow manual override stored in AsyncStorage.

Step 4: Configure essential Expo modules: expo-secure-store for sensitive data, expo-notifications for push notifications with Expo Push Notifications, expo-image for optimized image loading, expo-splash-screen for controlled splash hiding, and expo-updates for OTA updates. Set up the app.config.ts with environment-specific variables for 3 environments (development, staging, production).

Step 5: Build the authentication flow with email/password + social (Google, Apple) login. Implement secure token storage in expo-secure-store, automatic token refresh, authenticated route protection (redirect to login if not authenticated), and a persistent auth state that survives app restarts. Create the login, register, and forgot-password screens with form validation using React Hook Form + Zod.

Step 6: Set up the development tooling and CI pipeline. Configure ESLint with Expo config for linting, Prettier for formatting, and Jest + React Native Testing Library for testing. Create EAS Build profiles for development, preview, and production builds. Set up EAS Update for OTA deployments. Write a GitHub Actions workflow that runs lint, type-check, and tests on every PR, and triggers a preview build for reviewers.

What this prompt does

This prompt scaffolds a production-ready Expo React Native starter so a project is production-shaped before any feature code lands. It covers six steps: initializing file-based routing with Expo Router, setting up state and data fetching, implementing theming with light and dark mode, configuring essential Expo modules, building the auth flow, and wiring up tooling and CI. The idea is that the first day decides how the next six months feel, so the boring foundations get done the same way every time.

The variables shape the template. [expo_version] and [route_count] plus [tab_count] define the routing structure, [state_library] and [data_fetching] plus [http_client] set the data layer, and [styling_approach] with [color_count] drives theming. [notification_provider] and [environment_count] configure Expo modules, [auth_method] and [validation_library] build the auth flow, and [linter], [formatter], and [test_framework] set up tooling and EAS pipelines. Choosing the state and data libraries deliberately matters most, since swapping them later touches a lot of code.

When to use it

  • You are starting a new Expo app and want a consistent, production-shaped foundation.
  • You want Expo Router file-based routing with auth, tab, and modal route groups.
  • You need state, data fetching, and a typed API client decided up front.
  • You want light and dark theming with system-appearance integration from the start.
  • You need secure storage, push notifications, and OTA updates configured early.
  • You want EAS Build profiles and a CI pipeline working from the first PR.

Example output

Expect an app directory with [route_count] routes organized into (auth), (tabs), and (modals) groups, with a root layout handling safe areas and a splash screen. From there you get [state_library] and [data_fetching] configured with a typed [http_client] client and interceptors, a theme provider with [color_count] semantic tokens for light and dark, configured Expo modules (secure-store, notifications, image, updates), an auth flow with [auth_method] and route protection, and a GitHub Actions workflow plus EAS Build profiles for development, preview, and production. It is mostly project structure and config with key code, arranged so the project is shaped like a mature codebase before the first feature ships.

Pro tips

  • Match [expo_version] to a current SDK so the module configuration and EAS profiles work without version drift.
  • Keep [route_count] and [tab_count] aligned with your real navigation so the generated route groups are usable.
  • Choose [state_library] and [data_fetching] you actually want long-term; swapping them later touches a lot of code.
  • Define enough [color_count] semantic tokens (background, surface, primary, text, error, success) so dark mode is complete, not partial.
  • Store sensitive auth data in expo-secure-store and persist auth state so it survives restarts.
  • Wire the CI workflow early; lint, type-check, and tests on every PR plus preview builds pay off from the first day, not later.

Frequently Asked Questions

Does this use Expo Router or React Navigation?
It uses Expo Router for file-based routing. Step 1 sets up the `app` directory with route groups for auth, tabs, and modals, configures the root layout with safe-area handling, and shows a splash screen until the app is ready. The number of routes comes from `[route_count]`.
Can I choose my own state management and data libraries?
Yes. `[state_library]` handles global state like auth and theme, and `[data_fetching]` handles server data with caching and optimistic updates. The defaults are Zustand and TanStack Query, but you can substitute alternatives, and the typed `[http_client]` client is configured accordingly.
Does it set up OTA updates and CI?
Step 6 configures EAS Build profiles for development, preview, and production, sets up EAS Update for OTA deployments, and writes a GitHub Actions workflow that runs lint, type-check, and tests on every PR plus triggers a preview build for reviewers.
How is authentication handled?
Step 5 builds an auth flow with `[auth_method]` sign-in, secure token storage in expo-secure-store, automatic token refresh, and route protection that redirects unauthenticated users to login. Auth state persists across restarts, and forms use `[validation_library]` for validation.
Engr Mejba Ahmed

Need this built for real?

Engr Mejba Ahmed

AI Developer · Software Engineer

I'm Mejba — I design and ship production AI systems, automations, and full-stack apps. If you want this turned into a working solution for your team, let's talk.

More in Mobile App Development Prompts

Engr Mejba Ahmed

Engr Mejba Ahmed

AI assistant · trained on my work

👋

Hey there!

Quick Actions

WhatsApp Direct line to me

Chat on WhatsApp

+880 1723 741224 · Replies within the hour on working days

Popular Questions

Engr Mejba Ahmed is connected
Engr Mejba Ahmed is typing...
Engr Mejba Ahmed avatar

✉ Want me to follow up? Drop your email

Engr Mejba Ahmed avatar

📞 Connect Directly

Choose how you'd like to reach me

WhatsApp

+880 1723 741224

Email

mejba.13@gmail.com

✓ Details sent! I'll get back to you shortly.

Powered by OpenAI

335+

Blog Posts

25

AI Courses

63

Projects

Services & Expertise

Pricing & Process

Learning & Resources

Connect & Support