4th Street Bar Hive-Bar

Hive-Bar Powered by Hive beta-fdb5b5b

Community post

How to Install React Native in Windows for Android Development

header.png
source

Hi, in this tutorial I will show you how to install react native on a windows computer for android development.

What Will I Learn?

  • Install react native package with node.js
  • Create and run react native apps.

Requirements

  • Java (JRE and JDK).
  • Node.js
  • Python2
  • Android Studio

Difficulty

  • Basic

Get Started

Okay, to get started first we need to download and install certain application before we get straight to react native.

Install Java

Android requires both JRE (Java Runtime Environment) and JDK (Java Development Kit) to work. You can download java here https://java.com/en/download/. After you have download and install both JRE and JDK, you need to setup PATH for JDK. In my case I name it JAVA_HOME.
path.png

Install Android Studio

Okay, why we need Android Studio when we are going to use React Native to develop android apps? Because React Native require Android Studio gradle to sync and build the project. To install Android Studio you can go here https://developer.android.com/studio/index.html.

Install Python2

Why do we need python? Because react native build system was based on Python2. You can download it here https://www.python.org/downloads/. Make sure to download Python2 not Python3.

Install Node.js

We will need node.js package manager called npm to install react native package. Go ahead to https://nodejs.org/en/ to download. The node.js version I'm using in this tutorial is version 8.9.4 LTS. After you have installed node.js, you need to make sure it is installed properly. You can check it by opening the command prompt and type node -v. If it shows you the node.js version, then you are good to go.
Untitled.png

Install React Native

Now it's time to install React Native. We can install react native package by typing npm install -g react-native-cli from the command line.
Untitled1.png
Alright now you have successfully installed React Native on Windows. But let's try to create an app and run to see if it is working.

Create React Native Apps

To create react native apps, you can do it with typing react-native init HelloWorld. In my case I named it HelloWorld but you can name it whatever you like.
create-project.png

Okay now you have create your project, now we need to open the project from Android Studio. Open the android folder inside project directory, in my case it is D:/Project/React Native/HelloWorld/android.
directory.png
If Android Studio shows an error "Failed to sync with gradle", don't panic just click sync and let Android Studio handle everyting. Once sync is finished, it's time to create a virtual device. You can either use a real android device or create virtual device. In this tutorial I will just create a virtual device. You can create a virtual device using AVD Manager inside Android Studio. Then run the virtual device.
avd.png

We are almost done. Now open the command line and run react native by typing react-native start.
react-native-start.png

And now we will run the apps by typing react-native run-android inside the project directory. Once it finish building the project, it will show up directly in your virtual device.
run-app.png
result-when-run.png

Congratulations! You have just create your first Android apps with React Native.
If you want to dive deeper into react native, you can check out the documentation below.

Documentation

https://github.com/facebook/react-native



Posted on Utopian.io - Rewarding Open Source Contributors

14 upvotes $9.01

Replies (7)

Review before signing

Posting as . Signing with . Keychain permission: Posting. Hive Keychain will ask you to approve this action next.


  
Technical details

Operation fingerprint: