Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/react-native-community/React-Native-Elements

Cross-Platform React Native UI Toolkit
https://github.com/react-native-community/React-Native-Elements
android cross-platform hacktoberfest hacktoberfest2023 ios mobile-app react react-native ui ui-components
Last synced: 2 months ago
JSON representation
Cross-Platform React Native UI Toolkit
Host: GitHub
URL: https://github.com/react-native-community/React-Native-Elements
Owner: react-native-elements
License: mit
Created: 2016-09-08T14:21:41.000Z (about 8 years ago)
Default Branch: next
Last Pushed: 2024-05-01T22:24:47.000Z (6 months ago)
Last Synced: 2024-08-28T16:55:32.811Z (2 months ago)
Topics: android, cross-platform, hacktoberfest, hacktoberfest2023, ios, mobile-app, react, react-native, ui, ui-components
Language: MDX
Homepage: https://reactnativeelements.com
Size: 162 MB
Stars: 24,908
Watchers: 367
Forks: 4,628
Open Issues: 122
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.old.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project

README

        


  

    

  





Cross Platform React Native UI Toolkit








  

  

  

  

  





  

  

  





  

  

  





Getting Started 🚀 - Documentation 📚 - Expo demo  - Blog - Releases






## Installation

```bash

npm install @rneui/themed @rneui/base

```

Follow

[these instructions](https://reactnativeelements.com/docs/installation)

to install React Native Elements!

### Packages

| Package           | Version                                                                                                                          | Downloads                                                                    |

| ----------------- | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |

| **@rneui/base**   | [![badge](https://img.shields.io/npm/v/@rneui/base.svg?style=flat-square-square)](https://www.npmjs.com/package/@rneui/base)     | ![npm](https://img.shields.io/npm/dm/@rneui/base?style=flat-square-square)   |

| **@rneui/themed** | [![badge](https://img.shields.io/npm/v/@rneui/themed.svg?style=flat-square-square)](https://www.npmjs.com/package/@rneui/themed) | ![npm](https://img.shields.io/npm/dm/@rneui/themed?style=flat-square-square) |

## Quick Start

Start using the components or try it on

[Snack](https://snack.expo.dev/@arpitbhalla/react-native-elements).

```tsx

import { Button } from '@rneui/base';

const App = () => ;

```

## React Native Web support

As a cross platform UI Toolkit, you can now use RNE on the web & share your codebase between your React Native + React web apps. RNE components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RNE and [React Native for Web](https://github.com/necolas/react-native-web).

Click [here](https://reactnativeelements.com/blog/2018/12/13/react-native-web) for a full walkthrough using React Native Elements + React Native Web.

## Expo demo app

Checkout the official

[React Native Elements App](https://expo.dev/@rneui/react-native-elements)

on Expo which uses all of the React Native Elements components.

If you are looking to contribute to the React Native Elements App,

[here](https://github.com/react-native-elements/react-native-elements/tree/next/example) to

view the implementation & Use this command to start example app locally

```bash

yarn example:start

```

## VS Code Extension

Install the [React Native Elements VS Code Extension](https://marketplace.visualstudio.com/items?itemName=rne.snippets) to speed up development.

## Documentation

[View the full docs here](https://reactnativeelements.com/docs)

## Contributing

Interested in contributing to this repo? Check out our

[Contributing Guide](https://reactnativeelements.com/docs/contributing), [Setup Guide](https://reactnativeelements.com/docs/contributing#setup)

and submit a PR for a new feature/bug fix.

A big shoutout to all our contributors! You could be here too!







### 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-elements/react-native-elements/labels/Good%20First%20Issue)

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-elements/react-native-elements/issues/new)

or a

[pull request](https://github.com/react-native-elements/react-native-elements/pulls).

### Community

- [Discord](https://discord.com/invite/e9RBHjkKHa) - In case you have any other question or would like to come say **Hi!** to the RNE community, join our [Discord Server](https://discord.com/invite/e9RBHjkKHa). See you on the other side! 👋😃

- [Twitter](https://twitter.com/rn_elements) - Follow us on Twitter to get the latest updates.

## Backers

[Become a backer](https://opencollective.com/react-native-elements#backer) and show your support for React Native Elements.

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/0/avatar)](https://opencollective.com/react-native-elements/backer/0/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/1/avatar)](https://opencollective.com/react-native-elements/backer/1/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/2/avatar)](https://opencollective.com/react-native-elements/backer/2/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/3/avatar)](https://opencollective.com/react-native-elements/backer/3/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/4/avatar)](https://opencollective.com/react-native-elements/backer/4/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/5/avatar)](https://opencollective.com/react-native-elements/backer/5/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/6/avatar)](https://opencollective.com/react-native-elements/backer/6/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/7/avatar)](https://opencollective.com/react-native-elements/backer/7/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/8/avatar)](https://opencollective.com/react-native-elements/backer/8/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/9/avatar)](https://opencollective.com/react-native-elements/backer/9/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/10/avatar)](https://opencollective.com/react-native-elements/backer/10/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/11/avatar)](https://opencollective.com/react-native-elements/backer/11/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/12/avatar)](https://opencollective.com/react-native-elements/backer/12/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/13/avatar)](https://opencollective.com/react-native-elements/backer/13/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/14/avatar)](https://opencollective.com/react-native-elements/backer/14/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/15/avatar)](https://opencollective.com/react-native-elements/backer/15/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/16/avatar)](https://opencollective.com/react-native-elements/backer/16/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/17/avatar)](https://opencollective.com/react-native-elements/backer/17/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/18/avatar)](https://opencollective.com/react-native-elements/backer/18/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/19/avatar)](https://opencollective.com/react-native-elements/backer/19/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/20/avatar)](https://opencollective.com/react-native-elements/backer/20/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/21/avatar)](https://opencollective.com/react-native-elements/backer/21/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/22/avatar)](https://opencollective.com/react-native-elements/backer/22/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/23/avatar)](https://opencollective.com/react-native-elements/backer/23/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/24/avatar)](https://opencollective.com/react-native-elements/backer/24/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/25/avatar)](https://opencollective.com/react-native-elements/backer/25/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/26/avatar)](https://opencollective.com/react-native-elements/backer/26/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/27/avatar)](https://opencollective.com/react-native-elements/backer/27/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/28/avatar)](https://opencollective.com/react-native-elements/backer/28/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/29/avatar)](https://opencollective.com/react-native-elements/backer/29/website)

## Sponsors

Do you use React Native Elements in production? If so, consider supporting this project as it will allow the maintainers to dedicate more time to maintaining this project and also building new features for everyone. Also, your app or company's logo will show [on GitHub](https://github.com/react-native-elements/react-native-elements#sponsors) and link to your website - who doesn't want a little extra exposure? [Here's the info](https://opencollective.com/react-native-elements#sponsor). Check our sponsors on [website](https://reactnativeelements.com/sponsor).

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/0/avatar)](https://opencollective.com/react-native-elements/sponsor/0/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/1/avatar)](https://opencollective.com/react-native-elements/sponsor/1/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/2/avatar)](https://opencollective.com/react-native-elements/sponsor/2/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/3/avatar)](https://opencollective.com/react-native-elements/sponsor/3/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/4/avatar)](https://opencollective.com/react-native-elements/sponsor/4/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/5/avatar)](https://opencollective.com/react-native-elements/sponsor/5/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/6/avatar)](https://opencollective.com/react-native-elements/sponsor/6/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/7/avatar)](https://opencollective.com/react-native-elements/sponsor/7/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/8/avatar)](https://opencollective.com/react-native-elements/sponsor/8/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/9/avatar)](https://opencollective.com/react-native-elements/sponsor/9/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/10/avatar)](https://opencollective.com/react-native-elements/sponsor/10/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/11/avatar)](https://opencollective.com/react-native-elements/sponsor/11/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/12/avatar)](https://opencollective.com/react-native-elements/sponsor/12/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/13/avatar)](https://opencollective.com/react-native-elements/sponsor/13/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/14/avatar)](https://opencollective.com/react-native-elements/sponsor/14/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/15/avatar)](https://opencollective.com/react-native-elements/sponsor/15/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/16/avatar)](https://opencollective.com/react-native-elements/sponsor/16/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/17/avatar)](https://opencollective.com/react-native-elements/sponsor/17/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/18/avatar)](https://opencollective.com/react-native-elements/sponsor/18/website)

[![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/19/avatar)](https://opencollective.com/react-native-elements/sponsor/19/website)