react-native-elements
Version:
React Native Elements & UI Toolkit
324 lines (307 loc) • 89.7 kB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Blog · React Native Elements</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Cross Platform React Native UI Toolkit"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Blog · React Native Elements"/><meta property="og:type" content="website"/><meta property="og:url" content="https://react-native-training.github.io//react-native-elements/index.html"/><meta property="og:description" content="Cross Platform React Native UI Toolkit"/><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="blog"><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 siteNavItemActive"><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"><i></i></div><h2><i>›</i><span>Recent Posts</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></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"><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="posts"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native-elements/blog/2019/01/27/1.0-release.html">React Native Elements 1.0</a></h1><p class="post-meta">January 27, 2019</p><div class="authorBlock"><p class="post-authorName"><a href="https://opencollective.com/react-native-elements#team" target="_blank" rel="noreferrer noopener">Core Team</a></p></div></header><article class="post-content"><div><span><blockquote>
<p>React Native Elements has UI elements that are easy to use & really customizable. It also has theming, platform specific search bars, <a href="https://github.com/necolas/react-native-web">React Native Web</a> support, and much more.</p>
</blockquote>
<p>It's finally here! Let's put our hands together and welcome React Native Elements 1.0 🎉</p>
<p>This release is centered around making RNE components that everyone loves more intuitive to use & stable. This is not to say that all the work is done, but this is definitely a giant leap in the right direction and one that we have been working on for over a year.</p>
<p>I want like to say thank you to our users for using RNE and giving us feedback through issues on the repo and also the contributors who have the taken time to contribute and help improve RNE together. Finally, I'd like to say a big thanks to <a href="https://twitter.com/roach_iam">Kyle Roach</a> and <a href="https://twitter.com/xaviervllgr">Xavier Villelégier</a> without whom this project would not have been as awesome as it is today!!</p>
<p>This blog post is meant to serve as a migration guide for upgrading to <code>react-native-elements: "^1.0.0"</code> from <code>0.19.1</code> and also a way to document and share all the breaking changes, new features and other improvements in this release. For those updating from <code>1.0.0-beta7</code> you can view those release notes <a href="https://github.com/react-native-training/react-native-elements/releases/tag/v1.0.0">here</a>.</p>
<p>The wait is over!! Get excited, cause we certainly are. 14K 🌟 and counting...</p>
<h2><a class="anchor" aria-hidden="true" id="installation"></a><a href="#installation" 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>Installation</h2>
<p>First, install the library using your favorite package manager: <code>yarn add react-native-elements</code></p>
<p>Also if you are using an older version, just update the <code>react-native-elements</code> version in <code>package.json</code> to <code>^1.0.0</code></p>
<h2><a class="anchor" aria-hidden="true" id="breaking-changes"></a><a href="#breaking-changes" 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>Breaking changes</h2>
<ul>
<li><p>Updated all components that have the <code>component</code> prop to <code>Component</code> prop as per convention (<a href="https://github.com/react-native-training/react-native-elements/pull/1479">#1479</a>)</p></li>
<li><p>Some colors have been removed from the colors file and some changed. Here's the list of colors from 0.19.1.</p></li>
</ul>
<pre><code class="hljs css language-js"><span class="token punctuation">{</span>
primary<span class="token punctuation">:</span> <span class="token string">'#9E9E9E'</span><span class="token punctuation">,</span>
primary1<span class="token punctuation">:</span> <span class="token string">'#4d86f7'</span><span class="token punctuation">,</span>
primary2<span class="token punctuation">:</span> <span class="token string">'#6296f9'</span><span class="token punctuation">,</span>
secondary<span class="token punctuation">:</span> <span class="token string">'#8F0CE8'</span><span class="token punctuation">,</span>
secondary2<span class="token punctuation">:</span> <span class="token string">'#00B233'</span><span class="token punctuation">,</span>
secondary3<span class="token punctuation">:</span> <span class="token string">'#00FF48'</span><span class="token punctuation">,</span>
grey0<span class="token punctuation">:</span> <span class="token string">'#393e42'</span><span class="token punctuation">,</span>
grey1<span class="token punctuation">:</span> <span class="token string">'#43484d'</span><span class="token punctuation">,</span>
grey2<span class="token punctuation">:</span> <span class="token string">'#5e6977'</span><span class="token punctuation">,</span>
grey3<span class="token punctuation">:</span> <span class="token string">'#86939e'</span><span class="token punctuation">,</span>
grey4<span class="token punctuation">:</span> <span class="token string">'#bdc6cf'</span><span class="token punctuation">,</span>
grey5<span class="token punctuation">:</span> <span class="token string">'#e1e8ee'</span><span class="token punctuation">,</span>
dkGreyBg<span class="token punctuation">:</span> <span class="token string">'#232323'</span><span class="token punctuation">,</span>
greyOutline<span class="token punctuation">:</span> <span class="token string">'#bbb'</span><span class="token punctuation">,</span>
searchBg<span class="token punctuation">:</span> <span class="token string">'#303337'</span><span class="token punctuation">,</span>
disabled<span class="token punctuation">:</span> <span class="token string">'#dadee0'</span><span class="token punctuation">,</span>
white<span class="token punctuation">:</span> <span class="token string">'#ffffff'</span><span class="token punctuation">,</span>
error<span class="token punctuation">:</span> <span class="token string">'#ff190c'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="avatar"></a><a href="#avatar" 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><code>Avatar</code></h3>
<ul>
<li>Props <code>small</code>, <code>medium</code>, <code>large</code>, <code>xlarge</code> have been removed. Usage is now <code>size="small"</code> etc. <a href="https://github.com/react-native-training/react-native-elements/pull/1098">#1098</a></li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="badge"></a><a href="#badge" 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><code>Badge</code></h3>
<ul>
<li><code>wrapperStyle</code> prop has been removed - use <code>containerStyle</code> prop instead (<a href="https://github.com/react-native-training/react-native-elements/pull/1545">#1545</a>)</li>
<li><code>badgeStyle</code> prop replaces previous behaviour of <code>containerStyle</code> prop (<a href="https://github.com/react-native-training/react-native-elements/pull/1545">#1545</a>)</li>
<li><code>element</code> prop which was undocumented is removed - use <code>value</code> prop instead (<a href="https://github.com/react-native-training/react-native-elements/pull/1545">#1545</a>)</li>
<li>can no longer render children - instead use <code>value</code> prop which now supports rendering react components (<a href="https://github.com/react-native-training/react-native-elements/pull/1545">#1545</a>)</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="button"></a><a href="#button" 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><code>Button</code></h3>
<ul>
<li>By default on Android there's no more elevation (<a href="https://github.com/react-native-training/react-native-elements/pull/1538">#1538</a>). To get elevation, use the <code>raised</code> prop.</li>
<li>Renamed <code>textStyle</code> to <code>titleStyle</code></li>
<li>Renamed <code>containerViewStyle</code> to <code>containerStyle</code></li>
<li>Removed props <code>transparent</code> and <code>outline</code> (<a href="https://github.com/react-native-training/react-native-elements/pull/1540">#1540</a>). Instead use the <code>type</code> prop.</li>
</ul>
<pre><code class="hljs css language-jsx"><span class="token comment">// Transparent</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>clear<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token comment">// Outline</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</code></pre>
<ul>
<li>Removed props <code>secondary</code>, <code>secondary2</code>, <code>secondary3</code>, <code>primary1</code>, <code>primary2</code>, <code>backgroundColor</code>. Use the <code>buttonStyle</code> prop to set the background color.</li>
<li>Removed <code>iconComponent</code> prop. If you want to use a different Icon component - the <code>icon</code> prop supports custom elements.</li>
<li>Removed <code>loadingRight</code> prop. Loading indicator <strong>displays without title</strong>. May re-add in future.</li>
<li>Removed <code>borderRadius</code> prop. To control the border radius use the <code>buttonStyle</code> prop.</li>
<li>Removed props <code>color</code>, <code>fontSize</code>, <code>fontWeight</code>, and <code>fontFamily</code>. Instead use the <code>titleStyle</code> prop to set attributes for the title.</li>
<li>Removed <code>large</code> prop. May re-add in future.</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="buttongroup"></a><a href="#buttongroup" 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><code>ButtonGroup</code></h3>
<ul>
<li><code>disableSelected</code> prop has been removed (<a href="https://github.com/react-native-training/react-native-elements/pull/1587">#1587</a>)</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="card"></a><a href="#card" 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><code>Card</code></h3>
<ul>
<li><code>fontFamily</code> prop is deprecated - instead use <code>titleStyle</code> prop (<a href="https://github.com/react-native-training/react-native-elements/pull/1587">#1659</a>)</li>
<li><code>flexDirection</code> prop is deprecated - instead use <code>wrapperStyle</code> prop (<a href="https://github.com/react-native-training/react-native-elements/pull/1587">#1659</a>)</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="form"></a><a href="#form" 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><code>Form</code></h3>
<ul>
<li><p><code>FormInput</code> been renamed to <code>Input</code> (<a href="https://github.com/react-native-training/react-native-elements/pull/497">#497</a>)</p>
<ul>
<li><code>clearText</code> method renamed to <code>clear</code></li>
<li><code>textInputRef</code> and <code>containerRef</code> props removed</li>
<li><code>normalizeFontSize</code> prop removed. You can use the <code>normalize</code> helper along with the <code>inputStyle</code> prop to normalize font sizes.</li>
</ul></li>
<li><p><code>FormLabel</code> has been removed. This is now built into the <code>Input</code> component by use of <code>label</code> prop. Props <code>labelStyle</code> and <code>labelProps</code> can be used to customize it.</p></li>
<li><p><code>FormValidationMessage</code> has been removed. This is now built into the <code>Input</code> component by use of <code>errorMessage</code> prop. Props <code>errorStyle</code> and <code>errorProps</code> can be used to customize it.</p></li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="header"></a><a href="#header" 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><code>Header</code></h3>
<ul>
<li>Props <code>innerContainerStyles</code>, <code>outerContainerStyles</code> removed <a href="https://github.com/react-native-training/react-native-elements/pull/1221">#1221</a>. Instead use the <code>containerStyle</code> prop for main styling, along with props <code>leftContainerStyle</code>, <code>centerContainerStyle</code>, and <code>rightContainerStyle</code> when needed.</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="searchbar"></a><a href="#searchbar" 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><code>SearchBar</code></h3>
<p>SearchBar now supports different platform styles! To get an iOS or Android themed SearchBar, use the <code>platform</code> prop. <code>platform="ios"</code> or <code>platform="android"</code></p>
<ul>
<li><code>noIcon</code> prop removed. Instead to remove the search icon use the <code>searchIcon</code> prop. E.g <code>searchIcon={null}</code></li>
<li><code>showLoadingIcon</code> prop renamed to <code>showLoading</code> <a href="https://github.com/react-native-training/react-native-elements/pull/837">#837</a></li>
<li><code>containerRef</code> prop removed</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="list"></a><a href="#list" 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><code>List</code></h3>
<ul>
<li><strong><code>List</code> component has been removed!</strong> <code>List</code> was just a regular React Native View with some small margin styles. It wasn't actually needed to use the <code>ListItem</code> component. Instead we recommend using the <a href="https://facebook.github.io/react-native/docs/flatlist"><code>FlatList</code></a> or <a href="https://facebook.github.io/react-native/docs/sectionlist"><code>SectionList</code></a> components from React Native which function both as Views and also displaying items, pull to refresh and more.</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="listitem"></a><a href="#listitem" 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><code>ListItem</code></h3>
<ul>
<li><code>leftIconOnPress</code>, <code>leftIconOnLongPress</code>, <code>leftIconUnderlayColor</code>, and <code>leftIconContainerStyle</code>, removed. The <code>leftIcon</code> prop can accept props.</li>
</ul>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ListItem</span>
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Yea<span class="token punctuation">"</span></span>
<span class="token attr-name">leftIcon</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'home'</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
</code></pre>
<ul>
<li><code>avatar</code>, <code>avatarStyle</code>, <code>avatarContainerStyle</code>, <code>roundAvatar</code>, and <code>avatarOverlayContainerStyle</code> removed. Avatars can now be customized using the <code>rightAvatar</code> and <code>leftAvatar</code> props which can either render a custom element or an object that describes the props from Avatar.</li>
</ul>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ListItem</span>
<span class="token attr-name">leftAvatar</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'MD'</span><span class="token punctuation">,</span>
rounded<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
containerStyle<span class="token punctuation">:</span> <span class="token punctuation">{</span> margin<span class="token punctuation">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'hey'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">rightAvatar</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'DW'</span><span class="token punctuation">,</span> onLongPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'hey'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
</code></pre>
<ul>
<li><code>wrapperStyle</code> prop removed. Use the <code>containerStyle</code> prop instead.</li>
<li><code>titleNumberOfLines</code>, <code>subtitleNumberOfLines</code>, and <code>rightTitleNumberOfLines</code> props removed. Use the <code>titleProps</code>, <code>rightTitleProps</code>, and <code>subtitleProps</code> props to pass props for each..</li>
</ul>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ListItem</span> <span class="token attr-name">titleProps</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> numberOfLines<span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
</code></pre>
<ul>
<li><code>hideChevron</code> removed. Use the <code>chevron</code> prop instead. However, the behaviour is swapped <code>hideChevron={true}</code> behaves like <code>chevron={false}</code></li>
<li><code>chevronColor</code> removed. The <code>chevron</code> prop now can accept an object describing it's appearance.</li>
</ul>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ListItem</span> <span class="token attr-name">chevron</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> color<span class="token punctuation">:</span> <span class="token string">'pink'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
</code></pre>
<ul>
<li><code>fontFamily</code> removed. Use the <code>titleStyle</code> and <code>subTitleStyle</code> props to set change the text styling</li>
<li><code>titleContainerStyle</code> removed. Use the <code>titleStyle</code> prop instead.</li>
<li><code>rightTitleContainerStyle</code> removed. Use the <code>rightTitleStyle</code> prop instead.</li>
<li><code>subtitleContainerStyle</code> removed. Use the <code>subtitleStyle</code> prop instead.</li>
<li><code>label</code> prop removed.</li>
<li><code>switchButton</code>, <code>onSwitch</code>, <code>switchDisabled</code>, <code>switchOnTintColor</code>, <code>switchThumbTintColor</code>, <code>switchTintColor</code>, and <code>switched</code> removed. Instead use the <code>switch</code> prop wich accepts an object describing its props.</li>
<li><code>textInput</code>,<code>textInputAutoCapitalize</code>,<code>textInputAutoCorrect</code>,<code>textInputAutoFocus</code>,<code>textInputEditable</code>,<code>textInputKeyboardType</code>,<code>textInputMaxLength</code>,<code>textInputMultiline</code>,<code>textInputOnChangeText</code>,<code>textInputOnFocus</code>,<code>textInputOnBlur</code>,<code>textInputSelectTextOnFocus</code>,<code>textInputReturnKeyType</code>,<code>textInputValue</code>,<code>textInputSecure</code>,<code>textInputStyle</code>,<code>textInputContainerStyle</code>,<code>textInputPlaceholder</code> removed. We now expose a single <code>input</code> prop which accepts an object describing its props.</li>
<li><code>onPressRightIcon</code> removed. Use the <code>rightIcon</code> prop which can accept an object now describing its props.</li>
</ul>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ListItem</span> <span class="token attr-name">rightIcon</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'home'</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'clicked'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="pricingcard"></a><a href="#pricingcard" 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><code>PricingCard</code></h3>
<ul>
<li><code>titleFont</code> removed. Use the <code>titleStyle</code> prop instead to customize the title. <a href="https://github.com/react-native-training/react-native-elements/pull/1231">#1231</a></li>
<li><code>pricingFont</code> removed. Use the <code>pricingStyle</code> prop instead to customize the price. <a href="https://github.com/react-native-training/react-native-elements/pull/1231">#1231</a></li>
<li><code>infoFont</code> removed. Use the <code>infoStyle</code> prop instead to customize the info. <a href="https://github.com/react-native-training/react-native-elements/pull/1231">#1231</a></li>
<li><code>buttonFont</code> removed. Use the <code>button</code> prop with a <code>buttonStyle</code> key to set this.</li>
</ul>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>PricingCard</span> <span class="token attr-name">button</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> buttonStyle<span class="token punctuation">:</span> <span class="token punctuation">{</span> fontFamily<span class="token punctuation">:</span> <span class="token string">'Arial'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="text"></a><a href="#text" 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><code>Text</code></h3>
<ul>
<li><code>fontFamily</code> prop is removed - instead use <code>style</code> prop (<a href="https://github.com/react-native-training/react-native-elements/pull/1587">#1659</a>)</li>
</ul>
<h2><a class="anchor" aria-hidden="true" id="new-features"></a><a href="#new-features" 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>New features</h2>
<ul>
<li>Support for React Native Web - read more on it <a href="https://react-native-training.github.io/react-native-elements/blog/2018/12/13/react-native-web.html">here</a> (<a href="https://github.com/react-native-training/react-native-elements/pull/1664">#1664</a>)</li>
<li>Theming support across components - easily build light & dark modes and theme your components from one place (<a href="https://github.com/react-native-training/react-native-elements/pull/1454">#1454</a>)</li>
<li>New <code><Image /></code> Component - displays images with a placeholder and smooth image load transitioning (<a href="https://github.com/react-native-training/react-native-elements/pull/1582">#1582</a>)</li>
<li>New <code><Input /></code> Component - a branch new and improved replacement for <code><FormInput /></code> (<a href="https://github.com/react-native-training/react-native-elements/pull/497">#497</a>)</li>
<li>New <code>withBadge</code> HOC allows you to easily add badges to icons and other components (<a href="https://github.com/react-native-training/react-native-elements/pull/1604">#1604</a>)</li>
<li>New "mini badge" with the <code><Badge /></code> component - Perfect for status indicators and notifications <a href="https://github.com/react-native-training/react-native-elements/pull/1545">#1545</a></li>
<li>New Tap Rating <code><AirbnbRating /></code> component - powered by <code>react-native-ratings</code> (<a href="https://github.com/react-native-training/react-native-elements/pull/1671">#1671</a>)</li>
<li>Platform-specific <code><SearchBar /></code> component - drop-in usage with native look and feel (<a href="https://github.com/react-native-training/react-native-elements/pull/837">#837</a>)</li>
<li><code><Slider /></code> Component - supports <code>vertical</code> orientation (<a href="https://github.com/react-native-training/react-native-elements/pull/1698">#1698</a>)</li>
<li>Button types! Easily have solid, clear, and outline buttons with one prop. (<a href="https://github.com/react-native-training/react-native-elements/pull/1540">#1540</a>)</li>
<li>Background image support in the <code><Header /></code> (<a href="https://github.com/react-native-training/react-native-elements/pull/1556">#1556</a>)</li>
<li>Add support for <code>AntDesign</code> icons (<a href="https://github.com/react-native-training/react-native-elements/pull/1529">#1529</a>)</li>
</ul>
<h2><a class="anchor" aria-hidden="true" id="assorted-fixes-improvements"></a><a href="#assorted-fixes-improvements" 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>Assorted fixes & improvements</h2>
<ul>
<li>Updated <code>react-native-vector-icons</code> peerDependency to <code>>4.2.0</code></li>
<li>Expose <code>helpers</code> methods that are used internally</li>
<li>Close to 100% types coverage</li>
<li>Docs
<ul>
<li>Add descriptions for every Component (<a href="https://github.com/react-native-training/react-native-elements/pull/1527">#1527</a>)</li>
<li>Add central place to show supported icon sets (<a href="https://github.com/react-native-training/react-native-elements/pull/1532">#1532</a>)</li>
<li>Added Showcase section to display apps using RNE (<a href="https://github.com/react-native-training/react-native-elements/pull/1704">#1704</a>)</li>
</ul></li>
</ul>
<h2><a class="anchor" aria-hidden="true" id="ecosystem-and-web-support"></a><a href="#ecosystem-and-web-support" 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>Ecosystem and web support</h2>
<h3><a class="anchor" aria-hidden="true" id="independent-projects"></a><a href="#independent-projects" 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>Independent Projects</h3>
<ul>
<li>Mock iOS Settings Screen - Check it out on the <a href="https://github.com/Monte9/react-native-elements-app">RNE-App here</a></li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="web-support"></a><a href="#web-support" 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>Web Support</h3>
<ul>
<li>Follow <a href="https://react-native-training.github.io/react-native-elements/blog/2018/12/13/react-native-web.html">this detailed Blog Post</a> to use RNElements with RNWeb</li>
</ul>
<blockquote>
<p>Lastly, here is the RNE v1 release in numbers:</p>
<ul>
<li>470 commits (with over 272 PR's)</li>
<li>371 files changes (52,920 additions and 32,737 deletions)</li>
<li>Over 80 contributors</li>
<li>Over $1500 awarded to contributors</li>
</ul>
</blockquote>
<hr>
<p>Thanks for reading! Feel free to share this post if you enjoyed reading it.</p>
<p>If you run into any trouble using RNE, please open a new issue <a href="https://github.com/react-native-training/react-native-elements/issues">here</a>. Also if you want to support us, you can contribute to our Open Collective <a href="https://opencollective.com/react-native-elements">here</a>.</p>
</span></div></article></div><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><p class="post-meta">December 13, 2018</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/haruelrovix" target="_blank" rel="noreferrer noopener">Havit Rovik</a></p></div></header><article class="post-content"><div><span><blockquote>
<p>Comprehensive Guide to create simple app using React Native Web and React Native Elements</p>
</blockquote>
<p>Case study: <code>gitphone</code>, GitHub repository checker for your smartphone.</p>
<p><img src="https://cdn-images-1.medium.com/max/1000/1*PHcPxP963ascQkeZOqy-rQ.png" /></p>
<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>
<p>Screen 1 RNE components:</p>
<ol>
<li>Input</li>
<li>Button with Icon</li>
</ol>
<p>Screen 2 RNE components:</p>
<ol>
<li>Header</li>
<li>ListItem</li>
<li>Avatar</li>
<li>Text</li>
</ol>
<p><code>gitphone</code> should have:</p>
<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>
<p>Install create-react-native-web-app</p>
<pre><code class="hljs">$ <span class="hljs-string">npm </span>i -g <span class="hljs-built_in">create-react-native-web-app</span>
</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>
<p>Create <code>gitphone</code> project.</p>
<pre><code class="hljs">λ <span class="hljs-keyword">create</span>-react-<span class="hljs-keyword">native</span>-web-app gitphone
⏳ Creating React <span class="hljs-keyword">Native</span> Web App <span class="hljs-keyword">by</span> the <span class="hljs-keyword">name</span> <span class="hljs-keyword">of</span> gitphone ...
✅ Created <span class="hljs-keyword">project</span> folder.
✅ Added <span class="hljs-keyword">project</span> files.
⏳ Installing <span class="hljs-keyword">project</span> dependencies...
yarn <span class="hljs-keyword">install</span> v1<span class="hljs-number">.10</span><span class="hljs-number">.1</span>
[<span class="hljs-number">1</span>/<span class="hljs-number">4</span>] Resolving packages...
[<span class="hljs-number">2</span>/<span class="hljs-number">4</span>] Fetching packages...
info fsevents@<span class="hljs-number">1.2</span><span class="hljs-number">.4</span>: The platform <span class="hljs-string">"win32"</span> <span class="hljs-keyword">is</span> incompatible <span class="hljs-keyword">with</span> this module.
info <span class="hljs-string">"fsevents@1.2.4"</span> <span class="hljs-keyword">is</span> an optional dependency <span class="hljs-keyword">and</span> <span class="hljs-keyword">failed</span> <span class="hljs-keyword">compatibility</span> check. <span class="hljs-keyword">Excluding</span> it <span class="hljs-keyword">from</span> installation.
[<span class="hljs-number">3</span>/<span class="hljs-number">4</span>] Linking dependencies...
[<span class="hljs-number">4</span>/<span class="hljs-number">4</span>] Building <span class="hljs-keyword">fresh</span> packages...
<span class="hljs-keyword">success</span> Saved lockfile.
Done <span class="hljs-keyword">in</span> <span class="hljs-number">797.66</span>s.
✅ Installed <span class="hljs-keyword">project</span> dependencies.
✅ Done! 😁👍 Your <span class="hljs-keyword">project</span> <span class="hljs-keyword">is</span> ready <span class="hljs-keyword">for</span> development.
* <span class="hljs-keyword">change</span> <span class="hljs-keyword">directory</span> <span class="hljs-keyword">to</span> your <span class="hljs-keyword">new</span> <span class="hljs-keyword">project</span>
$ cd gitphone
$ <span class="hljs-keyword">Then</span> run the these commands <span class="hljs-keyword">to</span> <span class="hljs-keyword">get