React Native Elements
Cross Platform React Native UI Toolkit
Get Started
Installation
-
If you are using create-react-native-app or Expo, follow these instructions.
-
If your project is a standard React Native project (if you have an ios/android directory and created it with
react-native init
), follow these installation instructions.
Usage
Start using the components or try it on Snack here.
import { Button } from 'react-native-elements';
<Button />
Components included:
- Buttons
- Social Icons / Social Icon Buttons
- Icons
- Form Elements
- Search Bar
- ButtonGroup
- Checkboxes
- List Element
- Badge
- HTML style headings
- Card component
- Pricing Component
- Slider Component
- Tile Component
- Avatar Component
- Rating Component
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:
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.
Expo Demo App
Checkout the official 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 to view the implementation & run the RNE expo app locally.
π π π
v1.0 Roadmap Current release: 1.0.0-beta
New Features:
- Button component (re-write) - @monte9
- Input component (re-write) - @monte9 & @xavier-villelegier
- Search component - Platform specific (re-write) - @xavier-villelegier
- ListItem component - Platform specific (re-write) - @martinezguillaume, @johot
- Themes support - NEW - @Gregor1971
- React Native Web support - NEW - @Gregor1971
- Avatar component (refactored) - @monte9
- Production-ready screens
π₯ π― πΈ - @monte9, @xavier-villelegier, @martinezguillaume - Launching RNE Ecosystem
β¨ π β¨ - @monte9
v1.0 TODO:
- Update docs for Button component - @deadcoder0904
- Update docs for Input component - @deadcoder0904
- Update docs for Search component - $20
- Update docs for ListItem component - $20
- Write docs for Themes support - $20
- Write docs for React Native Web support - $20
- Write detailed release notes with new features & breaking changes - $30
- Recreate Settings page on iOS & android (to show listItem + searchBar + themes components) - $50
- Update react, react-native & other dependencies (edited) - $50
Release plan:
We are currently on v1.0.0-beta
. Since this is a beta release, any new installation of react-native-elements will get v0.19.0
. If you would like to try out our v1.0.0-beta
release (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
release is 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 mid-February 2018
Documentation
Contributing
Interested in contributing to this repo? Check out our Contributing Guide 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 to see them.
If there is something you's like to see or request a new feature, please submit an issue or a pull request.
Slack Community
In case you have any other question or would like to come say Hi! to the RNE community, join our Slack team. See you on the other side!
Backers
Support us with a monthly donation and help us continue our activities. [Become a backer]
Sponsors
Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]