Setting Up Android Environment for Your First React Native Project
Tags: reactnative, react, android
Published: 2020-06-23 15:43:34


<section data-field="body" class="e-content">
<section name="4900" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><figure name="51c6" id="51c6" class="graf graf--figure graf-after--h3"><div class="aspectRatioPlaceholder is-locked" style="max-width: 500px; max-height: 300px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 60%;"></div></div></figure><h3 name="b1d9" id="b1d9" class="graf graf--h3 graf-after--figure">If you are interested in developing mobile apps with React Native but have no experience, this guide will let you start.</h3><h3 name="5dde" id="5dde" class="graf graf--h3 graf-after--h3">Prerequisites :</h3><blockquote name="5191" id="5191" class="graf graf--blockquote graf-after--h3">Android Studio :</blockquote><p name="98f5" id="98f5" class="graf graf--p graf-after--blockquote">Just download and install android studio from the link below.</p><p name="33a3" id="33a3" class="graf graf--p graf-after--p"><a href="https://developer.android.com/studio" data-href="https://developer.android.com/studio" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">https://developer.android.com/studio</a></p><blockquote name="9e8d" id="9e8d" class="graf graf--blockquote graf-after--p">JAVA SE Development Kit:</blockquote><p name="bccd" id="bccd" class="graf graf--p graf-after--blockquote">Again, download and install jdk that matches your system from the link below.</p><div name="a9ef" id="a9ef" class="graf graf--mixtapeEmbed graf-after--p"><a href="https://www.oracle.com/java/technologies/javase-jdk13-downloads.html" data-href="https://www.oracle.com/java/technologies/javase-jdk13-downloads.html" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://www.oracle.com/java/technologies/javase-jdk13-downloads.html"><strong class="markup--strong markup--mixtapeEmbed-strong">Java SE 13 - Downloads</strong><br><em class="markup--em markup--mixtapeEmbed-em"></em></a><a href="https://www.oracle.com/java/technologies/javase-jdk13-downloads.html" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock" data-media-id="315e00f0f41cb6d81c5343df36cc12ac"></a></div><blockquote name="0fbc" id="0fbc" class="graf graf--blockquote graf-after--mixtapeEmbed">Adding Environment Variables</blockquote><p name="83e9" id="83e9" class="graf graf--p graf-after--blockquote">After you installed jdk add “<strong class="markup--strong markup--p-strong">C:\Program Files\Java\jdk-13.0.2\bin</strong>” at the end of your “<strong class="markup--strong markup--p-strong">Path</strong>” variable in environment variables.</p><p name="9848" id="9848" class="graf graf--p graf-after--p">Create another variable in environment variables named “<strong class="markup--strong markup--p-strong">JAVA_HOME</strong>” with the path “<strong class="markup--strong markup--p-strong">C:\Program Files\Java\jdk-13.0.2</strong>”</p><p name="494f" id="494f" class="graf graf--p graf-after--p">Your address may differ depending on your installed JDK version.</p><p name="d978" id="d978" class="graf graf--p graf-after--p">Check if path variables contain this folder and if not, add following with your username.</p><p name="aae0" id="aae0" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">C:\Users\Your_Username\AppData\Local\Android\Sdk\platform-tools</strong></p><blockquote name="6230" id="6230" class="graf graf--blockquote graf-after--p">Installing React Native</blockquote><p name="c278" id="c278" class="graf graf--p graf-after--blockquote">Install react-native with the command below</p><pre name="ad73" id="ad73" class="graf graf--pre graf-after--p"><strong class="markup--strong markup--pre-strong">npm i -g react-native</strong></pre><blockquote name="625b" id="625b" class="graf graf--blockquote graf-after--pre">Creating React Native Project</blockquote><p name="0319" id="0319" class="graf graf--p graf-after--blockquote">Go to the directory you want to create project in and create project with the command below</p><pre name="2d46" id="2d46" class="graf graf--pre graf-after--p"><strong class="markup--strong markup--pre-strong">react-native init Example</strong></pre><p name="8e3f" id="8e3f" class="graf graf--p graf-after--pre">When we type <strong class="markup--strong markup--p-strong">react-native init Example</strong> to command line it will create a folder named <strong class="markup--strong markup--p-strong">Example </strong>and create the project inside it. Open your project after it is created.</p><p name="22d4" id="22d4" class="graf graf--p graf-after--p">— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —</p><figure name="9e46" id="9e46" class="graf graf--figure graf--layoutOutsetLeft graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 279px; max-height: 519px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 186%;"></div><img class="graf-image" data-image-id="0*xCyzzKxLtmNdc4rH" data-width="279" data-height="519" src="https://cdn-images-1.medium.com/max/600/0*xCyzzKxLtmNdc4rH"></div></figure><p name="44fc" id="44fc" class="graf graf--p graf-after--figure">This is our folder structure. <strong class="markup--strong markup--p-strong">App.js</strong> is our initial rendered file. So we are going to start from there.</p><blockquote name="a798" id="a798" class="graf graf--blockquote graf-after--p">Building Project in Android Studio</blockquote><p name="2afd" id="2afd" class="graf graf--p graf-after--blockquote">Before we try to run our application in our emulator, we need our npm modules and javascript code to be built so android can run it.</p><p name="d65d" id="d65d" class="graf graf--p graf-after--p">Open android studio and select the android folder in your project, open it.</p><figure name="f4e7" id="f4e7" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 157px; max-height: 68px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 43.3%;"></div><img class="graf-image" data-image-id="0*qcj9LpSOkQkL-neB" data-width="157" data-height="68" src="https://cdn-images-1.medium.com/max/800/0*qcj9LpSOkQkL-neB"></div><figcaption class="imageCaption">Click make project button or press Ctrl + F9</figcaption></figure><p name="c03e" id="c03e" class="graf graf--p graf-after--figure">If you don’t want to use emulator but your android phone,you can follow our article about connecting over usb debugging with cable or wifi without cable <a href="https://medium.com/p/4a065e4bc255" data-href="https://medium.com/p/4a065e4bc255" class="markup--anchor markup--p-anchor" target="_blank">here.</a></p><blockquote name="b5e3" id="b5e3" class="graf graf--blockquote graf-after--p">Creating Virtual Device</blockquote><figure name="a353" id="a353" class="graf graf--figure graf-after--blockquote"><div class="aspectRatioPlaceholder is-locked" style="max-width: 223px; max-height: 359px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 161%;"></div><img class="graf-image" data-image-id="0*3IEAFtd2cQjtoAqf" data-width="223" data-height="359" src="https://cdn-images-1.medium.com/max/800/0*3IEAFtd2cQjtoAqf"></div><figcaption class="imageCaption">Click tools from the menu in android studio and click AVD Manager</figcaption></figure><figure name="4d08" id="4d08" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 496px; max-height: 346px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 69.8%;"></div><img class="graf-image" data-image-id="0*la7wcKKR42sCD5zk" data-width="496" data-height="346" src="https://cdn-images-1.medium.com/max/800/0*la7wcKKR42sCD5zk"></div><figcaption class="imageCaption">Click create virtual device button</figcaption></figure><p name="6b55" id="6b55" class="graf graf--p graf-after--figure">Pick any device and click next</p><figure name="220c" id="220c" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 587px; max-height: 255px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 43.4%;"></div><img class="graf-image" data-image-id="0*A2q8rPHdTboesClc" data-width="587" data-height="255" src="https://cdn-images-1.medium.com/max/800/0*A2q8rPHdTboesClc"></div><figcaption class="imageCaption">Download any image then click next.</figcaption></figure><p name="ace8" id="ace8" class="graf graf--p graf-after--figure">You can create device with the default configurations by clicking finish.</p><figure name="1f37" id="1f37" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 172px; max-height: 66px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 38.4%;"></div><img class="graf-image" data-image-id="0*D6F2xDmUGK4eDP2E" data-width="172" data-height="66" src="https://cdn-images-1.medium.com/max/800/0*D6F2xDmUGK4eDP2E"></div><figcaption class="imageCaption">You can start your virtual device by pressing the first icon.</figcaption></figure><p name="9f66" id="9f66" class="graf graf--p graf-after--figure">Open your project directory in terminal and run this command</p><pre name="3513" id="3513" class="graf graf--pre graf-after--p">react-native run-android</pre><figure name="cfd3" id="cfd3" class="graf graf--figure graf-after--pre"><div class="aspectRatioPlaceholder is-locked" style="max-width: 608px; max-height: 51px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 8.4%;"></div><img class="graf-image" data-image-id="0*IzaVcj9hbbqc0U9j" data-width="608" data-height="51" src="https://cdn-images-1.medium.com/max/800/0*IzaVcj9hbbqc0U9j"></div></figure><p name="7340" id="7340" class="graf graf--p graf-after--figure">If you get any of these errors change directory into android and run clean command</p><pre name="3d08" id="3d08" class="graf graf--pre graf-after--p">cd android<br>./gradlew clean</pre><p name="8872" id="8872" class="graf graf--p graf-after--pre"><em class="markup--em markup--p-em">If you run this command in android studio terminal, just run</em></p><pre name="28d8" id="28d8" class="graf graf--pre graf-after--p">gradlew clean</pre><p name="80a3" id="80a3" class="graf graf--p graf-after--pre"><em class="markup--em markup--p-em">After cleaning project if you still get these errors, just re run the </em><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">react-native run-android </em></strong><em class="markup--em markup--p-em">command and it will work eventually.</em></p><p name="8758" id="8758" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">* Task :app:packageDebug FAILED</em></p><p name="7935" id="7935" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">java.io.IOException: Unable to delete directory ……</em></p><p name="2b64" id="2b64" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">* What went wrong:</em></p><p name="2a1c" id="2a1c" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">Execution failed for task ‘:app:compileDebugJavaWithJavac’</em></p><figure name="935f" id="935f" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 479px; max-height: 851px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="0*vEgAclSUPveWRZF6" data-width="479" data-height="851" src="https://cdn-images-1.medium.com/max/800/0*vEgAclSUPveWRZF6"></div><figcaption class="imageCaption">Our app started.</figcaption></figure><p name="06fa" id="06fa" class="graf graf--p graf-after--figure">Thank you for reading. You can follow us to learn more about react &amp; react native development.</p><p name="a609" id="a609" class="graf graf--p graf-after--p">Feel free to ask anything about this article if you get any errors. You can contact any of us on linkedin.</p><h4 name="288a" id="288a" class="graf graf--h4 graf-after--p">MTA Team:</h4><p name="9176" id="9176" class="graf graf--p graf-after--h4"><a href="https://medium.com/u/780987e259b0" data-href="https://medium.com/u/780987e259b0" data-anchor-type="2" data-user-id="780987e259b0" data-action-value="780987e259b0" data-action="show-user-card" data-action-type="hover" class="markup--user markup--p-user" target="_blank">Ali Gümüş Tosun</a> - <a href="https://medium.com/u/f07974fc764c" data-href="https://medium.com/u/f07974fc764c" data-anchor-type="2" data-user-id="f07974fc764c" data-action-value="f07974fc764c" data-action="show-user-card" data-action-type="hover" class="markup--user markup--p-user" target="_blank">Semih Sevincli</a> - <a href="https://medium.com/u/fca2225fd420" data-href="https://medium.com/u/fca2225fd420" data-anchor-type="2" data-user-id="fca2225fd420" data-action-value="fca2225fd420" data-action="show-user-card" data-action-type="hover" class="markup--user markup--p-user" target="_blank">Aslancan Yılmaz</a> - <a href="https://medium.com/u/e86295cf2fe8" data-href="https://medium.com/u/e86295cf2fe8" data-anchor-type="2" data-user-id="e86295cf2fe8" data-action-value="e86295cf2fe8" data-action="show-user-card" data-action-type="hover" class="markup--user markup--p-user" target="_blank">Burak Arıcı</a></p><p name="8945" id="8945" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">LinkedIn Accounts:</strong></p><p name="6a58" id="6a58" class="graf graf--p graf-after--p graf--trailing"><a href="https://www.linkedin.com/in/ali-g%C3%BCm%C3%BC%C5%9F-tosun-9a6736129/" data-href="https://www.linkedin.com/in/ali-g%C3%BCm%C3%BC%C5%9F-tosun-9a6736129/" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">Ali Gümüş Tosun</a> - <a href="https://www.linkedin.com/in/semih-sevin%C3%A7li-02a0a4ba/" data-href="https://www.linkedin.com/in/semih-sevin%C3%A7li-02a0a4ba/" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">Semih Sevinçli</a> - <a href="https://www.linkedin.com/in/aslancan-y%C4%B1lmaz-002965131/" data-href="https://www.linkedin.com/in/aslancan-y%C4%B1lmaz-002965131/" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">Aslancan Yılmaz</a> - <a href="https://www.linkedin.com/in/mustafa-burak-ar%C4%B1c%C4%B1-40889618b/" data-href="https://www.linkedin.com/in/mustafa-burak-ar%C4%B1c%C4%B1-40889618b/" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">Burak Arıcı</a></p></div></div></section>
</section>
<footer><p>By <a href="https://medium.com/@MtaTeam" class="p-author h-card">MTA Team</a> on <a href="https://medium.com/p/6e15f3fbf9e1"><time class="dt-published" datetime="2020-06-22T19:48:59.096Z">June 22, 2020</time></a>.</p><p><a href="https://medium.com/@MtaTeam/setting-up-android-environment-for-your-first-react-native-project-6e15f3fbf9e1" class="p-canonical">Canonical link</a></p><p>Exported from <a href="https://medium.com">Medium</a> on June 23, 2020.</p></footer></article></body></html>