react-native-elements / react-native-elements
Cross-Platform React Native UI Toolkit
AI Architecture Analysis
This repository is indexed by RepoMind. By analyzing react-native-elements/react-native-elements in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.
Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.
Embed this Badge
Showcase RepoMind's analysis directly in your repository's README.
Repository Summary (README)
PreviewCross Platform <a href="https://reactnative.dev">React Native</a> UI Toolkit
</div> <br/> <p align="center"> <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square&color=0089E3"></a> <a href="https://github.com/react-native-elements/react-native-elements"><img src="https://img.shields.io/github/stars/react-native-elements/react-native-elements?label=stars&logo&style=flat-square&color=0089E3"></a> <a href="https://github.com/react-native-elements/react-native-elements/actions/workflows/bleeding-edge-dist.yml"><img src="https://img.shields.io/github/actions/workflow/status/react-native-elements/react-native-elements/bleeding-edge-dist.yml?branch=next&style=flat-square"></a> <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/styled_with-prettier-F7B93E.svg?style=flat-square"></a> <a href="https://codecov.io/gh/react-native-elements/react-native-elements"><img src="https://img.shields.io/codecov/c/gh/react-native-elements/react-native-elements?color=F01F7A&style=flat-square"></a> </p> <div align="center"> <a href="https://twitter.com/rn_elements"><img src="https://img.shields.io/twitter/follow/rn_elements?style=flat-square&label=Twitter&logo=TWITTER&color=0089E3"></a> <a href="https://github.com/react-native-elements/react-native-elements/discussions"><img src="https://img.shields.io/github/discussions/react-native-elements/react-native-elements?label=Discussions&logo=github&style=flat-square"></a> <a href="https://discord.com/invite/e9RBHjkKHa"><img src="https://img.shields.io/badge/Join-Discord-5865F2?style=flat-square&logo=discord&logoColor=FFFFFF"></a> </div> <p align="center"> <a href="#backers"><img src="https://opencollective.com/react-native-elements/backers/badge.svg?style=flat-square&color=0089E3"></a> <a href="#sponsors"><img src="https://opencollective.com/react-native-elements/sponsors/badge.svg?style=flat-square&color=0089E3&logo=opencollective"></a> <a href="https://github.com/sponsors/react-native-elements"><img src="https://img.shields.io/github/sponsors/react-native-elements?label=Sponsor&logo=githubsponsors&style=flat-square"></a> </p> <div align="center"><a href="https://reactnativeelements.com">Getting Started 🚀</a> - <a href="https://reactnativeelements.com/docs">Documentation 📚</a> - <a href="https://expo.dev/@rneui/react-native-elements">Expo demo </a> - <a href="https://reactnativeelements.com/blog">Blog</a> - <a href="https://github.com/react-native-elements/react-native-elements/releases">Releases</a>
</div> <br /> <!--  -->Installation
npm install @rneui/themed @rneui/base
Follow these instructions to install React Native Elements!
Packages
| Package | Version | Downloads |
|---|---|---|
| @rneui/base |  |  |
| @rneui/themed |  |  |
Quick Start
Start using the components or try it on Snack.
import { Button } from '@rneui/base';
const App = () => <Button title="Hello World!" />;
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.
Click here for a full walkthrough using React Native Elements + React Native Web.
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, here to view the implementation & Use this command to start example app locally
yarn example:start
VS Code Extension
Install the React Native Elements VS Code Extension to speed up development.
Documentation
Contributing
Interested in contributing to this repo? Check out our Contributing Guide, Setup Guide and submit a PR for a new feature/bug fix.
A big shoutout to all our contributors! You could be here too! <a href="https://github.com/react-native-elements/react-native-elements/graphs/contributors"> <img src="https://contrib.rocks/image?repo=react-native-elements/react-native-elements" /> </a>
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.
Community
-
Discord - In case you have any other question or would like to come say Hi! to the RNE community, join our Discord Server. See you on the other side! 👋😃
-
Twitter - Follow us on Twitter to get the latest updates.
Backers
Become a backer and show your support for React Native Elements.
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 and link to your website - who doesn't want a little extra exposure? Here's the info. Check our sponsors on website.