Init Expo App

The fastest way to bootstrap production-ready Expo React Native apps

Quick Start • Features • What You Get • Tech Stack • Contributing

---

What is Init Expo App?

Init Expo App is a CLI tool that generates fully-configured Expo React Native applications with a modern tech stack in seconds. Stop wasting hours setting up NativeWind, state management, API layers, and navigation—start building your app immediately.

Think of it as create-t3-app but for mobile development.

npx init-expo-app my-app

That's it. One command to get a production-ready mobile app template.

---

The Problem We Solve

Every React Native developer knows the pain:

❌ Without Init Expo App	✅ With Init Expo App
2-4 hours setting up a new project	30 seconds to get started
Manually configuring NativeWind, Tailwind	Pre-configured and working
Setting up state management patterns	Zustand store ready to use
Creating API layer from scratch	Axios client with interceptors
Building auth screens again and again	Login, Signup, Home screens included
Figuring out Expo Router setup	File-based routing configured
Inconsistent project structures	Clean, scalable architecture

Save 4+ hours on every new project.

---

Quick Start

Prerequisites

• Node.js 16+
• npm or yarn

Create Your App

# Using npx (recommended - no installation needed)
npx init-expo-app my-app

# Navigate to your app
cd my-app

# Start developing
npx expo start

Alternative: Install Globally

# Install globally
npm install -g init-expo-app

# Use it anywhere
init-expo-app my-app

Interactive Setup

The CLI will ask you to choose which features you want:

? Add NativeWind (Tailwind CSS for React Native)? Yes
? Add Zustand (state management)? Yes
? Add Axios (API client)? Yes
? Add environment variables support? Yes

All options are enabled by default—just press Enter to accept.

---

✨ Features

🎨 NativeWind (Tailwind CSS)

Write beautiful UIs with Tailwind classes directly in React Native. No StyleSheet boilerplate.

<View className="flex-1 items-center justify-center bg-white">
  <Text className="text-xl font-bold text-blue-500">Hello World</Text>
</View>

🗂️ Expo Router (File-based Navigation)

Modern file-based routing. Create a file, get a route. Simple.

app/
├── _layout.tsx    → Root layout
├── index.tsx      → / (Welcome screen)
├── login.tsx      → /login
├── signup.tsx     → /signup
└── home.tsx       → /home

🐻 Zustand (State Management)

Lightweight, fast, and scalable state management without boilerplate.

// Already set up for you
const { user, setUser, logout } = useAppStore();

🌐 Axios (API Layer)

Pre-configured API client with interceptors for auth tokens and error handling.

import api from './src/api/client';

const response = await api.get('/users');

🔐 Auth Screens Ready

Login, Signup, and Home screens with:

• Form validation
• Loading states
• Error handling
• Navigation flow

📁 Clean Architecture

Scalable folder structure following best practices.

---

📂 What You Get

my-app/
├── app/                          # Expo Router (file-based routing)
│   ├── _layout.tsx               # Root layout with global CSS
│   ├── index.tsx                 # Welcome/Start screen
│   ├── login.tsx                 # Login screen with validation
│   ├── signup.tsx                # Signup screen with validation
│   └── home.tsx                  # Home screen (authenticated)
│
├── src/
│   ├── api/                      # API layer
│   │   ├── client.ts             # Axios instance with interceptors
│   │   └── services.ts           # API service functions
│   │
│   ├── components/
│   │   └── ui/                   # Reusable UI components
│   │       ├── Button.tsx        # Button with variants
│   │       ├── Input.tsx         # Input with validation
│   │       └── Card.tsx          # Card container
│   │
│   ├── store/                    # State management
│   │   └── useAppStore.ts        # Zustand store
│   │
│   ├── hooks/                    # Custom React hooks
│   │   └── useToggle.ts
│   │
│   ├── utils/                    # Helper functions
│   │   └── helpers.ts
│   │
│   ├── constants/                # App constants
│   │   └── theme.ts              # Colors, spacing, fonts
│   │
│   ├── config/                   # Configuration
│   │   └── env.ts                # Environment variables
│   │
│   └── types/                    # TypeScript types
│       └── index.ts
│
├── .env                          # Environment variables
├── .env.example                  # Environment template
├── global.css                    # Tailwind CSS entry
├── tailwind.config.js            # Tailwind configuration
├── metro.config.js               # Metro bundler config
├── babel.config.js               # Babel config for NativeWind
└── app.json                      # Expo configuration

---

🛠️ Tech Stack

Technology	Purpose	Version
Expo	React Native framework	SDK 54
TypeScript	Type safety	5.x
Expo Router	File-based navigation	6.x
NativeWind	Tailwind CSS for RN	4.x
Zustand	State management	5.x
Axios	HTTP client	1.x

---

👥 Who Should Use This?

✅ Perfect For:

• Indie developers who want to ship mobile apps fast
• Startups building MVPs without wasting time on setup
• Freelancers starting new client projects
• Hackathon participants who need to move quickly
• Teams who want consistent project structure
• Developers learning React Native with best practices

⚠️ Not For:

• Projects that need custom navigation (not Expo Router)
• Apps that can't use NativeWind for styling
• Projects with very specific architecture requirements

---

🔧 Run Locally (Development)

Want to contribute or customize the CLI? Here's how to run it locally:

# Clone the repository
git clone https://github.com/Heisenberg300604/init-expo-app.git
cd init-expo-app

# Install dependencies
npm install

# Link the package globally
npm link

# Now you can use it locally
init-expo-app test-app

Project Structure (CLI Source)

init-expo-app/
├── bin/
│   └── init-expo-app.js    # CLI entry point
│
├── src/
│   ├── index.js                  # Main orchestrator
│   ├── prompts.js                # Interactive prompts
│   │
│   ├── modules/                  # Feature modules
│   │   ├── nativewind.js         # NativeWind setup
│   │   ├── zustand.js            # Zustand setup
│   │   ├── axios.js              # Axios setup
│   │   ├── envConfig.js          # Environment setup
│   │   ├── navigation.js         # Expo Router setup
│   │   └── folderStructure.js    # Folder & components
│   │
│   └── utils/                    # Utilities
│       ├── installer.js          # npm install wrapper
│       └── patcher.js            # File patching utilities
│
└── package.json

---

🤝 Contributing

We love contributions! Here's how you can help:

Ways to Contribute

1. 🐛 Report Bugs - Open an issue with reproduction steps
2. 💡 Suggest Features - Open an issue with your idea
3. 📝 Improve Docs - Fix typos, add examples
4. 🔧 Submit PRs - Fix bugs or add features

Development Workflow

# 1. Fork the repository

# 2. Clone your fork
git clone https://github.com/YOUR_USERNAME/init-expo-app.git

# 3. Create a feature branch
git checkout -b feature/amazing-feature

# 4. Make your changes

# 5. Test locally
npm link
init-expo-app test-app

# 6. Commit your changes
git commit -m "feat: add amazing feature"

# 7. Push to your fork
git push origin feature/amazing-feature

# 8. Open a Pull Request

Commit Convention

We use Conventional Commits:

• feat: New feature
• fix: Bug fix
• docs: Documentation changes
• chore: Maintenance tasks

---

⭐ Star History

If this project helped you, please consider giving it a star! It helps others discover it.

---

Made with ❤️ by Nibedan

Report Bug • Request Feature