@deboxsoft/react-native-elements
Version:
React Native Elements & UI Toolkit
281 lines (225 loc) • 21.1 kB
Markdown
<p align="center">
<a href="https://react-native-training.github.io/react-native-elements/">
<img alt="react-native-elements" src="https://user-images.githubusercontent.com/5962998/37248835-ce3dad4a-24b1-11e8-9c4b-b058c5a5e1e9.png" width="450">
</a>
</p>
<h3 align="center">
React Native Elements
</h3>
<p align="center">
Cross Platform <a href="https://facebook.github.io/react-native/">React Native</a> UI Toolkit
</p>
<p align="center">
<a href="https://www.npmjs.com/package/react-native-elements"><img src="https://img.shields.io/npm/v/react-native-elements.svg?style=flat-square"></a>
<a href="https://www.npmjs.com/package/react-native-elements"><img src="https://img.shields.io/npm/dm/react-native-elements.svg?style=flat-square"></a>
<a href="https://travis-ci.org/react-native-training/react-native-elements"><img src="https://img.shields.io/travis/react-native-training/react-native-elements/master.svg?style=flat-square"></a>
<a href="https://reactnativetraining.herokuapp.com/"><img src="https://reactnativetraining.herokuapp.com/badge.svg"></a>
</p>
<p align="center">
<a href="#backers"><img src="https://opencollective.com/react-native-elements/backers/badge.svg"></a>
<a href="#sponsors"><img src="https://opencollective.com/react-native-elements/sponsors/badge.svg"></a>
<a href="https://codecov.io/gh/react-native-training/react-native-elements"><img src="https://codecov.io/gh/react-native-training/react-native-elements/coverage.svg"></a>
<a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/styled_with-prettier-ff69b4.svg"></a>
<a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-blue.svg"></a>
</p>
<br />
## Get Started
### Installation
Follow
[these instructions](https://react-native-training.github.io/react-native-elements/docs/getting_started.html)
to install React Native Elements!
### Usage
Start using the components or try it on Snack
[here](https://snack.expo.io/rJu6gJfBZ).
```js
import { Button } from 'react-native-elements';
<Button />;
```
## Components included:
* [x] [Avatar](https://react-native-training.github.io/react-native-elements/docs/0.19.1/avatar.html)
* [x] [Badge](https://react-native-training.github.io/react-native-elements/docs/0.19.1/badge.html)
* [x] [Button](https://react-native-training.github.io/react-native-elements/docs/0.19.1/button.html)
* [x] [ButtonGroup](https://react-native-training.github.io/react-native-elements/docs/0.19.1/button_group.html)
* [x] [Card](https://react-native-training.github.io/react-native-elements/docs/0.19.1/card.html)
* [x] [Checkbox](https://react-native-training.github.io/react-native-elements/docs/0.19.1/checkbox.html)
* [x] [Form Elements](https://react-native-training.github.io/react-native-elements/docs/0.19.1/forms.html)
* [x] [HTML style headings](https://react-native-training.github.io/react-native-elements/docs/0.19.1/text.html)
* [x] [Icon](https://react-native-training.github.io/react-native-elements/docs/0.19.1/icon.html)
* [x] [List and ListItem](https://react-native-training.github.io/react-native-elements/docs/0.19.1/lists.html)
* [x] [Pricing](https://react-native-training.github.io/react-native-elements/docs/0.19.1/pricing.html)
* [x] [Rating](https://react-native-training.github.io/react-native-elements/docs/0.19.1/rating.html)
* [x] [Search Bar](https://react-native-training.github.io/react-native-elements/docs/0.19.1/searchbar.html)
* [x] [Slider](https://react-native-training.github.io/react-native-elements/docs/0.19.1/slider.html)
* [x] [Social Icons / Social Icon Buttons](https://react-native-training.github.io/react-native-elements/docs/0.19.1/social_icon.html)
* [x] [Tile](https://react-native-training.github.io/react-native-elements/docs/0.19.1/tile.html)
## RNE Ecosystem:
React Native Elements also serves as a **platform** that connects **small
teams/individuals** that needs help developing their RN app with **open source
contributors** that are willing to **build complex UI screens & animated
interactions** for 💰💰💰.
Here are some of the screens that our developers have created so far:
<div style="display: flex; flex-direction: row; margin-bottom: 50px">
<img src="https://user-images.githubusercontent.com/7840686/32702785-b1d9114e-c7a0-11e7-9999-6c6a00d432ec.gif" width="280" />
<img src="https://user-images.githubusercontent.com/7840686/32702789-b6bbdce6-c7a0-11e7-8034-8144274fbdae.gif" width="280" />
<img src="https://user-images.githubusercontent.com/7840686/32702791-b947eedc-c7a0-11e7-8e8c-7dff1bd80564.gif" width="280" />
</div>
<br /><br />
If this sounds interesting and you would like to participate, kindly open a
**new issue with the design & spec of the UI screen** that you need to be
developed. One of our developers will respond to your issue with an estimate of
time & cost.
It's built on top of **RNE & Open Collective**. If you have any feedback or
would like to know more details about this kindly contact
**[Monte Thakkar](https://github.com/Monte9)**.
## Expo Demo App
Checkout the official
[React Native Elements App](https://expo.io/@monte9/react-native-elements-app)
on Expo which uses all of the React Native Elements components.
If you are looking to contribute to the React Native Elements App, click
[here](https://github.com/react-native-training/react-native-elements-app) to
view the implementation & run the RNE expo app locally.
## v1.0 Roadmap 🏃 🏎 🏇
Current release: `1.0.0-beta7`
### New Features:
* [x] Button component **(re-write)** - @monte9
* [x] Input component **(re-write)** - @monte9 & @xavier-villelegier
* [x] Search component - **Platform specific (re-write)** - @xavier-villelegier
* [x] Avatar component **(refactored)** - @monte9
* [x] Production-ready screens 🔥 💯 🎸 - @monte9, @xavier-villelegier,
@martinezguillaume
* [x] **Launching RNE Ecosystem** ✨🚀✨ - @monte9
* [x] ListItem component - **Platform specific (re-write)** -
@martinezguillaume, @johot
* [x] Themes support - **NEW** - @iRoachie
* [ ] React Native Web support - **NEW** - @Gregor1971 **WIP** -
[branch](https://github.com/react-native-training/react-native-elements/tree/rn-web) -
[PR](https://github.com/react-native-training/react-native-elements/pull/867)
### v1.0 TODO:
* [x] Update docs for Button component
* [x] Update docs for Input component
* [x] Update docs for Search component
* [x] Write detailed release notes with new features & breaking changes
* [x] Update react, react-native & other dependencies
* [x] Update docs for ListItem component -
**[$20](https://opencollective.com/react-native-elements#budget)**
* [x] Write docs for Themes support -
**[$20](https://opencollective.com/react-native-elements#budget)**
* [ ] Create a compelling demo/example app for RNE + RNW (Checkout
[rn-web](https://github.com/react-native-training/react-native-elements/tree/rn-web)
branch or
[this PR comment](https://github.com/react-native-training/react-native-elements/pull/867#issuecomment-362312699)
for context) -
**[$50](https://opencollective.com/react-native-elements#budget)**
* [ ] Write docs for React Native Web support (Checkout
[rn-web](https://github.com/react-native-training/react-native-elements/tree/rn-web)
branch or
[this PR comment](https://github.com/react-native-training/react-native-elements/pull/867#issuecomment-362312699)
for context) -
**[$50](https://opencollective.com/react-native-elements#budget)**
* [ ] Recreate Settings page on iOS & android (to show listItem + searchBar +
themes components) - **WIP** - @martinezguillaume
Feel free to reach out to us on our
[Slack channel](https://reactnativetraining.herokuapp.com) if you have any
questions about what to work on.
### Release plan:
Since this is a beta release, any new installation of react-native-elements will
get `v0.19.1`. If you would like to try out our `v1.0.0` beta releases (we
highly suggest you do), run the following command:
`yarn add react-native-elements@beta`
Since `v1` has a lot of API changes (many of which are breaking changes due to
re-written components), the `v1.0.0` beta releases are meant to give our users a
heads up and give them plenty of time to migrate their apps to `v1`.
The official `v1.0.0` will be released around December 2018 🎉
### Test v1.0 components
You can test new features of the `v1.0.0` beta releases on
[Expo Snack](https://snack.expo.io/) by modifying the `package.json` file:
`"react-native-elements": "^1.0.0-beta"`
This will install the latest beta release of React Native Elements.
## Documentation
[View the full docs here](https://react-native-training.github.io/react-native-elements/docs/0.19.1/overview.html)
## Contributing
Interested in contributing to this repo? Check out our
[Contributing Guide](https://react-native-training.github.io/react-native-elements/docs/contributing.html)
and submit a PR for a new feature/bug fix.
### First Contributors
We encourage everyone to contribute & submit PR's especially first-time
contributors. Look for the label `👶 Good First Issue` on the issues. Click
[here](https://github.com/react-native-training/react-native-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22%F0%9F%91%B6+Good+First+Issue%22)
to see them.
If there is something you's like to see or request a new feature, please submit
an
[issue](https://github.com/react-native-training/react-native-elements/issues/new)
or a
[pull request](https://github.com/react-native-training/react-native-elements/pulls).
### Slack Community
In case you have any other question or would like to come say **Hi!** to the RNE
community, join our [Slack team](https://reactnativetraining.herokuapp.com/).
See you on the other side! 👋😃
## Backers
Support us with a monthly donation and help us continue our activities.
[[Become a backer](https://opencollective.com/react-native-elements#backer)]
<a href="https://opencollective.com/react-native-elements/backer/0/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/0/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/1/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/1/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/2/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/2/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/3/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/3/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/4/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/4/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/5/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/5/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/6/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/6/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/7/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/7/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/8/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/8/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/9/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/9/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/10/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/10/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/11/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/11/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/12/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/12/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/13/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/13/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/14/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/14/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/15/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/15/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/16/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/16/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/17/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/17/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/18/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/18/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/19/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/19/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/20/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/20/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/21/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/21/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/22/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/22/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/23/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/23/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/24/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/24/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/25/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/25/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/26/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/26/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/27/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/27/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/28/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/28/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/backer/29/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/29/avatar.svg"></a>
## Sponsors
Become a sponsor and get your logo on our README on Github with a link to your
site.
[[Become a sponsor](https://opencollective.com/react-native-elements#sponsor)]
<a href="https://opencollective.com/react-native-elements/sponsor/0/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/1/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/1/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/2/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/2/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/3/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/3/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/4/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/4/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/5/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/5/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/6/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/6/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/7/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/7/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/8/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/8/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/9/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/9/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/10/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/10/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/11/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/11/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/12/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/12/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/13/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/13/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/14/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/14/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/15/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/15/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/16/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/16/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/17/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/17/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/18/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/18/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/19/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/19/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/20/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/20/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/21/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/21/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/22/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/22/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/23/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/23/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/24/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/24/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/25/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/25/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/26/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/26/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/27/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/27/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/28/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/28/avatar.svg"></a>
<a href="https://opencollective.com/react-native-elements/sponsor/29/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/29/avatar.svg"></a>