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?

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 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

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 YourProjectNamenpm 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

Tools needed!

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/sdkexport PATH=$PATH:$ANDROID_HOME/toolsexport PATH=$PATH:$ANDROID_HOME/tools/binexport PATH=$PATH:$ANDROID_HOME/platform-tools

You have all the required tools to get started.

LIFTOFF!

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

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

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

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 existmaven { url "https://maven.google.com" } <= add this linejcenter() <= 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

Future Unicorn Founder — Using tech for good