<h3><img class="aligncenter wp-image-507 " src="https://c1ctech.com/wp-content/uploads/2018/06/abcd.png" alt="" width="611" height="342" /></h3>
<h3><span style="color: #000080;"><strong>React Native</strong></span></h3>
<p><a href="https://facebook.github.io/react-native/" rel="nofollow noreferrer"><strong><span style="color: #008000;">React Native</span></strong></a> is an open source framework created by Facebook that lets you build mobile apps using only <strong><span style="color: #008000;"><a class="post-tag" style="color: #008000;" title="show questions tagged 'javascript'" href="https://stackoverflow.com/questions/tagged/javascript" rel="tag">javascript</a></span>.</strong> It uses the same design as React, letting you compose a rich mobile UI from declarative components.You can find more about React Native on <span style="color: #008000;"><strong><a style="color: #008000;" href="https://facebook.github.io/react-native/">here</a>.</strong></span></p>
<p>In this tutorial we are going to install, run and create Android app development’s first project using React Native on windows machine. So just follow the below steps .</p>
<p> ;</p>
<h3><span style="color: #000080;">1. Install Required Software :</span></h3>
<p>The first step to install React Native is Download and Install below required software packages.</p>
<p><span style="color: #0000ff;"><strong>NodeJS</strong> :</span> Download and install the latest NodeJS windows machine installer software package from <span style="color: #008000;"><a style="color: #008000;" href="https://nodejs.org/en/#download"><strong>nodejs.org</strong></a> .</span></p>
<p><span style="color: #0000ff;"><strong>Python</strong> :</span> Download and install the latest Python windows installer package from <span style="color: #008000;"><a style="color: #008000;" href="https://www.python.org/downloads/"><strong>Python.org</strong></a></span></p>
<p> ;</p>
<h3><span style="color: #000080;">2. Install JDK( Java Development Kit ) :</span></h3>
<p><span style="color: #0000ff;"><strong>JDK :</strong> </span>Download and install JDK from Oracle’s official website <span style="color: #008000;"><a style="color: #008000;" href="http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html"><strong>oracle.com</strong></a> .</span></p>
<p> ;</p>
<p><span style="color: #008000;"><strong>Note:</strong></span> Either we can install NodeJs,Python,JDK (Java Development Kit) saperately or via <strong><span style="color: #008000;"><a style="color: #008000;" href="https://chocolatey.org/">Chocolatey</a></span></strong>, a popular package manager for Windows.</p>
<p><span style="color: #008000;"><strong>Chocolatey</strong></span> automatically install the recent version of <span style="color: #008000;">NodeJs,Python2,JDK</span> .</p>
<p>Open an Administrator Command Prompt (right click Command Prompt and select &#8220;Run as Administrator&#8221;), then run the following command:</p>
<p><span style="color: #0000ff;"><strong>choco install -y nodejs.install python2 jdk8</strong></span></p>
<p> ;</p>
<h3><span style="color: #000080;">3. Install React Native :</span></h3>
<p>After installing <span style="color: #008000;"><strong>NodeJS</strong></span> we can access the nmp packages via Command Line Interface ( DOS ) in windows. So open Command prompt type the below command to install React Native .</p>
<p><strong><span style="color: #0000ff;">npm install -g react-native-cli</span></strong></p>
<p> ;</p>
<h3><span style="color: #000080;">4. Android development environment:</span></h3>
<p><span style="color: #0000ff;"><strong>Install Android Studio</strong></span></p>
<p>Download the Android Studio latest version from Google Android Developers official Page <span style="color: #008000;"><a style="color: #008000;" href="https://developer.android.com/studio/index.html"><strong>developer.android.com</strong></a>.</span></p>
<p><span style="color: #0000ff;"><strong>Install the Android SDK</strong></span></p>
<p>After installing Android Studio Open it Goto <span style="color: #008000;"><strong>Files ->; Settings .</strong></span></p>
<p><span style="color: #008000;"><strong>Goto Appearance and Behavior ->; System Settings ->; Android SDK</strong></span> and install latest android platform.</p>
<p><img class="aligncenter wp-image-491 size-large" src="https://c1ctech.com/wp-content/uploads/2018/06/RN_7-1024x702.png" alt="" width="685" height="470" /></p>
<p> ;</p>
<h3><span style="color: #000080;">5. Add Environment Variable ANDROID_HOME in Windows :</span></h3>
<p>React Native required ANDROID_HOME variable to compile and run apps. So define the <strong><span style="color: #008000;">ANDROID_HOME</span></strong> variable.</p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<ol>
<li>Right Click on My Computer.</li>
<li>Go to <span style="color: #008000;"><strong>Properties</strong></span>.</li>
<li>Click on <span style="color: #008000;"><strong>Advanced System Settings</strong>.</span></li>
<li>Click on <span style="color: #008000;"><strong>Environment Variables</strong>.</span></li>
<li>Under System Variables click on New .</li>
<li>Set variable name as<span style="color: #008000;"> <strong>ANDROID_HOME</strong> </span>and variable value as your <span style="color: #008000;"><strong>SDK Manager’s Path </strong><span style="color: #000000;">and then click ok.</span></span></li>
<li>Here you go now your ANDROID_HOME variable has been successfully set.</li>
</ol>
<p> ;</p>
<p><img class="wp-image-492 size-full aligncenter" src="https://c1ctech.com/wp-content/uploads/2018/06/rn_8.png" alt="" width="749" height="217" /></p>
<p> ;</p>
<h3><span style="color: #000080;">6. Start Android Virtual Device (AVD) :</span></h3>
<ol>
<li>Android virtual device is used to see the test result of our coding inside a virtual android machine just like a real android mobile phone. To setup AVD Open <strong><span style="color: #008000;">Android Studio ->; Tools ->; Android ->; AVD Manager.</span></strong></p>
</li>
<li>
<p>Click on <strong><span style="color: #008000;">Create New Virtual Device.</span></strong></p>
</li>
<li>
<p>Select your device.</p>
</li>
</ol>
<p><img class="aligncenter wp-image-493 size-large" src="https://c1ctech.com/wp-content/uploads/2018/06/RN9-1024x575.png" alt="" width="685" height="385" /></p>
<p> ;</p>
<p>4. Select Android OS version System Image.</p>
<p><img class="aligncenter wp-image-494 size-large" src="https://c1ctech.com/wp-content/uploads/2018/06/RN10-1024x568.png" alt="" width="685" height="380" /></p>
<p> ;</p>
<p>5. Name the AVD and hit the <span style="color: #008000;"><strong>Finish</strong></span> button.</p>
<p><img class="aligncenter wp-image-495 size-large" src="https://c1ctech.com/wp-content/uploads/2018/06/RN11-1024x574.png" alt="" width="685" height="384" /></p>
<p>6. After done creating AVD just hit the Run button to start the AVD.</p>
<h3><span style="color: #000080;">7. Create your first React Native project :</span></h3>
<ol>
<li>Once you have finish all the installing than Create a folder in your drive in which you will store your all React Native projects. Than start command prompt and goto that folder inside command prompt. You can use <span style="color: #008000;"><strong>cd.. </strong></span>command to go back individually from folder to folder.</p>
</li>
<li>
<p>Now type <span style="color: #008000;"><strong>react-native init YOUR_PROJECT_NAME</strong></span> and press enter.</p>
</li>
<li>
<p>Now it will start downloading the React Native app support libraries from internet.</p>
</li>
</ol>
<p><img class="aligncenter wp-image-485 " src="https://c1ctech.com/wp-content/uploads/2018/06/rn_2.png" alt="" width="857" height="436" /></p>
<p>4. The final output will like below screenshot.</p>
<p><img class="aligncenter wp-image-486 " src="https://c1ctech.com/wp-content/uploads/2018/06/rn_3.png" alt="" width="851" height="544" /></p>
<p>5. Now build the created app and run it into Android Emulator using below command.</p>
<p>Run <strong><span style="color: #008000;">react-native run-android</span></strong> inside your React Native project folder:</p>
<div id="crayon-5b1d40ea70dfa322430723-1" class="crayon-line"><strong><span style="color: #0000ff;">cd MyFirstProject</span></strong></div>
<div class="crayon-line"><strong><span style="color: #0000ff;">react-native <span class="hljs-keyword">run</span></span><span class="bash"><span style="color: #0000ff;">-android</span></span></strong></div>
<div></div>
<div></div>
<div>6. If your project build successfully then you can see a message on your command prompt screen <span style="color: #008000;"><strong>BUILD SUCCESSFUL .</strong></span></div>
<div></div>
<div></div>
<div><img class="aligncenter wp-image-487 size-large" src="https://c1ctech.com/wp-content/uploads/2018/06/rn_4-1024x946.png" alt="" width="685" height="633" /></div>
<div></div>
<div><img class="aligncenter wp-image-488 " src="https://c1ctech.com/wp-content/uploads/2018/06/rn_5.png" alt="" width="948" height="280" /></div>
<div></div>
<div></div>
<div></div>
<div>Here you go now you can see Your app is build successfully and run into Android emulator. Your emulator screenshot should look like this :</div>
<div></div>
<div></div>
<div><img class="aligncenter wp-image-484 " src="https://c1ctech.com/wp-content/uploads/2018/06/Screenshot_1528648519.png" alt="" width="422" height="749" /></div>