Getting Started with Create Expo Stack

Create Expo Stack is a CLI for scaffolding React Native projects with Expo. It saves the hours usually spent wiring up TypeScript, navigation, and styling on a fresh project.

What is Create Expo Stack?

A CLI tool that scaffolds configured React Native projects with Expo. You pick what goes in the stack, it generates the config.

What it configures

• TypeScript
• Navigation (React Navigation or Expo Router)
• Styling (NativeWind, Tamagui)
• Authentication (Firebase, Supabase)

Getting Started

No global install needed. Run:

npx create-expo-stack

Setting Up Your Project

1. Project Initialization

npx create-expo-stack

2. Configuration Choices

The CLI prompts you for each option. What I usually pick:

? What is your project named? » awesome-expo-app
? Would you like to use TypeScript? » Yes
? Which navigation solution would you like to use? » Expo Router
? Would you like to use navigation TypeScript template? » Yes
? Which styling solution would you like to use? » NativeWind
? Would you like to use authentication? » Firebase
? Which package manager would you like to use? » npm

3. What You Get

Resulting structure:

awesome-expo-app/
├── app/
│   ├── (tabs)/
│   │   ├── index.tsx
│   │   ├── profile.tsx
│   │   └── settings.tsx
│   ├── _layout.tsx
│   └── index.tsx
├── components/
├── utils/
│   └── firebase.ts
├── .env
├── tailwind.config.js
├── tsconfig.json
└── package.json

Key Features

TypeScript Configuration

TypeScript is pre-configured:

// app/index.tsx
import { View, Text } from "react-native";

export default function Home() {
  return (
    <View className="flex-1 items-center justify-center">
      <Text className="text-xl font-bold">Welcome to your new app!</Text>
    </View>
  );
}

Navigation Setup

Expo Router gives you file-based routing:

// app/(tabs)/_layout.tsx
import { Tabs } from "expo-router";

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: "Profile",
        }}
      />
    </Tabs>
  );
}

Styling with NativeWind

NativeWind brings Tailwind classes to React Native:

// components/Button.tsx
import { TouchableOpacity, Text } from "react-native";

export function Button({ title }: { title: string }) {
  return (
    <TouchableOpacity className="bg-blue-500 px-4 py-2 rounded-lg">
      <Text className="text-white font-medium">{title}</Text>
    </TouchableOpacity>
  );
}

Firebase Integration

The Firebase option scaffolds:

// utils/firebase.ts
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  // Your Firebase config
};

export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

Notes

1. Environment Variables: The .env file is generated with Firebase variables:

FIREBASE_API_KEY=your-api-key
FIREBASE_AUTH_DOMAIN=your-auth-domain
FIREBASE_PROJECT_ID=your-project-id

2. Type Safety: Type definitions are included.

3. Styling Setup: NativeWind ships with a tailwind.config.js configured for React Native:

// tailwind.config.js
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

When to Use Create Expo Stack

Good for:

• New projects
• MVPs and prototypes
• Learning React Native from a working baseline
• Team projects that need consistent setup

Skip if:

• You need a very specific custom configuration
• You’re adding to an existing project
• You’re building a one-screen app

Wrap Up

Create Expo Stack is what I reach for when starting new React Native projects. It’s a head start, not a lock-in — you can add or remove features after scaffolding.