Environment

    There are two common ways to set up a React Native development environment: expo-cli and react-native CLI.

    expo-cli

    This is a command-line utility for configuring and publishing React Native projects. This is the best way to get started as a beginner. This tool generates a QR code which you can scan to launch the app on your device. As you update your code, the changes will automatically be reflected on your device. In order to preview the app on your device, you'll be prompted to download the Expo app, which is a React Native app previewing client.

    The downside to this approach is that it only works for pure-JavaScript apps. If at any point you need to use native modules (Swift, Kotlin, etc), you'll need to eject. The expo-cli utility provides an eject command to export your app into the same format used by react-native CLI, which you can then add native modules to.

    The company behind expo-cli, Expo, has been heavily involved in the React Native codebase and community since it's inception, so you can be confident that the tool is well-maintained and doesn't deviate too much from a "standard" React Native setup.

    We'll walk through setting up a project in the next section, Quick Start.

    React Native CLI

    If you're integrating React Native into an existing native app, or if you know you'll need custom native modules in your app, you'll want to use the react-native CLI to create your app. You can read how to do this on the Facebook docs for environment setup. Click on the "React Native CLI Quickstart" tab.

    In terms of the JavaScript code, the main difference from expo-cli is that react-native apps require registering the root component of your app using AppRegistry.registerComponent, e.g:

    This allows you to optionally have multiple React Native root components, which you might embed into different native screens.

    This code isn't required when using Expo, since Expo only allows one root component. Expo automatically registers the default export of App.js as your root component.

    Up Next

    The following section will guide you through setting up a React Native app with expo-cli.

    Want to learn React Native in-depth?

    If you like React Native Express, you'll love my new book, Fullstack React Native: The complete guide to React Native! Throughout the book, we'll build 7 full apps, covering complex topics like navigation, gestures, and native modules. We don't assume any knowledge of React or newer JavaScript language features, so you can dive right in regardless of your experience level. The book comes in PDF, EPUB and MOBI formats.

    Looking for more help?

    Infinite Red sponsors React Native Express and is the premier React Native agency. They're also the team behind the React Native newsletter, podcast, and conference listed here. Get in touch at infinite.red/react-native for a proposal on your next project!