Wednesday, 13 July 2016

Installing React Native for Newbies - Windows

React Native Installation details are provided by Facebook:

But there are many pitfalls which you will come across which are not well defined in one place so I wanted to create this post where I list out all the huddles I had to resolve in order to get it up and running.

1. Easy bits - Install Java, Android SDK, Chocolatey -> Python2 and NodeJs, React Native CLI using NPM

2. Once you follow the facebook document and end up installing the above, you will possibly see error when you try to run your first project (using react-native run-android):

SDK location not found. Define location with sdk.dir in the file or with an ANDROID_HOME environment variable.

So you will need to add the paths to JAVA, Android, etc in your environment variable for windows

a. Go to Control Panel -> System -> Advance System Settings -> environment variables.
b. Add / Edit User variables: 

  • ANDROID_HOME and your Android SDK path
  • JAVA_HOME and your Java sdk path
  • Edit System Variables -> Path and add %JAVA_HOME%/lib;%ANDROID_HOME%\sdk\tools;%ANDROID_HOME%\platform-tools;

c. Add a file in your React Native project directory called and add content sdk.dir=<android_sdk_path/> and replace <android_sdk_path/> with your Android SDK path.

3. Now if you try running your project again you will end up with another error 

Failed to find target with hash string 'android-23'

For this you need to open up your android SDK manager which is in the root of your SDK folder and install Android 6.0 (API 23) as illustrated,

4. Once that is done restart your terminal and try re running your project. The error you might see now is something like:

Execution failed for task ':app:installDebug'.
> No connected devices!

Which basically means your Android emulator is not setup and / or running.

You can set your emulator up by

  • List all android devices by android list targets
  • Add a new Emulator by android create avd -n <name> -t <target> --abi default/x86_64 ... Where <name> is the name of the emulator and target is the id you got from the above.
  • And then run the emulator by  emulator -avd

Fingers crossed if you run your React Native project now it should all work!