Week 1: Expo vs. Bare Workflow & Your First App

1. Expo vs. Bare Workflow

React Native itself is a library for building native iOS/Android apps with React — but almost nobody starts a project with it directly. Two practical starting points exist, and the choice between them matters from day one:

• Expo (managed workflow) — a toolchain and set of libraries wrapped around React Native. Handles native build configuration, provides a huge library of pre-built native modules (camera, location, notifications), and lets you build and update apps without ever opening Xcode or Android Studio directly.
• Bare React Native workflow — the raw framework, with native iOS/Android project folders you own and edit directly. More control, but you're responsible for native build configuration yourself.

This course uses Expo throughout — it removes an enormous amount of native-tooling friction while learning, and as of Expo SDK 51+, "ejecting" from managed Expo is no longer a one-way door: prebuild generates the native folders on demand whenever a project genuinely needs custom native code (covered in the Native Modules phase later in this course), so choosing Expo now doesn't lock you out of anything later.

2. Creating a Project

Install the tooling and scaffold a new project:

npx create-expo-app@latest my-app --template blank-typescript
cd my-app

npx expo start

--template blank-typescript starts with TypeScript configured from the first line of code — this course uses TypeScript throughout, the same as it would be used in any serious React codebase. npx expo start launches the development server and prints a QR code plus a menu of ways to open the app.

3. Project Structure & Metro

A fresh Expo project's structure, and what actually matters in it:

my-app/
├── app.json          ← app name, icon, splash screen, native permissions
├── package.json
├── App.tsx            ← the entry component -- your app starts here
├── assets/            ← images, fonts
└── tsconfig.json

Metro is React Native's JavaScript bundler — the equivalent role Webpack or Vite plays for a web React app, but purpose-built for React Native's needs (bundling per-platform code, fast refresh during development, resolving .ios.tsx/.android.tsx file variants covered in Week 3). It's what npx expo start actually launches, watching your files and serving the current JS bundle to whichever device connects.

{
  "expo": {
    "name": "My App",
    "slug": "my-app",
    "version": "1.0.0",
    "icon": "./assets/icon.png",
    "splash": { "image": "./assets/splash.png" },
    "ios": { "bundleIdentifier": "com.yourname.myapp" },
    "android": { "package": "com.yourname.myapp" }
  }
}

bundleIdentifier/package are your app's permanent unique ID on each store — worth setting deliberately now, since changing it later (once an app is published) is disruptive.

4. Running on a Device

Three ways to actually see the app running, in increasing order of fidelity:

# 1. Expo Go on a physical phone -- fastest to start, scan the QR code
npx expo start
# Scan the printed QR code with the Expo Go app (iOS/Android)

# 2. iOS Simulator (Mac only, requires Xcode)
npx expo start --ios

# 3. Android Emulator (requires Android Studio)
npx expo start --android

Expo Go is a pre-built native app (downloadable from either app store) that dynamically loads and runs your JS bundle — no native build step required at all while you're prototyping. It's the fastest possible loop for early development, though it can't load truly custom native code (that's what prebuild and a development build are for, once Native Modules week arrives).

5. Your First Screen

App.tsx is the root component — this looks almost exactly like a web React component, with one crucial difference: there's no HTML. React Native has its own set of built-in components (covered fully next week), and <div>/ <span> simply don't exist here.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, React Native!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: '600',
  },
});

View and Text are the two components you'll use more than any other in this course — View is the layout container (roughly a <div>'s job), Text is the only component allowed to contain literal text (unlike the web, plain text can't sit directly inside a View). Both get covered in full depth next week.

6. Hands-on Exercise

7. Knowledge Check

Four quick questions. Expand each to check your answer.