React Native Development, Getting Started with Android and iOS

Sunil Kumar
Nov 26, 2017 · 5 min read

Have been lately working and writing developer guides on Ionic Framework and Google Firebase, stepped into React Native and was surprised with its performance, want to know why? well, React Native is not a hybrid native app development framework. Unlike, Ionic Framework; React Native renders without using a WebView which helps boost the performance.

Many developers struggle to get it started so thought of sharing how to setup your Mac workstation to be able to build React Native applications for fellow developers.

Make sure you have Homebrew, Xcode and Android Studio installed then start with latest version of nodejs and watchman:

brew update // run this to update your existing brew installationbrew install watchman // install new fresh watchmanbrew upgrade watchman // update existing watchman

If you encounter error — “could not link, delete path first” see this solution

Now lets install the React Native CLI as below:

sudo npm uninstall -g react-native-cli // if already installedsudo npm install -g react-native-cli

Setting up Android Development Environment

Installing Java Development Kit SE 8+ and setting up the environment variable:

Download Mac OS X {currentversion}-macosx-x64.dmg

Open terminal and type “vi ~/.bash_profile” this will open the bash profile in vi editor.

To enter into insert mode press i on your keyboard, then add path to your JDK (Note: ver 9 fails as of now with react native, instead use ver 8)

export JAVA_HOME=`/usr/libexec/java_home -v 1.8.0_101` //just update the version number 9.0.1 to your latest

To exit insert mode press esc on your keyboard, to save changes hold down the Shift key and press colon key hit enter/return. Then type wq hit return/enter.

In the same terminal window type “source ~/.bash_profile” to be in active session. Now to check if all is set well. We will type echo $JAVA_HOME. This should give you below output:

-bash: /Library/Java/JavaVirtualMachines/jdk1.8.0_101.jdk/Contents/Home: is a directory

Download and install Android Studio, choose custom install with below options:

Android SDKAndroid SDK PlatformPerformance (Intel ® HAXM)Android Virtual Device

Since React Native needs Android 6.0 (Marshmallow) SDK above, “Welcome to Android Studio” screen. Click on “Configure” at the bottom right, then select “SDK Manager” or look into Android Studio “Preferences” dialog, under Appearance & Behavior → System Settings → Android SDK.

Install the SDK 6.0 with below options:

Google APIsAndroid SDK Platform 23Intel x86 Atom_64 System ImageGoogle APIs Intel x86 Atom_64 System Image

Next, install the Android SDK Build-Tools from Android Studio > SDK Tools tab, make sure that you have minimum23.0.1 and then configure your ANDROID_HOME environment variable.

Open terminal and type “vi ~/.bash_profile” this will open the bash profile in vi editor.

To enter into insert mode press i on your keyboard, then add path to your JDK

export JAVA_HOME=`/usr/libexec/java_home -v 9.0.1`*******Add this below like JAVA_HOME for mine*******
export ANDROID_HOME=/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
*******Add this below like JAVA_HOME for mine*******

To exit insert mode press esc on your keyboard, to save changes hold down the Shift key and press colon key hit enter/return. Then type wq hit return/enter.

In the same terminal window type “source ~/.bash_profile” to be in active session. Now to check if all is set well. We will type echo $ANDROID_HOME. This should give you below output:

/Library/Android/sdk

You can also find the location of your Android SDK in the Android Studio “Preferences” dialog, under Appearance & Behavior → System Settings → Android SDK.

Creating your first React Native app use below command:

react-native init MyfirstReactapp

If, all goes well you see below:

Done in 16.52s.To run your app on iOS:cd /Users/....../MyfirstReactappreact-native run-ios- or -Open ios/MyfirstReactapp.xcodeproj in XcodeHit the Run buttonTo run your app on Android:cd /Users/...../MyfirstReactappHave an Android emulator running (quickest way to get started), or a device connectedreact-native run-android

Update your build.gradle to :

dependencies {
classpath 'com.android.tools.build:gradle:2.3.3'
}

And, for below error:

The SDK Build Tools revision (23.0.1) is too low for project ':app'. Minimum required is 25.0.0

Solution: update inside your project /app/build.gradle as below:

android {
compileSdkVersion 25
buildToolsVersion "25.0.1"

How to run the app MyfirstReactapp on your connected Android device:

  1. Enable USB Debugging: SettingsAbout phone, tapping the Build number at the bottom seven times. Then go back to SettingsDeveloper options to enable "USB debugging".

How to publish your app MyfirstReactapp on Google Play Store:

  1. You can distribute your Android application via Google Play store, once you have generated a signed release APK.
MYAPP_RELEASE_STORE_FILE=myfirstreactapp-release-key.keystoreMYAPP_RELEASE_KEY_ALIAS=myfirstreactapp-key-aliasMYAPP_RELEASE_STORE_PASSWORD=####MYAPP_RELEASE_KEY_PASSWORD=####

5. Updating app’s gradle config as below:

android {signingConfigs {release {if (project.hasProperty(‘MYAPP_RELEASE_STORE_FILE’)) 
{
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}}buildTypes
{
release { signingConfig signingConfigs.release }
}
}

6. Generate the release APK run this in your terminal:

cd android && ./gradlew assembleRelease

Above generated APK can be found here:

android/app/build/outputs/apk/app-release.apk

Test your release build by running on your device:

react-native run-android -variant=release

If, you encounter below error please read this solution

* What went wrong:Could not determine java version from ‘9.0.1’. 

For, iOS publishing steps please read. Happy publishing react native apps!


Sunil Kumar

Written by

Angular, Ionic, Capacitor Developer, WordPress WooCommerce, Google Firestore and Cloud Function Expert