In this section, we are going to describe how to configure your React Native development environment. The developer tools and the way we set everything up is entirely inspired by how we do the day to day mobile app development in React Native at Instamobile.
0. Run an Empty React Native App on Your Computer
If this is the first time ever that you run a React Native app, you must follow the official guide first. Create an empty app and make sure it builds and runs properly on your computer. Follow the steps outlined in the official React Native documentation. Make sure you do not use Expo CLI, but React Native CLI.
1. Install Basic React Native Development Tools
2. Configure React Native Development Environment for Android
Let’s see how you can set up your development environment in order to run React Native apps. The setup shouldn’t take more than 5 minutes. What do you need to install?
- Node (NPM) and React Native
- Yarn
- Git
- (Optional, but Recommended) Visual Studio Code
- (Optional) Android Studio
Alright, let’s see how we install all of these. Simply follow the next steps:
- Install Node by following the official guide
- Install Git by following the steps in this guide
- Install Yarn by running the command:
npm install --global yarn
- Install & Configure React Native by following this guide, the React Native CLI version. DO NOT USE Expo CLI!!
- Download & Install Visual Studio Code (recommended for developing React Native apps, especially on Windows, due to its powerful Terminal)
- Download & Install Android Studio (needed only if you don’t have a physical Android device)
Looks simple, right? It actually is. This is all you need to do to run React Native apps on Android devices or emulators.
3. Configure React Native Development Environment for iOS
a. Install Cocoapods
b. Install Xcode You can find detailed explanations on how to install these tools in the Running on iOS section.
4. Install More Advanced Developer Tools
We highly recommend you to install the React Native Debugger tool. It helps you debug React Native apps with breakpoints, visualize the redux state changes in real-time and inspect the view hierarchy. We wrote a full article on how to debug React Native apps using the React Native Debugger.