Start and create a React Native app on your device

Going through the process, solving common errors

I started many React Native apps from scratch using Windows and Mac OS for Android and IOS devices. My first advice : be ready for some tough time.

What is React Native?

React Native is an open source framework for building Android and iOS applications using React.

A key concept is Native Components. Before React Native, there was Android developers and iOS developers, developing in Kotlin, Java, Swift or Objective-C. Now, a Javascript developer can create a mobile app running on iOS and Android. React Native is creating the corresponding Android and iOS native views from a React component.

Actually, React Native is like React, but it uses native components instead of web components as building blocks. If you have already used React, learning React Native will be just cool. If you haven’t… keep reading ;)

Two ways to develop a React Native app

• Using Expo CLI
• Using React Native CLI

If you are a beginner, go for Expo. If you want more advanced features, React Native will fulfill your needs. I explain the differences in a following part.

Using Expo CLI — Fast & Easy

Expo makes life way easier by providing tools to develop your app, display logs, test your app on a device and publish it. Expo is on top of React Native, meaning that a developer can create an app using Expo without native code. It makes development easier but can stop you if you want to use native modules.

If you don’t know what I am talking about, stay in this section and choose Expo. Once you get used to Expo, you can always “eject” Expo (simply running npm run eject ).

Let’s start!

1. Get npm and Node here. Be sure you have a recent version

➜  npm -v
6.14.8
➜  node -v
v14.15.1

2. Runnpm install -g expo-cliin a terminal

3. Then run the following commands:

expo init YourProjectName 
(( select a blank template ))
cd YourProjectName
npm start

4. A QR Code will be displayed in your terminal and in a browser (http://localhost:190XX/). Scan it using the Expo App (available on Play Store and App Store).

An app should be running on your phone (after 5 minutes building).

Once your app is running, you can change the fileApp.js and save. Your app will automatically refresh.

Told you… Fast & Easy

If you face a “connect exception”, scan the QR code from both the “Tunnel” tab or “LAN” tab in your browser. One of them should work ;)

Using React Native CLI

The following content is true for a macOS development OS for an Android device. If you have an other config, check this link.

Tools needed!

Before starting, we will need the following tools :

Node & NPM : Be sure you have a recent version

➜  npm -v
6.14.8
➜  node -v
v14.15.1

Homebrew : Package Manager, we will use it for the coming installation (download here).

Watchman : React Native use Watchman to trigger actions when files are changed. Simple installation using Homebrew : brew install watchman

Java Development Kit : If you have are using an Android device. Run :

brew install --cask adoptopenjdk/openjdk/adoptopenjdk8

Android Studio : You will need to download Android Studio AND install Android SDK + Android SDK Platform.

According to React Native documentation, you have to install Android 10 (Q) SDK in particular. To download this specific SDK, open Android Studio, click on the bottom “Configure” button and open SDK Manager.

Then, check the box next to “Show Package Details” in the bottom right corner. Look for and expand the Android 10 (Q) entry, then make sure the following items are checked (as shown on the screenshot) :

• Android SDK Platform 29
• Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

Same story in the SDK Tools tab, be sure version 29.0.2 is selected. If not, download this SDK version.

Lastly, add the following lines to your PATH:

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

You have all the required tools to get started.

LIFTOFF!

Now, open a terminal and run :

npm install -g react-native-cli

Then :

react-native init YourProjectName

Pray a few minutes and here you go!

The created folder contains your React Native app.

Run on device

You have to enable USB debugging on your device.

First, enable the “Developer options” by going to Settings → About phone → Software information. Tap the Build number row at the bottom seven times. You can then go back to Settings → Developer options to enable “USB debugging”.

You can now plug in you device via USB.

Open a terminal, type :

adb devices

If everything worked well, in the folder ./Library/Android/sdk/platform-tools you should have an “adb” executable. It allows us to detect plugged in devices. In your terminal you should see :

➜  ~ adb devices
List of devices attached
4T89626CC176362736 device

Then, go to YourProjectName folder and simply run :

react-native run-android

…

HA!

What did you think?

Couldn’t be so easy right?

Actually if it does work after the first try, you’re a real hero.

Never happened to me.

It should display a “Welcome to React” message.

If you have an issue (I suppose you do), I’ve listed some common errors I saw :

Common Errors

If you get this error :

Error: Command failed: ./gradlew app:installDebug

You can see many developers (also see here) struggle with that. This displayed issue is not the root cause. So, don’t run on this Error but try to see what failed before.

Running this command to start the project helped me a lot :

sudo react-native run-android

For a reason I can’t explain, it displays more logs, and help me to debug.

ISSUE : NoClassDefFoundError

If you get this error :

ava.lang.NoClassDefFoundError: Could not initialize class org.codehaus.groovy.vmplugin.v7.Java7

Solution :

Edit the ./android/gradle/gradle-wrapper.properties file and replace this line :

distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip

by

distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip

Then, go to the file build.gradle and add this line in buildscript.repositories AND in allprojects.repositories :

repositories {
google() <= this line should already exist
maven { url "https://maven.google.com" } <= add this line
jcenter() <= should exist
}

ISSUE : ANDROID_SDK_ROOT environment variable

SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable

Solution : In the ./android folder, create a file local.properties and add this line :

sdk.dir = /Users/USERNAME/Library/Android/sdk

Conclusion

This Conclusion part is after the “Issue” part. I’m sure no one will see this useless conclusion. If you do, send me a message on Linkedin, that would really (really!) makes me happy!