0

Create React Native Project – Working Setup for Android

This post demonstrates a working setup of React Native project.

Requirements

Stuff used for this post.

Set Up New Project

Install React Native

Install Android Studio

This can be done even prior to installing react-native-cli.

Create a new Project

As of this writing, there is a bug in react-native@0.57.2 (https://github.com/facebook/react-native/issues/21490). For this post, we’ll change a file in the metro-react-native-babel-preset module to make things work.

For real projects, either downgrade to 0.57.1 or wait for a new release.

Then, go inside the project folder.

We now have several files and folders.

Start the Metro Bundler

Keep this application running the whole time.

Set some environment variables

Note that we are in another command-line window.

Plug in Our Phone

Plug in our phone now before running the following command in a separate window.

In case we forgot to plug in our phone, we will get the following error:

Done…But

If we go back to the first window where we the Metro Builder is running, we will have:

Modify file

Please don’t do this on real projects.

Restart Metro Bundler

Restart Metro Bundler with cleared cache.

Do “react-native run-android” in another window

Our App on Mobile Device

How to downgrade to react-native@0.57.1

    1. Stop the Metro Bundler
    2. Delete node_modules folder
    3. Update package.json as follows
    4. Run
    5. Start Metro Bundler with cleared cache
    6. On the other windows, do
Karl San Gabriel

Karl San Gabriel

Java and Enterprise Technologies Expert