Setting Up Navigation for React Native App
Published: 2020-06-28 20:51:53


<section data-field="subtitle" class="p-summary">
</section>
<section data-field="body" class="e-content">
<section name="268f" 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="9ae7" id="9ae7" class="graf graf--figure graf-after--h3"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 260px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 37.1%;"></div></div></figure><p name="97c6" id="97c6" class="graf graf--p graf-after--figure"><em class="markup--em markup--p-em">After reading this tutorial, you will have basic understanding about react navigation stack.</em></p><blockquote name="2c24" id="2c24" class="graf graf--blockquote graf-after--p">Prerequisites :</blockquote><p name="912a" id="912a" class="graf graf--p graf-after--blockquote"><strong class="markup--strong markup--p-strong">Android Studio Environment:</strong></p><p name="83bc" id="83bc" class="graf graf--p graf-after--p">You can follow <a href="https://medium.com/@MtaTeam/6e15f3fbf9e1" data-href="https://medium.com/@MtaTeam/6e15f3fbf9e1" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank"><strong class="markup--strong markup--p-strong">this</strong> </a>article’s prerequisites section for setting up Android Studio, JDK &amp; environment variables and creating a React Native project.</p><p name="b4fb" id="b4fb" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Npm Packages :</strong></p><p name="4a42" id="4a42" class="graf graf--p graf-after--p">react-native-reanimated, react-native-gesture-handler, react-native-screens, react-native-safe-area-context,@react-native-community/masked-view, react-navigation</p><p name="7cc5" id="7cc5" class="graf graf--p graf-after--p">We need to install the dependencies first:</p><pre name="538d" id="538d" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">npm i react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view</code></pre><p name="5196" id="5196" class="graf graf--p graf-after--pre">and then:</p><pre name="b97b" id="b97b" class="graf graf--pre graf-after--p">npm i @react-navigation/native @react-navigation/stack</pre><p name="0516" id="0516" class="graf graf--p graf-after--pre">After you install an npm package, you need to rebuild your project and re-run.</p><p name="53e4" id="53e4" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">Note that if you currently have more than one programs reading your project files, below command may give error.</em></p><pre name="1b84" id="1b84" class="graf graf--pre graf-after--p">cd android<br>gradlew assembleDebug</pre><p name="98ea" id="98ea" class="graf graf--p graf-after--pre">If you get any errors,</p><pre name="a6e2" id="a6e2" class="graf graf--pre graf-after--p">gradlew clean</pre><p name="8213" id="8213" class="graf graf--p graf-after--pre">and re-run</p><pre name="0a3e" id="0a3e" class="graf graf--pre graf-after--p">gradlew assembleDebug</pre><p name="8ac4" id="8ac4" class="graf graf--p graf-after--pre">We should import react-native-gesture-handler at the very beginning of our project(App.js or index.js)</p><p name="60e3" id="60e3" class="graf graf--p graf-after--p">Open app.js and in the first line enter:</p><pre name="291e" id="291e" class="graf graf--pre graf-after--p">import &#39;react-native-gesture-handler&#39;;</pre><p name="6d15" id="6d15" class="graf graf--p graf-after--pre">Then wrap our whole application with NavigationContainer after we import it.</p><p name="2726" id="2726" class="graf graf--p graf-after--p">We also need to create a router which will define the screens for our navigation.</p><figure name="91a4" id="91a4" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 503px; max-height: 257px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 51.1%;"></div><img class="graf-image" data-image-id="1*w3AnKHWDgzHVsfVYuK605w.png" data-width="503" data-height="257" src="https://cdn-images-1.medium.com/max/800/1*w3AnKHWDgzHVsfVYuK605w.png"></div><figcaption class="imageCaption">App.js</figcaption></figure><p name="324b" id="324b" class="graf graf--p graf-after--figure">In our router we import <strong class="markup--strong markup--p-strong">createStackNavigator </strong>and initialize a stack with that function.</p><p name="b0fe" id="b0fe" class="graf graf--p graf-after--p">After we initialize our <strong class="markup--strong markup--p-strong">Stack </strong>we can call <strong class="markup--strong markup--p-strong">&lt;Stack.Navigator&gt;</strong> and create Screens for every page we have in our app.</p><figure name="04b7" id="04b7" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 545px; max-height: 333px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 61.1%;"></div><img class="graf-image" data-image-id="1*q5w1XbbyOlkKWrWn7uP5mw.png" data-width="545" data-height="333" src="https://cdn-images-1.medium.com/max/800/1*q5w1XbbyOlkKWrWn7uP5mw.png"></div><figcaption class="imageCaption">Router.js</figcaption></figure><p name="d7ce" id="d7ce" class="graf graf--p graf-after--figure">In <strong class="markup--strong markup--p-strong">Stack.Screen</strong> we have two required props: <strong class="markup--strong markup--p-strong">name </strong>and <strong class="markup--strong markup--p-strong">component.</strong></p><p name="0b7f" id="0b7f" class="graf graf--p graf-after--p">Name is the string that we will call our screen with, component is the component that will be rendered when we navigate to the screen.</p><p name="6fe0" id="6fe0" class="graf graf--p graf-after--p">Since we wrapped our whole app with NavigationContainer in App.js file, we can use navigation functions in all pages.</p><p name="6009" id="6009" class="graf graf--p graf-after--p">We created a function and called this.props.navigation.navigate(‘SecondPage’);</p><p name="9b4d" id="9b4d" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">Note that ‘SecondPage’ is the name of our other Stack screen.</em></p><figure name="c350" id="c350" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 567px; max-height: 687px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 121.2%;"></div><img class="graf-image" data-image-id="1*QX5i4tjSRvMWSnWM4MvehA.png" data-width="567" data-height="687" src="https://cdn-images-1.medium.com/max/800/1*QX5i4tjSRvMWSnWM4MvehA.png"></div><figcaption class="imageCaption">LandingPage.js</figcaption></figure><figure name="4c98" id="4c98" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 563px; max-height: 532px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 94.5%;"></div><img class="graf-image" data-image-id="1*sKAtZTCxksPKzsnmKA73lw.png" data-width="563" data-height="532" src="https://cdn-images-1.medium.com/max/800/1*sKAtZTCxksPKzsnmKA73lw.png"></div><figcaption class="imageCaption">SecondPage.js</figcaption></figure><p name="cca5" id="cca5" class="graf graf--p graf-after--figure">then:</p><pre name="9e09" id="9e09" class="graf graf--pre graf-after--p">cd ..<br>react-native run-android</pre><figure name="99cd" id="99cd" class="graf graf--figure graf-after--pre"><div class="aspectRatioPlaceholder is-locked" style="max-width: 270px; max-height: 480px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.8%;"></div><img class="graf-image" data-image-id="1*2Vvqs3i09wFfW6vLjyzALw.gif" data-width="270" data-height="480" src="https://cdn-images-1.medium.com/max/800/1*2Vvqs3i09wFfW6vLjyzALw.gif"></div></figure><p name="1cbc" id="1cbc" class="graf graf--p graf-after--figure">You can clone this project from <a href="https://github.com/mtateam/react-native-navigation" data-href="https://github.com/mtateam/react-native-navigation" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank"><strong class="markup--strong markup--p-strong">here</strong></a><strong class="markup--strong markup--p-strong"> </strong>via github<strong class="markup--strong markup--p-strong">.</strong></p><p name="5063" id="5063" class="graf graf--p graf-after--p">This was just a setup tutorial, if you want to learn more about react navigation you can find the full documentation <a href="https://reactnavigation.org/docs/getting-started" data-href="https://reactnavigation.org/docs/getting-started" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank"><strong class="markup--strong markup--p-strong">here</strong></a>.</p><p name="6e00" id="6e00" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">MTA Team:</strong></p><p name="9e62" id="9e62" class="graf graf--p graf-after--p"><a href="https://medium.com/u/780987e259b0?source=post_page-----6e15f3fbf9e1----------------------" data-href="https://medium.com/u/780987e259b0?source=post_page-----6e15f3fbf9e1----------------------" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">Ali Gümüş Tosun</a> -<a href="https://medium.com/u/f07974fc764c?source=post_page-----6e15f3fbf9e1----------------------" data-href="https://medium.com/u/f07974fc764c?source=post_page-----6e15f3fbf9e1----------------------" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank"> Semih Sevincli</a> -<a href="https://medium.com/u/fca2225fd420?source=post_page-----6e15f3fbf9e1----------------------" data-href="https://medium.com/u/fca2225fd420?source=post_page-----6e15f3fbf9e1----------------------" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank"> Aslancan Yılmaz</a> - <a href="https://medium.com/u/e86295cf2fe8?source=post_page-----6e15f3fbf9e1----------------------" data-href="https://medium.com/u/e86295cf2fe8?source=post_page-----6e15f3fbf9e1----------------------" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">Burak Arıcı</a></p><p name="0a74" id="0a74" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">LinkedIn Accounts:</strong></p><p name="6b9c" id="6b9c" 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 nofollow 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 nofollow 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 nofollow 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 nofollow 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/d4c057e2a13b"><time class="dt-published" datetime="2020-06-28T20:31:03.719Z">June 28, 2020</time></a>.</p><p><a href="https://medium.com/@MtaTeam/setting-up-navigation-for-react-native-app-d4c057e2a13b" class="p-canonical">Canonical link</a></p><p>Exported from <a href="https://medium.com">Medium</a> on June 28, 2020.</p></footer></article></body></html>