Bootstrapping a React Native Application with react-native init With Android Studio

I recently bootstrapped my first React Native application. Even though most guides covered getting started with Expo and react-native init using iOS, any sort of proper guide to doing it with Android Studio was…missing. I wont admit how long it took me to figure everything out but here is the guide I wish I found when I started.

---

Prerequisites

Before you start you should should make sure you have all of the following installed:

• Android Studio + Android SDK (Whatever the current version supported by react native at this time is)
• Node.js
• React Native Debugger

In addition you should also have the following NPM Packages installed

• yarn
• react-native

Initializing the App

Start by initializing the app by issuing

react-native init <App-Name>

React Native should now run the script to initialize the app. After this, the script will inform you that you can run the app on an android device if you run

react-native run-android

For me this command worked about 20% of the time, often times failing to connect to the packager after the app compiled. The more reliable way I found is to compile the app through Android Studio.

To do this open Android Studio and open the ‘android’ folder in the root of your project. Run the metro packager by running yarn start in the terminal and also run the react native debugger. Both of these applications will wait for the application to connect to it.

When you open Android Studio and build for the first time you might come across the following error

Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.It will be removed at the end of 2018....

To fix this right click on the app folder on the left hand size and scroll all the way to the bottom of the context menu and click on “Open Module Settings”. There go to the “Dependencies” tab and change all the “Compile” values in the scope tab to “Implementation”.

Once you build the app it should connect to the metro packager, if the metro packager for some reason hangs on packaging, reload the emulator by hitting “R, R” on the emulator. It should kick off the packager to automatically reload.

---

Once your app comes you you will want to hit CTRL + M to enter the developer menu. There select “Enable Hot Reloading” to enable hot module reloading, additionally select “Debug JS Remotely” and your emulator will connect to the remote debugger that you opened earlier automatically.

There you have it, a successfully boilerplated React Native application with react-native init and Android Studio.