A complete guide to creating your first Expo project and running it on iOS, Android, and Web platforms.
Expo is a framework and platform for universal React applications. It allows you to build native iOS and Android apps using JavaScript and React, and also run them on the web. This tutorial will guide you through setting up your development environment and creating your first Expo app.
This tutorial assumes you have basic knowledge of JavaScript and React. If you're new to React, I recommend learning the basics first. Check out my CV for more information about my experience with React Native development.
Expo requires Node.js. Download and install the latest LTS version from the official website.
# Check if Node.js is installed
node --version
npm --version
If you don't have Node.js installed, visit nodejs.org and download the LTS version.
The Expo CLI is a command-line tool that helps you create and manage Expo projects. For detailed installation instructions, check the official Expo documentation.
npm install -g @expo/cli
This installs the Expo CLI globally on your system.
For iOS development, you'll need Xcode (macOS only). For Android development, you can use Android Studio or just the Expo Go app.
For web development, no additional tools are needed beyond what's already installed.
Use the Expo CLI to create a new project. Choose the "blank" template for a minimal setup.
npx create-expo-app MyFirstApp
# Or with TypeScript
npx create-expo-app MyFirstApp --template blank-typescript
cd MyFirstApp
npx expo start
This will start the Expo development server and open a browser window with the Expo DevTools.
Download and install Xcode from the Mac App Store. This is required for iOS development.
Open Xcode and go to Preferences > Components to install the iOS Simulator.
With your Expo development server running, press i in the terminal or click "Run on iOS simulator" in the Expo DevTools.
For full Android development, install Android Studio. However, you can also use the Expo Go app for testing.
Download the Expo Go app from the Google Play Store on your Android device.
With your development server running, scan the QR code displayed in the terminal or Expo DevTools using the Expo Go app.
Press a in the terminal or click "Run on Android device/emulator" in the Expo DevTools.
Press w in the terminal or click "Run in web browser" in the Expo DevTools.
This will open your app in a web browser using the Expo web runtime.
Let's explore the files created by Expo:
MyFirstApp/
├── App.js # Main app component
├── app.json # Expo configuration
├── package.json # Dependencies and scripts
├── assets/ # Images and other assets
│ ├── icon.png
│ ├── splash.png
│ └── favicon.png
└── node_modules/ # Installed dependencies
The App.js file is where you'll write your React components. The app.json file contains configuration for your Expo app, such as the app name, icon, and splash screen.
Congratulations! You now have a working Expo app running on multiple platforms. Here are some next steps to continue your learning: