Artur Chmaro

Artur Chmaro

Full Stack Developer @ Consileon Poland.
Founder of MMORPG.org.pl and ESPORTIVO.net

React Native and Android on OS X

React Native and Android on OS X

Setting up React Native to work with a simulator for iOS apps on Mac is working almost out of the box. However, the configuration of Android simulator is a bit tricky. I followed official tutorials, but for some reason, my simulator was not working. In this article, I will guide you how I started developing Android apps on my Mac. I hope this post will be helpful for React Native rookies and save some of their time.

To start developing Android at OSX, we need to do couple things:

  1. Install Android Studio and JDK for Mac
  2. Configure paths in our system
  3. Install missing packages at Android Studio
  4. Configure and run Android Virtual Device
  5. Build React Native app for Android device

Sounds like a lot of work, but fortunately it’s not as bad as you may think. Enough talk, let’s go!

Download and install Android Studio

Go to the official website and grab installation package. Once you got it extract files start “Custom” installation. Make sure you have checked:

Some of packages could be unavailable but do not worry about it as we can install them through Android Studio app afterward.

Download and install JDK for Mac

Go to the official website and grab installation package:

View post on imgur.com

Extract the archive file and install JDK.
Update: Be careful with Java 10 (try Java 8), some people have troubles with this version.

Configure paths in our system

Using your favorite text editor append the following lines to your ~/.bash_profile config file:

# Android SDK
export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools:${ANDROID_HOME}/platform-tools

Install missing packages at Android Studio

Run Android Studio and go to the SDK Manager:

View post on imgur.com

Make sure you picked and installed Android API and desired versions of Android system you wish to use during development:

View post on imgur.com

Then switch to SDK tools tab and check Android SDK Build-Tools, Android SDK Platform-Tools, Android SDK tools, Google Play services and Support repositories:

View post on imgur.com

Configure and run Android Virtual Device

Now we need to start a new Android Studio project. In the dialog choose Android API version and wait for project success build:

View post on imgur.com

Once build process finished check if there are any TODO actions (Gradle may inform you about some missing elements that you have to install).

View post on imgur.com

If everything went fine now, it is a time for setting up Android Virtual Device which is necessary for our React Native development. Launch our device simulator and create new device:

View post on imgur.com

Once the virtual device is created, launch it and keep it open for whole React Native development process:

View post on imgur.com

Build React Native app for Android device

Finally, it’s an exciting moment to check if everything went fine and our app might be executed on the Android simulator.

I created a simple project using create-react-native-app builder, so to run Android all I need to do is type following commands inside React Native project directory:

$ cd android && ./gradlew clean && cd .. && react-native run-android

View post on imgur.com

Now we are all set, and nothing stops us from developing Android apps using React Native on OSX.

If you change your code, you may be wondering how to reload simulator. Go to your simulator and just hit Command⌘ + M combination. Consider enabling the very handy option: Live Reload. Each time you introduce change to your project simulator will reload and render updated UI.

View post on imgur.com

Got troubles with setting everything up? Let me know in comments, and I will be happy to help you out.

Did you find this post helpful? Got some feedback? Please let me know by leaving a comment below.