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
raised
icon={{name: 'home', size: 32}}
buttonStyle={{backgroundColor: 'red', borderRadius: 10}}
textStyle={{textAlign: 'center'}}
title={`Welcome to\nReact Native Elements`}
/>
Components Included
- [x] Buttons
- [x] Social Icons / Social Icon Buttons
- [x] Icons
- [x] Side Menu
- [x] Form Elements
- [x] Search Bar
- [x] ButtonGroup
- [x] Checkboxes
- [x] List Element
- [x] Badge
- [x] Tab Bar Component
- [x] HTML style headings
- [x] Card component
- [x] Pricing Component
- [x] Grid Component
- [x] Slider Component
- [x] Tile Component
- [x] Avatar Component
- [x] Rating Component
- [x] SwipeDeck Component
Documentation
Demo App
Run the pre built and configured React Native Elements App on Expo which uses all of the React Native Elements components.
Also checkout the example/
folder to view the implementation & run the expo app locally.
Roadmap
FIRST CONTRIBUTORS
Look for the label Good First Task
on the issues. Click here to see them.
NOT STARTED
- [ ] Compatibility with react-native-web
- [ ] Support Multiple FormInput refs
- [ ] Two-Marker Slider
- [ ] Add Notification Component
- [ ] Add Image Component which supports parallax
- [ ] Add DatePicker/Calendar Component
- [ ] Add Theming & Default Styles
- [ ] Something you's like to see? Submit an issue or a pull request
Contributing
Interested in contributing to this repo? Have a look at our Contributing Guide
Also come say hi to the RNE community on our public 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]