Setup and the first project

You need Node.js on your computer and the Expo Go app on your phone. A project is created with one command, and the starter template is then cleaned up so you begin with an empty screen.

What you need

Check Node.js in a terminal:

node -v
npm -v

Both commands should print version numbers. You do not need Xcode or Android Studio at first.

Creating a project

Create the to-do list project:

npx create-expo-app@latest todo
cd todo

npx downloads and runs the latest version of the create-expo-app tool. It creates a todo folder with the starter template: two tabs, sample components and dependencies already installed.

Cleaning up the template

The template samples get in the way of learning, so they are removed with a built-in script:

npm run reset-project

The script asks whether to move the old files to an app-example folder or delete them; answering Y moves them, so you can look at them later. Two files remain in app. The main screen is app/index.tsx:

// app/index.tsx
import { Text, View } from 'react-native';
 
export default function Index() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Edit app/index.tsx to edit this screen.</Text>
    </View>
  );
}

This is a regular React component. It shows a line of text in the middle of the screen; how to run it is covered in the next lesson.

Project structure

todo/
├── app/              screens: every file is a screen
│   ├── _layout.tsx   shared wrapper of all screens
│   └── index.tsx     main screen
├── assets/images/    icon, splash screen, pictures
├── app.json          app settings: name, icon
├── package.json      dependencies and npm scripts
└── tsconfig.json     TypeScript settings

Your own components that are not screens go into a components/ folder in the project root, which you create yourself.

Installing packages

Packages for Expo are installed not with npm install but like this:

npx expo install expo-image-picker

The command picks the package version that is compatible with your Expo SDK version.

Common mistake

Putting helper components into the app/ folder, for example app/TaskItem.tsx. Expo Router treats every file in app/ as a screen, and the app gets an extra /TaskItem route. Keep components in components/, and only screens and _layout.tsx files in app/.