Native App Foundations · Lesson 2

Creating and Running our Expo App

Building and running a React Native app using the Expo Framework.

Create an Expo Project

Run npx create-expo-app@latest and give your app a name! Let's call it hueuey.
cd hueuey to move into the newly created folder.
Ask Codex or Claude to explain the generated Expo folder structure. Then compare the answer to the files you can actually see in the project.

This is the first version of the loop we'll use all course: ask AI for help, inspect the result yourself, and keep the parts you can verify.

You'll likely see moderate severity npm vulnerabilities. Don't run npm audit fix. Expo manages its own package versions — blindly upgrading them can break things. Run npm auditif you're curious: the warnings are tooling and build infrastructure, not code that ships in your app.

Building and Running the App

Follow Expo's environment setup guide, and follow the instructions for iOS Simulator and development builds.

Install Xcode 26.4 or later. Xcode is large, so this is not a quick install! Make sure you have plenty of free disk space and expect the download/install to take a while.
Open Xcode after installing it, and allow it to add any required components. Then add an iOS Simulator.
Run npx expo install expo-dev-client. This lets us create a custom development version of our app.
Run npx expo run:ios to build and launch the app on the iOS Simulator.

The first build can take a while because Expo has to generate the native iOS project, install native dependencies, build the app, and launch it in the simulator.

Restarting the Development Environment

Metro is the local development server for React Native. When you run an Expo app in development, the app connects to Metro, which bundles your JavaScript and sends it to the simulator.

ctrl-c will stop the server.
npm start will start it up again.
In the terminal, i will (re)-open the iOS simulator, and a will do the same for the Android emulator. r will reload the app.

We don't have to rebuild the app every time we restart.

Resetting the Project

The default template is useful, but we're going to start fresh. Let's remove the boilerplate and make our first edit.

Run npm run reset-project to reset the project. When prompted, press n so the old example code is deleted instead of moved.
Open the project in your text editor.
Restart the app.

Your first edit

Open src/app/index.tsx. This is your first real React Native file: a <View>, a <Text>, and a StyleSheet — all imported from react-native.

Edit the text inside <Text> and save. The app updates on the simulator immediately — that's Metro's hot reload. No rebuild required.

TypeScript is already configured. Try typing backgr on a style property and watch it autocomplete to backgroundColor. We'll be leaning on TypeScript throughout the course.