Tutorials

Article Content:Install React Native On Windows 7 steps

Install React Native On Windows 7 steps

Install React Native On Windows 7 steps.

If you want to develop with react native ,There is two main ways to install react native

1- Basic install

2- Advanced Install

The main difference is:

1-With basic install you only download react native basic library with its dependencies, but when use Advanced install you will add expo dependences addition to react native library which AS example dealing with native components

2-With advanced install you can run your app without emulator or simulator, no android studio or xcode, just run the app from console and this will generate Qr code , then install expo app in your mobile from play store ,open it ,scan the Qr code and you will see the app run in your phone.

3-You can eject any time (mean is return to basic install) with one line in the console npm run eject

4-With Advanced install you cannot add native code to your project but you must reject to use the native code (React native Allow to use Native Code into your project).

IN This tutorial we will go through react native installation steps let is do it.

Install React Native On Windows

1-    Go to https://chocolatey.org page and click Install Chocolatey Now , it is the safe way to install all tools,    Copy Code under Install with cmd.exe title, Open command line with Right Click->Run as Administrator , paste the code and press Enter.

2-After finish , Copy and Paste this code into the same command line window choco install -y nodejs.install python2 jdk8 To install these tools (node-python-jdk)

3- Install React Native command line interface tool globally, with this code in the command line window npm install -g react-native-cli, which is responsible for all react native installation and configurations in the command line as example when you want to install new project you call this tool to install the new project for you.

4-Download and install Android Studio From here https://developer.android.com/studio/index.html.

Click Configure then find Appearance & Behavior → System Settings → Android SDK, then make sure the following items are all checked:

-Google APIs

-Android SDK Platform 23

-Intel x86 Atom_64 System Image

-Google APIs Intel x86 Atom_64 System Image

Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that 23.0.1 is selected.

Finally, click "Apply" to download and install the Android SDK and related build tools.

5- Configure the ANDROID_HOME environment variable

Right click on my computer icon and choose properties->advanced system settings ->Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK.

The SDK is installed, by default, at the following location: c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk

You can find the right path for the SDK in the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.

6- Go to the proper partition, as example C: partition by write this code into command line cd c:/ ,then write this code in the command line react-native init myproject, then wait until all dependencies downloaded, it will take some time.

7- Click Start New Application From Android Studio and write any name into Application Name Field,

Click on Avd Manager icon from the above toolbar  

then Select "Create Virtual Device ,Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with an Android 6.0 (Google APIs) target.

Then Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step.

Finally to run your app in the emulator open it by clicking on the lunch icon, go to your project path as example write cd c:/myprojects ,then run this code in the command line react-native run-android.



Leave a Reply

Your email address will not be published.


Notify me of followup comments via e-mail.
You can also Subscribe without commenting.