⚡ Rapid RN — Create Production-Ready React Native Apps in Seconds

The fastest way to scaffold a fully-wired, production-ready React Native (Expo) app — with Authentication, Navigation, Theme System, Storage, and more — all set up for you.

npm create rapid-rn-app

Why Rapid RN?

Starting a new React Native project usually means spending days just on setup:

• Configuring Expo Router navigation
• Writing Auth flows from scratch
• Wiring up Zustand state management
• Setting up Dark/Light theme systems
• Integrating TanStack Query, Axios, Secure Storage...

Rapid RN eliminates all of that. Run one command, answer a few questions, and you get a fully-integrated, scalable, TypeScript-first React Native app — ready for your actual features.

Quick Start

npm create rapid-rn-app

Also works with:

npx create-rapid-rn-app

Requires: Node.js >=18.0.0

That's it. No global installs needed.

What Happens When You Run It?

The interactive CLI walks you through a step-by-step setup:

  Let's build something great

✔ What is your project name? › my-awesome-app
✔ Bundle ID / App ID? › com.company.myapp
✔ Which framework? › Expo (Managed Workflow)
✔ Which navigation library? › Expo Router
✔ Add a Splash Screen? › Yes
✔ Add Onboarding screens? › Yes
✔ Add Authentication flow? › Yes
✔ Add Bottom Tabs navigation? › Yes
✔ Add Global Theme System? › Yes
✔ Add Bottom Sheet component? › Yes
✔ Create my-awesome-app with: Expo Router, Splash Screen, Onboarding, Authentication, Bottom Tabs, Theme System, Bottom Sheet?

Done. Your project is generated — ready to run with npm start.

What You Get

Every generated app includes:

🏗️ Base Structure

Clean, scalable folder layout with TypeScript configured out of the box:

my-awesome-app/
├── app/                      # Expo Router file-based routes
│   ├── (auth)/               # Auth-guarded screens
│   ├── (tabs)/               # Bottom tab screens
│   └── index.tsx             # Root entry point
├── src/
│   ├── modules/              # Feature modules (onboarding, auth, home…)
│   │   ├── onboarding/
│   │   │   └── screens/
│   │   ├── auth/
│   │   │   ├── screens/
│   │   │   ├── hooks/
│   │   │   └── store/
│   │   └── home/
│   ├── shared/               # Shared UI components (Button, Input, Loader…)
│   ├── theme/                # Global design tokens (colors, spacing, typography)
│   │   ├── colors.ts
│   │   ├── spacing.ts
│   │   ├── typography.ts
│   │   └── ThemeProvider.tsx
│   ├── services/             # API layer (Axios instance, interceptors)
│   └── store/                # Zustand global store
├── package.json
├── tsconfig.json
├── app.json
└── .env.example

🔌 Available Plugins (Selected During Setup)

| Plugin | What It Provides | |---|---| | Expo Router Navigation | File-based routing with deep linking support | | Splash Screen | Animated custom splash screen | | Onboarding | Swipeable intro walkthrough with skip/complete logic | | Authentication | Full auth flow — Login, Register screens with Zustand store + navigation guards | | Bottom Tabs | Home, Dashboard, More & Profile screens with tab navigation | | Global Theme System | Light/Dark mode, device sync, toggle from Profile — fully customizable tokens | | Bottom Sheet | Premium gesture-driven bottom sheet with snap points (powered by @gorhom/bottom-sheet) | | Zustand | Lightweight global state management — pre-wired to Auth store | | TanStack Query | Server state management with QueryClient configured | | Axios | HTTP client with interceptors and environment-based base URL | | Secure Storage | Persistent key-value storage with @react-native-async-storage/async-storage |

How to Run Your App

After generation:

cd my-awesome-app

# Install dependencies
npm install

# Start the Expo dev server
npm start

# Or run directly on device/simulator
npx expo run:ios
npx expo run:android

Project Structure Explained

app/ — Expo Router Routes

Uses file-based routing. Each file inside app/ automatically becomes a route:

• app/index.tsx → Root redirect (goes to onboarding or tabs based on state)
• app/(auth)/login.tsx → /login route
• app/(tabs)/home.tsx → Home tab screen

src/modules/ — Feature Modules

Each feature is isolated in its own folder with a consistent structure:

src/modules/<feature>/
├── screens/     # Screen components
├── hooks/       # Feature-specific hooks
├── store/       # Zustand store slice (if needed)
└── index.ts     # Public API export

This keeps code organized and prevents cross-module dependencies from becoming tangled.

src/theme/ — Design System

All your design tokens in one place:

• colors.ts — Brand colors for Light and Dark mode
• typography.ts — Font sizes, weights, line heights
• spacing.ts — Consistent spacing scale
• ThemeProvider.tsx — React context wrapping the entire app

To customize your brand:

// src/theme/colors.ts
export const palette = {
  primary: '#6366F1',   // ← Change this to your brand color
  secondary: '#A855F7',
  // ...
};

src/services/ — API Layer

Pre-configured Axios instance ready to point to your backend:

// src/services/api.ts — already generated
const api = axios.create({
  baseURL: process.env.EXPO_PUBLIC_API_URL, // set in .env
  timeout: 10000,
});

Customizing Your App

Add Environment Variables

Rename .env.example to .env and fill in your values:

EXPO_PUBLIC_API_URL=https://api.yourapp.com
EXPO_PUBLIC_APP_ENV=development

Change Theme Colors

Edit src/theme/colors.ts:

const lightColors = {
  primary: '#6366F1',    // Your primary brand color
  background: '#FFFFFF',
  surface: '#F8FAFC',
  // ...
};

Add a New Screen

Create a file in app/:

// app/settings.tsx
export default function SettingsScreen() {
  return <View><Text>Settings</Text></View>;
}

Expo Router auto-registers it as /settings.

Add a New Feature Module

src/modules/
└── profile/           ← your new module
    ├── screens/
    │   └── ProfileScreen.tsx
    ├── hooks/
    │   └── useProfile.ts
    └── index.ts

Available CLI Commands

# Recommended — no install needed
npm create rapid-rn-app

# Also works
npx create-rapid-rn-app

# Or install globally once, then run anywhere
npm i -g create-rapid-rn-app
rapid

Tech Stack Used in Generated Apps

| Category | Library | |---|---| | Framework | Expo (Managed Workflow) | | Language | TypeScript | | Navigation | Expo Router v3 | | State Management | Zustand | | Server State | TanStack Query v5 | | HTTP Client | Axios | | Storage | AsyncStorage | | Bottom Sheet | @gorhom/bottom-sheet | | Fonts | Expo Font | | Icons | @expo/vector-icons |

Requirements

• Node.js >= 18.0.0
• npm, yarn, or pnpm
• Expo Go app (for quick device testing) or Xcode / Android Studio (for native builds)

License

MIT © Rapid RN contributors