Environment Setup

Before we write any React Native code, we need a working development environment. In this article, we will pick a toolchain, install everything we need, create a project, and run it on a real device.

Two ways to build React Native apps

There are two main ways to start a React Native project:

1. Expo — a framework and set of tools built on top of React Native. It handles the native build setup for you, so you can focus on writing JavaScript.
2. Bare React Native CLI — you manage the native iOS and Android projects yourself. This requires Xcode and Android Studio from day one.

Here is a quick comparison:

	Expo	Bare React Native CLI
Setup time	Minutes	Hours
Xcode or Android Studio required	No (optional)	Yes
Run on a real phone	Scan a QR code	Cable plus native build
Custom native code	Via config plugins and dev builds	Full control
Best for	Learning, most apps	Heavy native customization

Which one should you pick?

Use Expo. It is the officially recommended way to start a new React Native app, and everything you learn with Expo is still React Native. You can always add custom native code later with a development build, so you are not locked in.

The rest of this series uses Expo.

Install Node

React Native tooling runs on Node. You need an LTS version of Node (version 18 or newer).

Check if you already have it:

node --version

If the command fails or shows an old version, install the LTS release from the official Node website, or use a version manager like nvm:

nvm install --lts
nvm use --lts

You do not need to install anything globally for Expo. The npx command that ships with Node will download the right tools on demand.

Install Expo Go on your phone

Expo Go is a free app that runs your project on a real device without any native build step.

1. On Android, install "Expo Go" from the Play Store.
2. On iOS, install "Expo Go" from the App Store.

Your phone and your computer must be on the same Wi-Fi network for this to work.

Create a project

Now let's create the app. Open a terminal, move to the folder where you keep your projects, and run:

npx create-expo-app@latest my-first-app --template blank

note

We use the blank template because it gives us a single App.js file, which is perfect for learning. The default template ships with file based routing and TypeScript, which we do not need yet.

When it finishes, move into the project and look around:

cd my-first-app

The important files are:

my-first-app/
├── App.js           # your application code starts here
├── app.json         # app name, icon, splash screen config
├── package.json     # dependencies and scripts
├── index.js         # entry point, registers App.js
└── assets/          # icons and images

App.js is where we will spend almost all of our time. It exports a normal React component:

App.js

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

We will break this file down line by line in the next article.

Start the development server

From inside the project folder, run:

npx expo start

This starts the Metro bundler, which compiles your JavaScript and serves it to any connected device. You will see a QR code in the terminal along with a list of keyboard shortcuts.

Run the app on your phone

1. Make sure your phone and computer are on the same Wi-Fi network.
2. On Android, open Expo Go and scan the QR code from inside the app.
3. On iOS, open the regular Camera app, point it at the QR code, and tap the notification.

The app loads on your phone. Now open App.js, change the text inside the Text component, and save the file. The app updates on your phone almost instantly. This is called Fast Refresh, and it is one of the best parts of the React Native workflow.

caution

If the QR code loads forever, your phone and computer are probably on different networks. You can also try tunnel mode, which works across networks: npx expo start --tunnel

Run the app on a simulator

A real phone is enough for this whole series, but simulators are handy when you don't want to reach for a device.

iOS Simulator (macOS only)

1. Install Xcode from the Mac App Store.
2. Open Xcode once so it can finish installing its components.
3. With npx expo start running, press the i key in the terminal.

Expo opens the iOS Simulator and installs your app in it automatically.

Android Emulator

1. Install Android Studio.
2. Open it, go to the Device Manager, and create a virtual device (any recent Pixel with a recent API level works fine).
3. Start the virtual device.
4. With npx expo start running, press the a key in the terminal.

The app builds and opens inside the emulator.

tip

You don't need simulators to follow along. Expo Go on a real phone gives you the fastest feedback loop, and you get to feel the app the way your users will.

Conclusion

You now have a complete React Native development environment: Node, an Expo project created with create-expo-app, and the app running on a phone through Expo Go or on a simulator. In the next article, we will dissect App.js and learn the core building blocks of every React Native screen.