React Native Installation on both Windows and iOS Systems

Install React Native on Windows:

Step #1: Install these Dependency Softwares:
  • Node.js: Download and install latest version of node.js from nodejs.org
  • Python: Download and install latest version of node.js from python.org
  • JDK: Download and install latest version of node.js from oracle.com
  • Android Studio: Download and install latest version of Android Studio from developer.android.com
  • React Native CLI: After Installing node.js you can access npm package to install react native through npm. Run the following command in the cmd.

Step #2: Add Environment Variables for JAVA_HOME and ANDROID_HOME.
  • Go to My Computer icon.
  • Select Properties:

  • Select Advanced system settings:

  • Select Advanced Tab.
  • Click on Environment Variables:

Under System variables click on New button to add new System variable.

  • Add System variable for Java.

Note: Variable name text box’s value must be JAVA_HOME and Variable value may be different depending on your JDK installation path.

  • Now, again click on New button and Add System variable for Android.

Note: Variable name text box’s value must be ANDROID_HOME and set path of Android sdk in Variable value text box.

Step #3: Install Android System API for Android 6.0 (Marshmallow).
  • Open Android Studio and create a new Project.
  • Click on SDK Manager icon.

  • Check Android 6.0 (API 23) from a given list and click on Install button.

Step #4: Create and start Android Virtual Device.
  • Click on AVD Manager button to create Android Virtual Device.

  • Click on Create Virtual Device button.
  • Select your device according to your configuration and click on Next button.

  • Select Marshmallow OS System Image and click on Next button.

  • Set Your AVD Name and choose orientation (Portrait recommend) then click on finish button.
  • After creating AVD just click on Run button to start your created AVD.

Step #5: Now after completed all the above steps, it’s time to create a new and fresh react native project.
  • First open command prompt and go to the location( C:\Anything, D:\Anything or etc. ), where you want to save your New Project.
  • Now, type the following command in the command prompt to create a new project.

Note: You must have active internet connection in order to create a new project. It’s take time to create a new project, because it downloads all the required files and assets to setup a new project.

  • After created a new project successfully, you will get following output:

Step #6: Open your newly created project [ D:\Code\ReactProj\android ] folder into Android Studio to make necessary changes and update files for your project, which are required by Android Studio to make it run.
Step #7: Run your project
  • Using following commands move from present working directory( pwd ) to your newly created react native project directory and run your project:

  • After applying the above commands, compilation process starts and finally you will get the following output in command prompt.

  • And finally, you will get following output in your emulator/device.

Install React Native on MAC:

Step #1: Install Homebrew:
  • We have to install all dependency softwares, which are required to setup and run react native project through homebrew.
  • Open terminal and paste following command to install homebrew on your MAC system:

Step #2: Install latest version of node.js:

Step #3: Install watchman:

Step #4: Install latest version of React Native CLI:

Step #5: Install Xcode command line tools

Open Xcode -> Preferences -> Locations tab -> install latest version of Xcode command line tools.

Step #5: Create fresh react native project

Step #6: Open ReactProj.xcodeproj in Xcode [ ReactProj -> ios -> ReactProj.xcodeproj ]
Step #7: Click on run button to run project or you can use following command in terminal to run newly created project.

And finally, you will get following output in your emulator/device.

Congratulation guys, you are now ready to become both an iOS and Android Developer… 😎

One Comment

  1. Very helpful tutorial. Thank you sir.

Leave a Reply

Your email address will not be published. Required fields are marked *