comment 0

Getting Started with React Native: My Experience

What is React Native? React is a JavaScript library for building user interfaces and React Native is a framework for native mobile development using JavaScript and React. It is maintained by Facebook and others. I started with the Getting Started guide.

I already had the latest Python and Node.js (on Windows 10 – Insider Preview). Next I installed the React Native CLI – npm install -g react-native-cli. Then downloaded and installed Android Studio. Didn’t imagine the install file would be 1.8 GB. A key note from the guide – React Native, however, requires the Android 6.0 (Marshmallow) SDK. I created a projects folder and ran the command – react-native init MyProject. Got the following warning

‘yarn’ is not recognized as an internal or external command, operable program or batch file.
Installing react-native…
Consider installing yarn to make this faster: https://yarnpkg.com

Went to the yarn website and this is what they say

Yarn caches every package it downloads so it never needs to download it again. It also parallelizes operations to maximize resource utilization so install times are faster than ever.

From their install page they reference Chocolatey. The React-Native guide also does. After the project files are created, it says run the command react-native run-android. From here the troubleshooting begins. I ran the command and got the following error message

ERROR: JAVA_HOME is not set and no ‘java’ command could be found in your PATH.

Please set the JAVA_HOME variable in your environment to match the
location of your Java installation.
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

The command to start the AVD Manager is android avd but I got this error (I’m using PowerShell)

android : The term ‘android’ is not recognized as the name of a cmdlet, function, script file, or operable program.

So I had to find the folder containing android.bat and add it to PATH and restart PowerShell. Turned out to be C:\Users\hassan\AppData\Local\Android\sdk\tools but then this

The “android” command is no longer available.
For manual SDK and AVD management, please use Android Studio.
For command-line tools, use
tools\bin\sdkmanager.bat and tools\bin\avdmanager.bat

Added bin to the path. Restarted PowerShell. Command works but there is no GUI and it’s all command line. The GUI can be started from Android Studio – Tools > Android > AVD Manager. I also noticed that there is a Firebase option in the Tools menu. In creating the AVD I saw this message – Recommendation. HAXM not installed, with the option to install. Once I created my AVD I could close Android Studio because I could start the emulator from the command line. This link describes how to control the emulator from the command.

Remember the missing JAVA_HOME from above. Well turns out Android Studio comes with OpenJDK and the path for the JRE was C:\Program Files\Android\Android Studio\jre. Added that to my Environment Variables in Windows.

The command to run the emulator is – emulator -avd YOUR_AVD_NAME. Once the emulator was running I went back to the command to launch the app in the emulator – react-native run-android. It did some downloading, installing and building which took a few minutes and that was it. Share your thoughts with us in the comments below.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s