name: expo-dev
description: Build universal native apps (Android, iOS, web) using Expo framework with React Native. Use when creating new Expo projects, configuring Expo Router navigation (tabs, stacks, drawers), using Expo SDK packages (camera, notifications, storage, location), building with EAS Build, deploying to app stores, handling app configuration (app.json/app.config.js), implementing deep linking, or managing development workflows with Expo CLI.

Expo Dev

Build universal native apps from a single TypeScript/JavaScript codebase.

Quick Reference

Project Setup

# Create new project
npx create-expo-app@latest my-app
cd my-app

# Start development
npx expo start

# Install SDK packages
npx expo install expo-camera expo-notifications expo-location

Project Structure (Expo Router)

app/
├── _layout.tsx          # Root layout (navigation container)
├── index.tsx            # Home screen (/)
├── [id].tsx             # Dynamic route (/123)
├── (tabs)/              # Tab group
│   ├── _layout.tsx      # Tab navigator config
│   ├── index.tsx        # First tab
│   └── settings.tsx     # Second tab
└── (auth)/              # Route group (no URL segment)
    ├── _layout.tsx
    ├── login.tsx
    └── register.tsx

Expo Router Navigation

Stack Navigator

import { Stack } from "expo-router";

export default function RootLayout() {
  return (
    <Stack screenOptions={{ headerStyle: { backgroundColor: "#f4511e" } }}>
      <Stack.Screen name="index" options={{ title: "Home" }} />
      <Stack.Screen name="details" options={{ title: "Details" }} />
    </Stack>
  );
}

Tab Navigator

import { Tabs } from "expo-router";
import { MaterialIcons } from "@expo/vector-icons";

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
          tabBarIcon: ({ color }) => (
            <MaterialIcons name="home" size={28} color={color} />
          ),
        }}
      />
      <Tabs.Screen name="settings" options={{ title: "Settings" }} />
    </Tabs>
  );
}

Navigation Actions

import { router, useLocalSearchParams, Link } from "expo-router";

// Imperative navigation
router.push("/details");
router.push({ pathname: "/user/[id]", params: { id: "123" } });
router.replace("/home");
router.back();

// Get route params
const { id } = useLocalSearchParams<{ id: string }>();

// Declarative navigation
<Link href="/about">About</Link>;

Common SDK Packages

EAS Build & Deploy

# Install EAS CLI
npm install -g eas-cli

# Login & configure
eas login
eas build:configure

# Build for platforms
eas build --platform android
eas build --platform ios
eas build --platform all

# Build profiles (eas.json)
eas build --profile development
eas build --profile preview
eas build --profile production

# Submit to stores
eas submit --platform android
eas submit --platform ios

App Configuration

app.json / app.config.js

{
  "expo": {
    "name": "My App",
    "slug": "my-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": { "image": "./assets/splash.png", "backgroundColor": "#ffffff" },
    "ios": { "bundleIdentifier": "com.company.myapp", "supportsTablet": true },
    "android": {
      "package": "com.company.myapp",
      "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png" }
    },
    "plugins": ["expo-camera", "expo-notifications"]
  }
}

Resources