react-native-elements
Version:
React Native Elements & UI Toolkit
83 lines (75 loc) • 13.5 kB
HTML
<html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Customization · React Native Elements</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="<p>Congrats! You've installed React Native Elements and your immediate question goes something like this:</p>
"/><meta name="docsearch:version" content="0.19.1"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Customization · 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>Congrats! You've installed React Native Elements and your immediate question goes something like this:</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>0.19.1</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/react-native-elements/docs/0.19.1/getting_started.html" target="_self">Docs</a></li><li class="siteNavGroupActive"><a href="/react-native-elements/docs/0.19.1/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"><a class="navItem" href="/react-native-elements/docs/0.19.1/getting_started.html">Getting Started</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/react-native-elements/docs/0.19.1/customization.html">Customization</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/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/0.19.1/overview.html">Overview</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/avatar.html">Avatar</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/badge.html">Badge</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/button.html">Button</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/button_group.html">ButtonGroup</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/card.html">Card</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/checkbox.html">CheckBox</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/divider.html">Divider</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/forms.html">Forms</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/header.html">Header</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/icon.html">Icon</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/lists.html">Lists</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/pricing.html">Pricing</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/rating.html">Rating</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/searchbar.html">SearchBar</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/slider.html">Slider</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/social_icon.html">SocialIcon</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/text.html">Text</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/tile.html">Tile</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/0.19.1/contributing.html">Contributing</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/testing.html">Testing</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/0.19.1/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/customization.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Customization</h1></header><article><div><span><p>Congrats! You've installed React Native Elements and your immediate question goes something like this:</p>
<blockquote>
<p>So umm, how I do change how it looks?</p>
</blockquote>
<p>Great question! A UI Kit wouldn't be that useful if the apps everyone built looked the same right? For this case
React Native Elements provide a number of props on each component to enable you to style them how you want.</p>
<h2><a class="anchor" aria-hidden="true" id="containers"></a><a href="#containers" 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>Containers</h2>
<p><em>Every</em> component from React Native Elements has a container around it. The container is just a traditional <code><View /></code> from
react native that has some styling on it. This default styling prevents components from colliding with each other.
If you want to change how two components react to each on the screen your first stop should be the <code>containerStyle</code> prop.</p>
<p>Similar to <code>containerStyle</code>, components may provide their custom style props like <code>buttonStyle</code>, <code>titleStyle</code> etc.
Always refer to the component doc to find out which style props the component provides.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native-elements/docs/0.19.1/getting_started.html"><span class="arrow-prev">← </span><span>Getting Started</span></a><a class="docs-next button" href="/react-native-elements/docs/0.19.1/troubleshooting.html"><span>Troubleshooting</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#containers">Containers</a></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>