react-native-elements

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Contributing · React Native Elements</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="<p>Thanks for taking the time to checkout this project and being willing to</p> "/><meta name="docsearch:version" content="1.0.0"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Contributing · 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>Thanks for taking the time to checkout this project and being willing to</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"><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>Repo</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/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 navListItemActive"><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/contributing.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Contributing</h1></header><article><div><span><p>Thanks for taking the time to checkout this project and being willing to contribute!</p> <p>Here are some of some of ways you can help:</p> <ul> <li><a href="#reporting-bugs">Reporting Bugs</a></li> <li><a href="#suggesting-a-feature">Suggesting a Feature</a></li> <li><a href="#responding-to-issues">Responding to Issues</a></li> <li><a href="#improving-the-documentation">Improving the Documentation</a></li> <li><a href="#implementing-bug-fixes-and-improvements">Implementing Bug Fixes and Improvements</a></li> </ul> <h2><a class="anchor" aria-hidden="true" id="reporting-bugs"></a><a href="#reporting-bugs" 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>Reporting Bugs</h2> <p>React Native Elements is used by many people, in fact they're over 9000 persons using it in their projects. With that many use cases, bugs are sure to come up from time to time. We release almost every two weeks, so sometimes we may accidentally miss something along the way. When you think you've found a bug here's what to do:</p> <ol> <li><p>Check your version. Most of the time, a fix has been made and released in new a new version. However, you may still be on an old version. The easiest way to validate this, it to update your version of react-native-elements to the latest.</p></li> <li><p>Search the existing <a href="https://github.com/react-native-training/react-native-elements/issues">issues</a> and <a href="https://github.com/react-native-training/react-native-elements/pulls">pull requests</a> for one like what you're seeing. If you see one, add a 👍 reaction (please no +1 comments). Read through the comments and see if you can provide anymore valuable information to the thread. The more use cases we have, the easier it is to solve the issue.</p></li> <li><p>If there are no other issues like yours then create a new one. New issues come with a issue template, so make sure to fill out as much information as possible.</p></li> </ol> <p>If this is your first open source contribution, please take a look at <a href="https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github">this</a> guide.</p> <h2><a class="anchor" aria-hidden="true" id="suggesting-a-feature"></a><a href="#suggesting-a-feature" 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>Suggesting a feature</h2> <p>Have a cool idea for a component? Think you can implement an existing feature better? Go ahead and open and issue, describe what you want to accomplish and lastly, why you think React Native Elements would benefit from it.</p> <p>A few things to consider/add:</p> <ul> <li>As clearly as possible, attach screenshots, concepts of how this feature should behave</li> <li>Do you have any thoughts on how to implement this feature? Have you done something similar already?</li> <li>Hold off on submitting feature pull requests until the feature has been discussed. Once the feature has been established and agreed upon, create the pull request.</li> </ul> <h2><a class="anchor" aria-hidden="true" id="responding-to-issues"></a><a href="#responding-to-issues" 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>Responding to Issues</h2> <p>When someone posts an issue, a maintainer might not be able to respond right away. Or a person may post and issue that has incomplete information. As a contributor you can help by answering the issue yourself if you know the cause of it, or help the maintainers by making sure that all the information necessary to validate the issue is there.</p> <h2><a class="anchor" aria-hidden="true" id="improving-the-documentation"></a><a href="#improving-the-documentation" 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>Improving the Documentation</h2> <p>Our documentation is built with an open-source tool called <a href="https://docusaurus.io">Docusaurus</a>. It has a ton of great features, the most important being versioning - which allows us to have documentation for every version we release.</p> <p>The easiest way to contribute to a particular doc is through the Edit button on the page. It'll take you directly to the exact file for that page on the repo.</p> <p>Since all documents are versioned, it might be bit tricky to find which file needs changing. You can use the rule below to figure out which file you need to edit.</p> <ul> <li><a href="#changes-for-an-existing-doc-on-a-version-not-yet-released">Changes for an existing doc on a version not yet released</a></li> <li><a href="#adding-documentation-for-a-new-component">Adding documentation for a new component</a></li> <li><a href="#rewording-adding-missed-info-or-making-a-typo-for-a-released-version">Rewording, adding missed info, or making a typo for a released version</a></li> <li><a href="#editing-an-existing-page-that-s-not-docs-or-components">Editing an existing page that's not docs or components</a></li> <li><a href="#editing-a-document-that-appears-the-same-in-all-versions">Editing a document that appears the same in all versions</a></li> </ul> <h3><a class="anchor" aria-hidden="true" id="changes-for-an-existing-doc-on-a-version-not-yet-released"></a><a href="#changes-for-an-existing-doc-on-a-version-not-yet-released" 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>Changes for an existing doc on a version not yet released</h3> <p>These files are located in the <code>/docs</code> folder. So if I wanted to add a new prop on the Avatar component, I'll need to document that in <code>/docs/avatar.md</code>.</p> <h3><a class="anchor" aria-hidden="true" id="adding-documentation-for-a-new-component"></a><a href="#adding-documentation-for-a-new-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>Adding documentation for a new component</h3> <p>You'll be creating your <code>.md</code> file in the <code>/docs</code> folder. Be sure to fill out the header at the top of the file:</p> <pre><code class="hljs"><span class="hljs-meta">---</span> <span class="hljs-attr">id:</span> <span class="hljs-string">my-component</span> <span class="hljs-attr">title:</span> <span class="hljs-string">My</span> <span class="hljs-string">Component</span> <span class="hljs-meta">---</span> </code></pre> <p>Lastly you'll need to add it to sidebar. This sidebar file is <code>/website/sidebars.json</code>. Then add the <code>id</code> from the document we just created into one of the sidebars.</p> <h3><a class="anchor" aria-hidden="true" id="rewording-adding-missed-info-or-making-a-typo-for-a-released-version"></a><a href="#rewording-adding-missed-info-or-making-a-typo-for-a-released-version" 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>Rewording, adding missed info, or making a typo for a released version</h3> <p>These files are located in: <br /> <code>/website/versioned_docs/version-{version_name}/{file-name}</code>. <br /> The last directory will differ depending on what version you are submitting docs for.</p> <blockquote> <p>Docusaurus only creates new versions of files if the <code>original</code> document in the <code>/docs</code> folder has changed since a release was made.</p> </blockquote> <p>If I added docs for <code>Avatar.md</code> and it was our ever first release say <code>0.19.0</code>, when releasing that version it'll create <code>/website/versioned_docs/version-0.19.0/avatar.md</code>.</p> <p>Now if I go to release <code>0.20.0</code> and didn't change <code>/docs/Avatar.md</code>, then they'll be <strong>no</strong> <code>/website/versioned_docs/version-0.20.0/avatar.md</code>. Docusaurus will simply point to the old version from <code>0.19.0</code>.</p> <h3><a class="anchor" aria-hidden="true" id="editing-an-existing-page-that-s-not-docs-or-components"></a><a href="#editing-an-existing-page-that-s-not-docs-or-components" 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>Editing an existing page that's not docs or components</h3> <p>These files are located in: <code>/website/pages/en/</code>.</p> <h3><a class="anchor" aria-hidden="true" id="editing-a-document-that-appears-the-same-in-all-versions"></a><a href="#editing-a-document-that-appears-the-same-in-all-versions" 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>Editing a document that appears the same in all versions</h3> <p>This one is particularly the most complicated and requires a bit of duplication.</p> <p>Let's say we want edit the <code>Getting Started</code> doc. We want this document to be the same for all versions. Firstly we'll need to make edits to <code>/docs/getting_started.md</code> so it's available in future versions. Secondly we'll need to duplicate those changes in <code>/website/versioned_docs/version-{version-number}/getting_started.md</code>.</p> <p>We'll only need to make this change to the <strong>first set of versioned docs</strong>. In our case <code>/website/versioned_docs/version-0.19.0/getting_started.md</code>.</p> <p>Be sure to check out the documentation over at <a href="https://docusaurus.io">docusaurus.io</a> if you have any other queries.</p> <h2><a class="anchor" aria-hidden="true" id="implementing-bug-fixes-and-improvements"></a><a href="#implementing-bug-fixes-and-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>Implementing Bug Fixes and Improvements</h2> <p>If you wish to submit a pull request for a new feature or issue then this is guide for you. On Github, we extensively use labels to reflect the content and status of issues.</p> <p>For all issues that are bugs check <a href="https://github.com/react-native-training/react-native-elements/issues?utf8=✓&q=is%3Aissue+is%3Aopen+label%3A%22%3Aboom%3A++Bug%22+-label%3A%22✅+Fixed+-+Next+Release%22+-label%3A%22📥+PR+Submitted%22">here</a>.</p> <p>Improvements are separated into two categories:</p> <ul> <li><a href="https://github.com/react-native-training/react-native-elements/issues?utf8=✓&q=is%3Aissue+is%3Aopen+label%3A%22💡New+Component%22+-label%3A%22✅+Fixed+-+Next+Release%22+-label%3A%22📥+PR+Submitted%22+">New components</a>.</li> <li><a href="https://github.com/react-native-training/react-native-elements/issues?utf8=✓&q=is%3Aissue+is%3Aopen+label%3A%22✨Enhancement%22+-label%3A%22✅+Fixed+-+Next+Release%22+-label%3A%22📥+PR+Submitted%22">Enhancements</a>.</li> </ul> <p>Check out the <a href="/react-native-elements/docs/labels.html">Labels guide</a> for a more descriptive info on our usage of labels.</p> <hr> <p>To begin you should start by forking this repository first. This should get you setup on your local machine:</p> <h3><a class="anchor" aria-hidden="true" id="setup"></a><a href="#setup" 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>Setup</h3> <ul> <li>Install <a href="https://nodejs.org/">Node.js</a> if you have not already. (<em>We suggest you to use node v6.x.x</em>)</li> <li>Fork the <strong>react-native-elements</strong> repo <a href="https://github.com/react-native-training/react-native-elements">here</a></li> <li><code>git clone <your-forked-repo-url> && cd react-native-elements</code></li> <li><code>yarn install</code> OR <code>npm install</code></li> <li><code>npm test</code></li> </ul> <p>One you have done this, create a new branch with a name that loosely describes the issue on which you will be working. Once you think you have the addressed the issue in question, submit a pull request to the <code>next</code> branch.</p> <h3><a class="anchor" aria-hidden="true" id="committing-and-pushing-changes"></a><a href="#committing-and-pushing-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>Committing and Pushing Changes</h3> <p>We like to provide informative and useful commit messages when pushing changes to the repo. This helps tremendously when sifting through the commit history to find a particular changeset. A useful guide for creating meaningful commit messages can be found <a href="https://www.conventionalcommits.org/en/v1.0.0-beta.2/#specification">here.</a></p> </span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native-elements/docs/tooltip.html"><span class="arrow-prev">← </span><span>Tooltip</span></a><a class="docs-next button" href="/react-native-elements/docs/testing.html"><span>Testing</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#reporting-bugs">Reporting Bugs</a></li><li><a href="#suggesting-a-feature">Suggesting a feature</a></li><li><a href="#responding-to-issues">Responding to Issues</a></li><li><a href="#improving-the-documentation">Improving the Documentation</a><ul class="toc-headings"><li><a href="#changes-for-an-existing-doc-on-a-version-not-yet-released">Changes for an existing doc on a version not yet released</a></li><li><a href="#adding-documentation-for-a-new-component">Adding documentation for a new component</a></li><li><a href="#rewording-adding-missed-info-or-making-a-typo-for-a-released-version">Rewording, adding missed info, or making a typo for a released version</a></li><li><a href="#editing-an-existing-page-that-s-not-docs-or-components">Editing an existing page that's not docs or components</a></li><li><a href="#editing-a-document-that-appears-the-same-in-all-versions">Editing a document that appears the same in all versions</a></li></ul></li><li><a href="#implementing-bug-fixes-and-improvements">Implementing Bug Fixes and Improvements</a><ul class="toc-headings"><li><a href="#setup">Setup</a></li><li><a href="#committing-and-pushing-changes">Committing and Pushing Changes</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>