react-native-elements

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>React Native Web · React Native Elements</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> Comprehensive Guide to create simple app using React Native Web and React Native Elements"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="React Native Web · React Native Elements"/><meta property="og:type" content="website"/><meta property="og:url" content="https://react-native-training.github.io//react-native-elements/blog/2018/12/13/react-native-web.html"/><meta property="og:description" content="> Comprehensive Guide to create simple app using React Native Web and React Native Elements"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native-elements/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><link rel="alternate" type="application/atom+xml" href="https://react-native-training.github.io//react-native-elements/blog/atom.xml" title="React Native Elements Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://react-native-training.github.io//react-native-elements/blog/feed.xml" title="React Native Elements Blog RSS Feed"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><link rel="stylesheet" href="/react-native-elements/css/prism.css"/><link rel="stylesheet" href="/react-native-elements/css/main.css"/><script src="/react-native-elements/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native-elements/"><img class="logo" src="/react-native-elements/img/logo.png" alt="React Native Elements"/></a><a href="/react-native-elements/versions.html"><h3>1.0.0</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native-elements/docs/getting_started.html" target="_self">Docs</a></li><li class=""><a href="/react-native-elements/docs/overview.html" target="_self">Components</a></li><li class=""><a href="/react-native-elements/help.html" target="_self">Help</a></li><li class=""><a href="https://github.com/react-native-training/react-native-elements" target="_self">GitHub</a></li><li class="siteNavGroupActive"><a href="/react-native-elements/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"></div><h2>›Recent Posts</h2><div class="tocToggler" id="tocToggler"></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">Recent Posts</h3><ul class=""><li class="navListItem"><a class="navItem" href="/react-native-elements/blog/2019/01/27/1.0-release.html">React Native Elements 1.0</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/react-native-elements/blog/2018/12/13/react-native-web.html">React Native Web</a></li></ul></div></div></section></div><script> var coll = document.getElementsByClassName('collapsible'); var checkActiveCategory = true; for (var i = 0; i < coll.length; i++) { var links = coll[i].nextElementSibling.getElementsByTagName('*'); if (checkActiveCategory){ for (var j = 0; j < links.length; j++) { if (links[j].classList.contains('navListItemActive')){ coll[i].nextElementSibling.classList.toggle('hide'); coll[i].childNodes[1].classList.toggle('rotate'); checkActiveCategory = false; break; } } } coll[i].addEventListener('click', function() { var arrow = this.childNodes[1]; arrow.classList.toggle('rotate'); var content = this.nextElementSibling; content.classList.toggle('hide'); }); } document.addEventListener('DOMContentLoaded', function() { createToggler('#navToggler', '#docsNav', 'docsSliderActive'); createToggler('#tocToggler', 'body', 'tocActive'); const headings = document.querySelector('.toc-headings'); headings && headings.addEventListener('click', function(event) { if (event.target.tagName === 'A') { document.body.classList.remove('tocActive'); } }, false); function createToggler(togglerSelector, targetSelector, className) { var toggler = document.querySelector(togglerSelector); var target = document.querySelector(targetSelector); if (!toggler) { return; } toggler.onclick = function(event) { event.preventDefault(); target.classList.toggle(className); }; } }); </script></nav></div><div class="container mainContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native-elements/blog/2018/12/13/react-native-web.html">React Native Web</a></h1>December 13, 2018<div class="authorBlock"><a href="https://github.com/haruelrovix" target="_blank" rel="noreferrer noopener">Havit Rovik</a></div></header><div><blockquote> Comprehensive Guide to create simple app using React Native Web and React Native Elements </blockquote> Case study: <code>gitphone</code>, GitHub repository checker for your smartphone. <img src="https://cdn-images-1.medium.com/max/1000/1*PHcPxP963ascQkeZOqy-rQ.png" /> <h2><a class="anchor" aria-hidden="true" id="toc"></a><a href="#toc" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ToC</h2> <ul> <li>Initialize the project using <a href="https://github.com/VISI-ONE/create-react-native-web-app">CRNWA</a></li> <li>Make sure everything works: Android, iOS and Web</li> <li>Add RNE latest ( 1.0.0-beta7 ) to the project</li> <li>Add 2 screens</li> </ul> Screen 1 RNE components: <ol> <li>Input</li> <li>Button with Icon</li> </ol> Screen 2 RNE components: <ol> <li>Header</li> <li>ListItem</li> <li>Avatar</li> <li>Text</li> </ol> <code>gitphone</code> should have: <ul> <li>routing, <a href="https://reacttraining.com/react-router">react-router</a>. It works great both on Native and Web.</li> <li>calls to GitHub API. See <a href="https://developer.github.com/v3/">https://developer.github.com/v3/</a>.</li> </ul> <h2><a class="anchor" aria-hidden="true" id="0-initial-step"></a><a href="#0-initial-step" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>0️⃣ Initial Step</h2> Install create-react-native-web-app <pre><code class="hljs">$ npm i -g create-react-native-web-app </code></pre> <h2><a class="anchor" aria-hidden="true" id="1-first-step"></a><a href="#1-first-step" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1️⃣ First Step</h2> Create <code>gitphone</code> project. <pre><code class="hljs">λ create-react-native-web-app gitphone ⏳ Creating React Native Web App by the name of gitphone ... ✅ Created project folder. ✅ Added project files. ⏳ Installing project dependencies... yarn install v1.10.1 [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@1.2.4: The platform "win32" is incompatible with this module. info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. Done in 797.66s. ✅ Installed project dependencies. ✅ Done! 😁👍 Your project is ready for development. * change directory to your new project $ cd gitphone $ Then run the these commands to get started: * To run development Web server $ yarn web * To run Android on connected device (after installing Android Debug Bridge "adb" - https://developer.android.com/studio/releases/platform-tools) $ yarn android * To run ios simulator (after installing Xcode - only on Apple devices) $ yarn ios * To run tests for Native and Web $ yarn test * To run build for Web $ yarn build </code></pre> Change to <code>gitphone</code> directory and test the web app by running <code>yarn web</code>. <pre><code class="hljs">Starting the development server... Compiled successfully! You can now view create-react-native-web-app in the browser. Local: http://localhost:3001/ On Your Network: http://172.26.235.145:3001/ Note that the development build is not optimized. To create a production build, use yarn build. </code></pre> <img src="https://cdn-images-1.medium.com/max/800/1*tmq9VHw3S4cgxfWg8xN3gQ.png" width=300 /> Now, test the <code>gitphone</code> android app by running <code>yarn android</code>. <pre><code class="hljs">Installing APK 'app-debug.apk' on 'Redmi 4X - 7.1.2' for app:debug Installed on 1 device. BUILD SUCCESSFUL Total time: 21.783 secs Starting: Intent { cmp=com.creaternwapp/.MainActivity } ✨ Done in 25.64s. </code></pre> If the build successful, you'll see the app installed on your Android (emulator) device. <img src="https://cdn-images-1.medium.com/max/800/1*BddouTisdXvDzY5vB9U3pQ.png" width=300 /> But if you got an error when run <code>yarn android</code>, please see Troubleshooting section below. The last part for First Step, make sure it can be run on iOS without any problem. Run <code>yarn ios</code> and voila! <img src="https://cdn-images-1.medium.com/max/800/1*6AHlumHN29RANlXsrXDu4g.png" width=300 /> <h2><a class="anchor" aria-hidden="true" id="2-step-two"></a><a href="#2-step-two" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2️⃣ Step Two</h2> Installing React Native Elements (RNE). <pre><code class="hljs">$ yarn add react-native-elements@beta </code></pre> Installing React Native Vector Icons (RNVI). <pre><code class="hljs">$ yarn add react-native-vector-icons </code></pre> Linking: <pre><code class="hljs">$ react-native link react-native-vector-icons </code></pre> Both RNE and RNVI are written using es6. If you run <code>yarn web</code> at this point, you'll got an error. <pre><code class="hljs">./node_modules/react-native-elements/src/config/withTheme.js Module parse failed: Unexpected token (12:28) You may need an appropriate loader to handle this file type. </code></pre> We need to tell webpack to transpile them. <ol> <li>Open <code>config/webpack.config.dev.js</code></li> <li>On line 141 <code>Process JS with babel</code>, add RNE and RNVI to include</li> <li>Do the same for <code>config/webpack.config.prod.js</code> as well 👌</li> </ol> If you get lost, see this <a href="https://gist.github.com/haruelrovix/01d335dfcabec17a6aa5bc7a53fef277">gist</a> or commit <a href="https://github.com/haruelrovix/gitphone/commit/8c0e6036d9231cc934285502528a2061b848ce2d">8c0e603</a>. <h2><a class="anchor" aria-hidden="true" id="3-give-it-a-try"></a><a href="#3-give-it-a-try" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3️⃣ Give it a try</h2> Now, let's grasp the idea how RNE works. <ol> <li>Open src/App.js</li> <li>Import Button from RNE <pre><code class="hljs">import { Button } from 'react-native-elements'; </code></pre></li> <li>On render, change TouchableHighlight to use RNE's Button</li> <li>Run yarn ios, yarn android and yarn web to see it in action! 👏</li> </ol> Note: If you got an error <code>Could not find com.android.tools.build.appt2</code> when running <code>yarn android</code>, add <code>google</code> on the gradle repositories. See this <a href="https://gist.github.com/haruelrovix/51a695a4fe292767bedc32ec638f9736">gist</a> or commit for the details: <a href="https://github.com/haruelrovix/gitphone/commit/a2ebba14aef533925b593933fa885e2f990b2ace">a2ebba1</a>. <h2><a class="anchor" aria-hidden="true" id="4-add-home-component"></a><a href="#4-add-home-component" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>4️⃣ Add Home component</h2> Our first component will be <code>Home</code>. On this component, there are two input fields and one Submit button. <ol> <li>Inside <code>src</code>, create new folder: <code>Components</code></li> <li>Add new file called <code>Home.js</code> <a href="https://gist.github.com/haruelrovix/04eeb6c4d8d0cc56e041e5be2c20bc97">gist</a></li> <li>On <code>App.js</code>, import <code>Home</code> component <a href="https://gist.github.com/haruelrovix/15cd4badc3a9ec949037b19d9195d6bc">gist</a></li> <li>Run <code>yarn ios</code>, <code>yarn android</code> and <code>yarn web</code> to see it in action! 🎇</li> </ol> <h3><a class="anchor" aria-hidden="true" id="styling-for-home-component"></a><a href="#styling-for-home-component" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Styling for Home component</h3> You should notice that our <code>Home</code> doesn’t look good in term of UI. Let’s add styling for it. <ol> <li>Inside <code>Components</code>, create <code>Shared.style.js</code> file <a href="https://gist.github.com/haruelrovix/7fee3c03b9fead9b74739e28a24effa9">gist</a></li> <li>Import the style and update <code>Home</code> component as below <a href="https://gist.github.com/haruelrovix/4fb2e695d1562ff3475ebc91e6c27fcd">gist</a></li> <li>Looks better now*, commit for adding Home component: <a href="https://github.com/haruelrovix/gitphone/commit/2e510c462c68d7c68433f2706cf8fbb847d6541e">2e510c4</a>.</li> </ol> Wait a minute… *Seems there is a problem with RNVI on the web version. You can check this <a href="https://github.com/oblador/react-native-vector-icons#web-with-webpack">Web (with webpack)</a> article or just following steps bellow. <ol> <li>Open <code>config/webpack.config.dev.js</code></li> <li>Add url-loader on line 162 <a href="https://gist.github.com/haruelrovix/edd520f4bf4268e17ef56f40314080a5">gist</a></li> <li>Do the same for <code>config/webpack.config.prod.js</code> as well 👌</li> <li>Open <code>src/index.js</code> file</li> <li>Add <code>iconFont</code> and append <code>style</code> to document’s head <a href="https://gist.github.com/haruelrovix/b291e8a4f34577d94e85570d304b82fe">gist</a></li> </ol> <img src="https://cdn-images-1.medium.com/max/2584/1*YS7jioDKIKKvort5AzGXYA.png" alt="Our RNE x RNW progress so far~">Our RNE x RNW progress so far~ <h2><a class="anchor" aria-hidden="true" id="5-routing"></a><a href="#5-routing" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>5️⃣ Routing</h2> Next, let’s add second component: <code>CommitList</code>. <ol> <li>Create new folder inside <code>Components</code> named <code>Commit</code></li> <li>Add new file: <code>CommitList.js</code> <a href="https://gist.github.com/haruelrovix/4cece6275cf40d97defb036756bab82b">gist</a></li> </ol> On our app, user goes to second screen by click on <code>Submit</code> button. How do we implement it? “react-router comes to the rescue” - <a href="https://reacttraining.com/react-router/">https://reacttraining.com/react-router/</a> Add react-router-dom and react-router-native <pre><code class="hljs">$ yarn add react-router-dom react-router-native </code></pre> Web needs <code>BrowserRouter</code> while native <code>NativeRouter</code>. We need to separate it based on the platform. <ol> <li>On <code>src</code>, create <code>Utils</code> folder</li> <li>Add two files on <code>Utils</code>: <code>Routing.native.js</code> and <code>Routing.web.js</code> <a href="https://gist.github.com/haruelrovix/3d7e26df6bb2d6056e2f4612a77fd2fc">gist</a></li> </ol> Those file’s content differ only on the second line. <a href="https://gist.github.com/haruelrovix/32353543e417373a770365f855701c37">gist</a> Now, glue it together. <ol> <li>Open <code>App.js</code>, import <code>CommitList</code> component</li> <li>Import <code>Route</code>, <code>Router</code> and <code>Switch</code> from <code>Utils/Routing</code></li> <li>Implement routing inside <code>render</code> method <a href="https://gist.github.com/haruelrovix/d5bf357efbbf094b26549f40709ec74f">gist</a></li> <li>Now for the action on <code>Submit</code> button, open <code>Home.js</code></li> <li>Import <code>withRouter</code> from <code>Utils/Routing</code> <pre><code class="hljs">import { withRouter } from '../Utils/Routing'; </code></pre></li> <li><code>WithRouter</code> is an HOC. Use it to wrap <code>Home</code> component <pre><code class="hljs">export default withRouter(Home); </code></pre></li> <li>Add <code>onPress</code> property for the button <pre><code class="hljs">onPress={this.onPressButton} </code></pre></li> <li>Implement the <code>onPressButton</code> event handler <pre><code class="hljs">onPressButton = () => this.props.history.push('/commit'); </code></pre></li> <li>All <code>Home</code> together <a href="https://gist.github.com/haruelrovix/8fc8ae9dab580c5e79f24a59a2c195b6">gist</a> | <a href="https://github.com/haruelrovix/gitphone/commit/f193aa3c268e7be263ae529de0f719ffd443e26d">commit</a></li> </ol> Test it on <code>web</code> and <code>android</code>, you should be able to go back and forth between screens using <code>Submit</code> and pressing <code>Back</code> button. “How can I go back on iOS?” 😂 <h3><a class="anchor" aria-hidden="true" id="implement-withheader"></a><a href="#implement-withheader" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Implement withHeader</h3> We will create a <code>withHeader</code> HOC. Why HOC? We can reuse it easier if we add more screens later. <ol> <li>On <code>src</code>, create <code>HOCs</code> folder</li> <li>Add <code>withHeader.js</code> file</li> <li>Import <code>Header</code> from RNE and <code>Icon</code> from <code>RNVI/FontAwesome</code> <pre><code class="hljs">import { Header } from 'react-native-elements'; import Icon from 'react-native-vector-icons/FontAwesome'; </code></pre></li> <li><code>withHeader</code> accepts one prop: <code>title</code> <pre><code class="hljs">const withHeader = ({ title = '' }) => (WrappedComponent) => { </code></pre></li> <li>Event handler to go back / go home <pre><code class="hljs">goBack = () => this.props.history.goBack(); goHome = () => this.props.history.replace('/'); </code></pre></li> <li>Import and use <code>withHeader</code> in <code>CommitList</code> component <a href="https://gist.github.com/haruelrovix/b1608f9f010caa47c18ebc71d87106ae">gist</a> | <a href="https://github.com/haruelrovix/gitphone/commit/0cf995bde91f5958e252188f1343de923069e7f3">commit</a></li> </ol> <h2><a class="anchor" aria-hidden="true" id="6-fetch-data-from-github-api"></a><a href="#6-fetch-data-from-github-api" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>6️⃣ Fetch data from GitHub API</h2> Let’s fetch a real-live data: list commit on repository by <a href="https://developer.github.com/v3/repos/commits/#list-commits-on-a-repository">GitHub</a> and render it on our second screen, <code>CommitList</code>. <pre><code class="hljs">GET /repos/:owner/:repo/commits </code></pre> Ideally, the :owner and :repo are form values from our first screen. Since the objective of this article is RNE x RNW, talk about that form (and state-management) later on. To fetch GitHub API, we will use <a href="https://github.com/esphen/fetch-hoc">fetch-hoc</a> package and also need <a href="https://redux.js.org/api/compose">compose</a> from <code>redux</code>, to handle multiple HOCs on the same component. <pre><code class="hljs">$ yarn add fetch-hoc redux </code></pre> <ol> <li>Open <code>CommitList.js</code></li> <li>Import <code>{ compose }</code> from <code>redux</code> and <code>fetch</code> from <code>fetch-hoc</code></li> <li>Use it as below <a href="https://gist.github.com/haruelrovix/1c3affbfd585c3b8acfc1c156164fd1f">gist</a> | <a href="https://github.com/haruelrovix/gitphone/commit/334197c7c05bd1bdb1b648ca56cfe69c8b496eed">commit</a></li> </ol> Now run <code>yarn web</code>, open <code>network</code> tab of <code>DevTools</code> and click <code>Submit</code> button, you’ll see bunch of commit data. By default GitHub API returning 30 commits. <h3><a class="anchor" aria-hidden="true" id="render-commit-data"></a><a href="#render-commit-data" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Render commit data</h3> Commit data that will be displayed on the screen: <pre><code class="hljs">author.avatar_url commit: author.name message </code></pre> Let’s modify <code>CommitList.js</code> <ol> <li>Add new imports <pre><code class="hljs">import { ActivityIndicator, Dimensions, FlatList, Platform, View } from 'react-native'; import { Avatar, ListItem } from 'react-native-elements'; </code></pre></li> <li>On main render, modify it as below <pre><code class="hljs"><View style={styles.container}> {this.renderContent()} </View> </code></pre></li> <li>Create <code>renderContent</code> method <pre><code class="hljs">renderContent = () => ( this.props.loading ? <ActivityIndicator color='#87ceeb' /> : <FlatList keyExtractor={this.keyExtractor} data={this.props.data} renderItem={this.renderItem} /> ) </code></pre></li> <li>Create <code>renderItem</code> method <pre><code class="hljs">renderItem = ({ item }) => ( <ListItem title={item.commit.author.name} subtitle={item.commit.message} leftElement={this.renderLeftElement(item) /> ) </code></pre></li> <li>Create <code>renderLeftElement</code> method <pre><code class="hljs">renderLeftElement = (item) => ( <View> <Avatar source={{ uri: item.author.avatar_url }} size='medium' rounded /> </View> ) </code></pre></li> <li>Here is our new <code>CommitList</code> including the styling to make it prettier <a href="https://gist.github.com/haruelrovix/e4b02328766efd1491338d5111becff7">gist</a> | <a href="https://github.com/haruelrovix/gitphone/commit/27a78672958f0caaa34b3e93c934685b9dcebd50">commit</a></li> </ol> Here they are! <img src="https://cdn-images-1.medium.com/max/6436/1*iD3lSG6D3lGDkJr5HB2i2A.png" alt="awesome, eh?">awesome, eh? <h2><a class="anchor" aria-hidden="true" id="7-handle-form-submission"></a><a href="#7-handle-form-submission" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>7️⃣ Handle form submission</h2> Our app looks great so far. But we are not passing values from first to second screen. Let’s do it. <ol> <li>To handle form, we’ll use <a href="https://github.com/jaredpalmer/formik">formik</a> <pre><code class="hljs">$ yarn add formik </code></pre></li> <li>Open <code>Home.js</code> and import it <pre><code class="hljs">import { Formik } from 'formik'; </code></pre></li> <li>Wrap main <code>View</code> with <code>formik</code> <pre><code class="hljs"><Formik initialValues={{ owner: '', repo: '' }} onSubmit={this.onPressButton}> {({ handleChange, handleSubmit, values }) => ( <View style={styles.container}> </code></pre></li> <li>Add <code>onChangeText</code> handler to the <code>Input</code> <pre><code class="hljs"><Input ... onChangeText={handleChange('owner')} value={values.owner} <Input ... onChangeText={handleChange('repo')} value={values.repo} </code></pre></li> <li>Change <code>Button</code> <code>onPress</code> props to <code>handleSubmit</code> <pre><code class="hljs"><Button ... onPress={handleSubmit} </code></pre></li> <li>Don’t forget to close the main <code>View</code> <pre><code class="hljs"> </View> )} </Formik> </code></pre></li> </ol> Form submission: done 👌 Next question: How do we pass these values to second screen? Send them when we redirect to second screen! <ol> <li>Inside <code>onPressButton</code> method, send an object instead of <code>pathname</code> only. <pre><code class="hljs">this.props.history.push({ pathname: '/commit', state: { owner, repo } }); </code></pre></li> <li>Open <code>CommitList</code>, import <code>withRouter</code> <pre><code class="hljs">import { withRouter } from '../../Utils/Routing'; </code></pre></li> <li>Add <code>withRouter</code> inside <code>compose</code></li> <li>Get the values passed down to <code>withRouter</code> and use it to <code>fetch</code> <pre><code class="hljs">withHeader({ title: 'Commits' }), withRouter, fetch(({ location: { state = {} } }) => ( `https://api.github.com/repos/${state.owner}/${state.repo}/commits` )) </code></pre></li> </ol> HOC’s order does matter. So, make sure it the same as snippet above. In case you lost, here is the commit: <a href="https://github.com/haruelrovix/gitphone/commit/1d83c5e1487d2d99c00cc1b18f563ed4497d87b9">1d83c5e</a>. Test the app. Now we should able to fetch any GitHub repository, with some caveats. 👀 <h2><a class="anchor" aria-hidden="true" id="8-polishing-the-app"></a><a href="#8-polishing-the-app" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>8️⃣ Polishing the app</h2> What happens if we fetch repository which doesn’t exist? Red screen on native, blank screen on web! 😹 <code>fetch-hoc</code> returns an error if it has. Let’s use it. <ol> <li>On <code>CommitList</code>, modify <code>renderContent</code> <pre><code class="hljs">this.props.loading ? <ActivityIndicator color='#87ceeb' /> : this.renderFlatList() </code></pre></li> <li>Import <code>Text</code> from RNE <pre><code class="hljs">import { ..., Text } from 'react-native-elements'; </code></pre></li> <li>Add <code>renderFlatList</code> method <pre><code class="hljs">this.props.error ? <Text h4>Error: {this.props.data.message || '😕'}</Text> : <FlatList ... /> </code></pre></li> </ol> Test it. Instead of red or blank screen, now <code>Error: Not Found</code> displayed. What’s else? Try to fetch <code>facebook/react-native</code>. We got another error 🙀 <pre><code class="hljs">Cannot read property 'avatar_url' of null </code></pre> Not all of <code>author</code> have <code>avatar_url</code>. We should do this for the Avatar <code>source</code>. <pre><code class="hljs">source={{uri: (item.author && item.author.avatar_url) || undefined}} </code></pre> So, our app renders nothing if it has no url? It doesn’t look good. Solution: render author initial name. With the help of RegEx and Avatar <code>title</code> props, <code>renderLeftElement</code> should look like this now: <pre><code class="hljs">renderLeftElement = (item) => { const initials = item.commit.author.name.match(/\b\w/g) || []; return ( <View style={leftElementStyle}> <Avatar title={((initials.shift() || '') + (initials.pop() || ''))} ... </code></pre> Commit for Polishing the app section: <a href="https://github.com/haruelrovix/gitphone/commit/943974b285635884dc3ec1d7981146307dfd98d3">943974b</a>. When I wrote this, fetch <code>facebook/react-native</code> returning following: <img src="https://cdn-images-1.medium.com/max/3812/1*OYTvJP0RLLQemyT0ukb1Iw.png" alt="Why no love for regex? Thanks to [Sanoor](https://stackoverflow.com/a/33076482).">Why no love for regex? Thanks to <a href="https://stackoverflow.com/a/33076482">Sanoor</a>. <h2><a class="anchor" aria-hidden="true" id="conclusion"></a><a href="#conclusion" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Conclusion</h2> We have created a simple app using RNE + RNW 👏 <ul> <li>Works great on iOS, web and android? ✅</li> <li>Use components from react-native-elements? ✅</li> <li>Move between screens? ✅</li> <li>API calls? ✅</li> </ul> Some improvements for <code>gitphone</code>: If you go back from <code>Commits</code> screen, input form on <code>Home</code> screen are empty. If you want preserve previous values, this can be fixed easily by introducing redux to the app. References here: <a href="https://github.com/haruelrovix/rnw-github/pull/1/commits/48108ddc3e80669b9d57b2f998a5073d5e5eabb0">48108dd</a>. Can we fetch more commits data once we reach the most bottom of the list? Infinite scroll? For web, we can use <a href="https://github.com/joshwnj/react-visibility-sensor">react-visibility-sensor</a>. Check it out: <a href="https://github.com/haruelrovix/rnw-github/pull/1/commits/6c1f6894d78840648a11bbdf2d0e841fb6dad12d">6c1f689</a>. For native, it’s easier. We can use <code>FlatList</code> <code>onEndReached</code> props. To give you an idea how, see this: <a href="https://github.com/haruelrovix/rnw-github/pull/2/commits/9d2e1f2a3e8605f8184f1f8950eb0175045bb67a">9d2e1f2</a>. <h2><a class="anchor" aria-hidden="true" id="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Troubleshooting 💺</h2> #1 Build failed when running <code>yarn android</code> <pre><code class="hljs">:app:compileDebugAidl FAILED FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:compileDebugAidl'. > java.lang.IllegalStateException: aidl is missing * Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. BUILD FAILED </code></pre> Here is how to fix #1: <ol> <li>Open Android Studio.</li> </ol> <img src="https://cdn-images-1.medium.com/max/2000/1*GJ4GJ5KKimpr7MZP4R2yPA.png" alt=""> <ol start="2"> <li>Open <code>android</code> project under <code>gitphone</code>.</li> </ol> <img src="https://cdn-images-1.medium.com/max/2000/1*jyLo3Jk-nudieT3aaEzUBQ.png" alt=""> <ol start="3"> <li>Click Update on this prompt.</li> </ol> <img src="https://cdn-images-1.medium.com/max/2000/1*7I2tqGZ9C63aUGOtae-XHg.png" alt=""> Wait for Android Studio syncing the project. <ol start="4"> <li>It synced successfully with two errors.</li> </ol> <img src="https://cdn-images-1.medium.com/max/2558/1*GUlICoUm4cU4KzUfps3W0Q.png" alt=""> <ol start="5"> <li>At this stage, just click <code>Update Build Tools version and sync project</code> on the sync window.</li> <li>Now, the remaining warning is the <code>Configuration 'compile'...</code></li> <li>To fix that, open <code>app/build.gradle</code> file, change <code>dependencies</code> section (line 139) to use <code>implementation</code> instead of <code>compile</code>. dependencies { implementation fileTree(dir: "libs", include: ["*.jar"]) implementation "com.android.support:appcompat-v7:23.0.1" implementation "com.facebook.react:react-native:+" }</li> <li>Sync it again and close Android Studio.</li> </ol> <img src="https://cdn-images-1.medium.com/max/2000/1*lIP2u1_7NmTmy8mcri6Smw.png" alt=""> Troubleshooting for android is done. Now, you should be able to run <code>yarn android</code> successfully. #2 Build failed when running <code>yarn ios</code> <pre><code class="hljs">** BUILD FAILED ** The following build commands failed: CompileC /gitphone/ios/build/Build/Intermediates.noindex/React.build/Debug-iphonesimulator/double-conversion.build/Objects-normal/x86_64/strtod.o /gitphone/node_modules/react-native/third-party/double-conversion-1.1.5/src/strtod.cc normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler </code></pre> Here is how to fix #2: Inside the project, run script below from your favourite terminal <pre><code class="hljs">$ curl -L https://git.io/fix-rn-xcode10 | bash </code></pre> If you run <code>yarn ios</code> again, and you got this error <pre><code class="hljs">The following build commands failed: Libtool /gitphone/ios/build/Build/Products/Debug-iphonesimulator/libRCTWebSocket.a normal x86_64 (1 failure) </code></pre> Please run this script: <pre><code class="hljs">$ cp ios/build/Build/Products/Debug-iphonesimulator/libfishhook.a node_modules/react-native/Libraries/WebSocket </code></pre> Troubleshooting for iOS is done. Now, you should be able to run <code>yarn ios</code> successfully. <h3><a class="anchor" aria-hidden="true" id="authors"></a><a href="#authors" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Authors</h3> <ul> <li><a href="https://github.com/haruelrovix">haruelrovix</a></li> <li><a href="https://github.com/andangrd">andangrd</a></li> </ul> </div></div><div class="blogSocialSection"></div></div><div class="blog-recent"><a class="button" href="/react-native-elements/blog">Recent Posts</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#toc">ToC</a></li><li><a href="#0-initial-step">0️⃣ Initial Step</a></li><li><a href="#1-first-step">1️⃣ First Step</a></li><li><a href="#2-step-two">2️⃣ Step Two</a></li><li><a href="#3-give-it-a-try">3️⃣ Give it a try</a></li><li><a href="#4-add-home-component">4️⃣ Add Home component</a><ul class="toc-headings"><li><a href="#styling-for-home-component">Styling for Home component</a></li></ul></li><li><a href="#5-routing">5️⃣ Routing</a><ul class="toc-headings"><li><a href="#implement-withheader">Implement withHeader</a></li></ul></li><li><a href="#6-fetch-data-from-github-api">6️⃣ Fetch data from GitHub API</a><ul class="toc-headings"><li><a href="#render-commit-data">Render commit data</a></li></ul></li><li><a href="#7-handle-form-submission">7️⃣ Handle form submission</a></li><li><a href="