react-native-elements
Version:
React Native Elements & UI Toolkit
160 lines (151 loc) • 18.4 kB
HTML
<html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Getting Started · React Native Elements</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="<p>The aim of React Native Elements is to provide an all-in-one UI kit for creating</p>
"/><meta name="docsearch:version" content="1.0.0"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Getting Started · 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="<p>The aim of React Native Elements is to provide an all-in-one UI kit for creating</p>
"/><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="siteNavGroupActive siteNavItemActive"><a href="/react-native-elements/docs/getting_started.html" target="_self">Docs</a></li><li class="siteNavGroupActive"><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=""><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>It Starts Basic</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">It Starts Basic</h3><ul class=""><li class="navListItem navListItemActive"><a class="navItem" href="/react-native-elements/docs/getting_started.html">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/overview.html">Overview</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/customization.html">Customization</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/troubleshooting.html">Troubleshooting</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Components</h3><ul class=""><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/avatar.html">Avatar</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/badge.html">Badge</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/button.html">Button</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/button_group.html">ButtonGroup</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/card.html">Card</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/checkbox.html">CheckBox</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/divider.html">Divider</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/header.html">Header</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/icon.html">Icon</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/image.html">Image</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/input.html">Input</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/listitem.html">ListItem</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/overlay.html">Overlay</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/pricing.html">Pricing</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/rating.html">Rating</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/searchbar.html">SearchBar</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/slider.html">Slider</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/social_icon.html">SocialIcon</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/text.html">Text</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/tile.html">Tile</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/tooltip.html">Tooltip</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Repo</h3><ul class=""><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/contributing.html">Contributing</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/testing.html">Testing</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/labels.html">Label Guide</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"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/react-native-training/react-native-elements/edit/master/docs/getting_started.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Getting Started</h1></header><article><div><span><p>The aim of React Native Elements is to provide an all-in-one UI kit for creating
apps in react native. There are many great ui components made by developers all
around open source. React Native Elements takes the hassle of assembling these
packages together by giving you a ready made kit with consistent api and look
and feel.</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>Installing React Native Elements depends on your type of react native project.</p>
<div class="toggler">
<ul role="tablist" >
<li id="expo" class="button-expo" aria-selected="false" role="tab" tabindex="0" aria-controls="expo" onclick="displayTab('expo')">
Expo | Create React Native App
</li>
<li id="native" class="button-native" aria-selected="false" role="tab" tabindex="-1" aria-controls="nativetab" onclick="displayTab('native')">
React Native CLI
</li>
</ul>
</div>
<p><block class="expo" /></p>
<p><a href="https://expo.io">Expo</a> or
<a href="https://github.com/react-community/create-react-native-app">create-react-native-app</a>
projects include <strong>react-native-vector-icons</strong> out of the box, so all you need
to do is install <strong>react-native-elements</strong>.</p>
<pre><code class="hljs">yarn add react-<span class="hljs-keyword">native</span>-elements
<span class="hljs-comment"># or with npm</span>
<span class="hljs-built_in">npm</span> install --save react-<span class="hljs-keyword">native</span>-elements
</code></pre>
<blockquote>
<p><strong>Note:</strong> If you see the <code>UNMET PEER DEPENDENCY</code> warning for
<strong>react-native-vector-icons</strong> like below, you can ignore it as
<em>react-native-vector-icons</em> is already installed by <em>expo</em> or <em>crna</em>.</p>
<p><img src="/react-native-elements/img/peer-dep-error.png" alt="React Native Vector Icons Unmet Peer Dependency"></p>
</blockquote>
<p><block class="native" /></p>
<p>If your project is a standard React Native project created using
<code>react-native init</code> (it should have an ios/android directory), then follow these
installation instructions:</p>
<h3><a class="anchor" aria-hidden="true" id="step-1-install-react-native-elements"></a><a href="#step-1-install-react-native-elements" 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>Step 1: Install react-native-elements</h3>
<pre><code class="hljs">yarn add react-<span class="hljs-keyword">native</span>-elements
<span class="hljs-comment"># or with npm</span>
<span class="hljs-built_in">npm</span> i react-<span class="hljs-keyword">native</span>-elements --save
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="step-2-install-react-native-vector-icons"></a><a href="#step-2-install-react-native-vector-icons" 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>Step 2: Install react-native-vector-icons</h3>
<p>If you have already installed <strong>react-native-vector-icons</strong> as a dependency for
your project you can skip this step. Otherwise run the following command:</p>
<pre><code class="hljs"><span class="hljs-comment"># yarn</span>
yarn add react-<span class="hljs-keyword">native</span>-vector-icons
<span class="hljs-comment"># or with npm</span>
<span class="hljs-built_in">npm</span> i --save react-<span class="hljs-keyword">native</span>-vector-icons
<span class="hljs-comment"># link</span>
react-<span class="hljs-keyword">native</span> link react-<span class="hljs-keyword">native</span>-vector-icons
</code></pre>
<p><em>If you have any issues installing react-native-vector-icons, check out their
installation guide
<a href="https://github.com/oblador/react-native-vector-icons#installation">here</a> or
debug it using
<a href="https://github.com/react-native-training/react-native-elements/issues/503">this issue</a>.</em></p>
<script>
function displayTab(value) {
var container = document.getElementsByTagName('block')[0].parentNode;
container.className = 'display-' + value;
}
function convertBlocks() {
// Convert <div>...<span><block /></span>...</div>
// Into <div>...<block />...</div>
var blocks = document.querySelectorAll('block');
for (var i = 0; i < blocks.length; ++i) {
var block = blocks[i];
var span = blocks[i].parentNode;
var container = span.parentNode;
container.insertBefore(block, span);
container.removeChild(span);
}
// Convert <div>...<block />content<block />...</div>
// Into <div>...<block>content</block><block />...</div>
blocks = document.querySelectorAll('block');
for (var i = 0; i < blocks.length; ++i) {
var block = blocks[i];
while (
block.nextSibling &&
block.nextSibling.tagName !== 'BLOCK'
) {
block.appendChild(block.nextSibling);
}
}
}
convertBlocks();
displayTab('expo')
</script>
</span></div></article></div><div class="docs-prevnext"><a class="docs-next button" href="/react-native-elements/docs/overview.html"><span>Overview</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#installation">Installation</a><ul class="toc-headings"><li><a href="#step-1-install-react-native-elements">Step 1: Install react-native-elements</a></li><li><a href="#step-2-install-react-native-vector-icons">Step 2: Install react-native-vector-icons</a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native-elements/" class="nav-home"><img src="/react-native-elements/img/logo.png" alt="React Native Elements" width="120" height="58"/></a><div><h5>Docs</h5><a href="/react-native-elements/docs/en/getting_started.html">Getting Started</a><a href="/react-native-elements/docs/en/overview.html">Components</a></div><div><h5>Community</h5><a href="https://reactnativetraining.herokuapp.com/" target="_blank">Chat with us on Slack</a><a href="https://github.com/react-native-training/react-native-elements/issues/" target="_blank">Submit a bug or feature</a><a href="https://opencollective.com/react-native-elements" target="_blank">Support us on Open Collective</a></div><div><h5>More</h5><a href="https://github.com/react-native-training/react-native-elements" target="blank">GitHub</a><a class="github-button" href="https://github.com/react-native-training/react-native-elements" data-icon="octicon-star" data-count-href="/facebook/docusaurus/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><section class="copyright-logo-container"><a href="http://reactnative.training" target="_blank"><img src="/react-native-elements/img/react-native-training.png" alt="React Native Training" width="90"/></a></section><section class="copyright">Copyright © 2019 React Native Training</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;
}
// keyCode for '/' (slash)
if (e.keyCode === 191) {
const search = document.getElementById('search_input_react');
search && search.focus();
}
});
</script><script>
var search = docsearch({
apiKey: '89e04a9445d16350e100c2d2421f2d39',
indexName: 'react_native_elements',
inputSelector: '#search_input_react'
});
</script></body></html>