Creating Your First React Native App

Three commands take you from an empty folder to a running development server. The first creates the project, the second enters its folder, and the third starts the server that delivers your code to a phone. Before you run them, you need one tool on your computer and a decision about how to view the result.

Installing Node.js

React Native's tools run on Node.js, so install the current LTS (long-term support) version from nodejs.org. The installer includes npm, the Node Package Manager, which downloads the libraries your project uses. It also includes npx, which runs a command-line tool from a package without a global install.

Choosing a Way to Create the Project

There are two ways to create a React Native project, and they differ mainly in who manages the native parts of the application.

Expo is a framework built around React Native. It generates and manages the native projects for you, so you can start writing JavaScript without installing Android Studio or Xcode. The React Native documentation recommends a framework such as Expo for new applications, and every lesson in this course runs in an Expo project.

The React Native Community CLI creates a project with the android and ios native folders already present, and you maintain them yourself. It gives you direct control, but you must set up the complete Android and iOS toolchains first. A short section at the end of this lesson shows the commands.

Creating the Project with Expo

Run these commands in a terminal, one at a time:

npx create-expo-app@latest MyFirstApp --template blank
cd MyFirstApp
npx expo start

The first command creates a folder named MyFirstApp and installs the dependencies, which can take a minute or two. The --template blank option selects the smallest starting project, with one screen in JavaScript and no navigation. The last command starts a development server and prints a QR code in the terminal.

Older tutorials tell you to run npm install -g expo-cli and expo init, or npx react-native init. Those commands are no longer available, so use the ones above.

Opening the App on a Device

The server is now waiting for a device to ask for your code. Choose the option below that matches the equipment you have.

• An Android phone: install Expo Go from Google Play, then scan the QR code with it. Expo Go is an application that loads and runs your project during development. Your phone and your computer must be on the same Wi-Fi network.
• An Android emulator: install Android Studio and create a virtual device in its Device Manager, then press a in the terminal. Expo installs Expo Go on the emulator for you.
• An iOS simulator: this needs a Mac with Xcode installed. Press i in the terminal, and Expo installs Expo Go on the simulator for you.
• An iPhone: this path has the most steps, as explained below.

The Expo Go application in the Apple App Store stops at SDK 54, and a new project uses a later SDK. An Expo SDK is a numbered release of Expo's libraries, and each build of Expo Go runs exactly one SDK. To use a physical iPhone, you need a paid Apple Developer Program membership. You then build your own copy with npx eas-cli@latest go, install it through TestFlight, Apple's application for installing test builds, and sign in to the same Expo account in Expo Go and with npx expo login. If this is more than you want to set up today, an Android phone, an emulator, or a simulator teaches you the same material.

The same version rule can affect Android, because the Google Play version of Expo Go can lag behind a new SDK. If you see the message "Project is incompatible with this version of Expo Go", visit expo.dev/go, select your project's SDK and platform, and install that build. Your project's SDK is the first number of the expo version in its package.json file. If the QR code does not connect on a public network, stop the server and restart it with npx expo start --tunnel, which is slower but avoids many network restrictions.

When a device connects, the terminal prints a line like this one, with a time and module count that will vary:

Android Bundled 4613ms index.js (744 modules)

That line reports the work of Metro, the bundler that Expo starts for you. A bundler reads your code and everything it imports, then joins them into one file that the device can load. In this run, it joined 744 modules, most of which are React Native itself rather than your own code. The project structure lesson explains why the line names index.js rather than App.js.

Changing the First Screen

Open App.js in a code editor. The blank template created this component:

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',
  },
});

The View is a container and the Text displays the message. StatusBar controls the appearance of the bar at the top of the phone that shows the time and battery. StyleSheet defines the styles that make the View fill the screen and center its content. A later chapter explains styling, so for now you only need to leave that block in place. Without it, the text moves to the top of the screen, where the status bar can cover it.

Now replace the message and add a second line that asks React Native which platform it is running on:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello from my first app!</Text>
      <Text>Running on {Platform.OS}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

The curly braces insert a JavaScript value into the text, which the next chapter explains in detail. Save the file. On iOS, the screen now shows this text:

Hello from my first app!
Running on ios

On Android, the second line reads Running on android. You changed no native code, and one source file produced the correct result on each platform.

You also did not restart anything, because the development server was watching the file.