react-native-elements
Advanced tools
React Native Elements is a popular UI toolkit for React Native that provides a collection of customizable and reusable UI components. It aims to simplify the process of building mobile applications by offering a wide range of pre-built components that follow best practices and are easy to integrate.
Buttons
React Native Elements provides a variety of button types, including solid, outline, and clear buttons. These buttons are highly customizable and can be used to trigger actions or navigate within the app.
import { Button } from 'react-native-elements';
<Button
title="Solid Button"
type="solid"
onPress={() => console.log('Button Pressed')}
/>Cards
Cards are versatile containers that can hold various types of content, such as text, images, and buttons. They are useful for displaying information in a structured and visually appealing way.
import { Card } from 'react-native-elements';
<Card>
<Card.Title>Card Title</Card.Title>
<Card.Divider/>
<Text>Some text inside the card</Text>
</Card>Input
The Input component is used for text input fields. It supports various customization options, including icons, placeholders, and validation.
import { Input } from 'react-native-elements';
<Input
placeholder="Enter your text here"
leftIcon={{ type: 'font-awesome', name: 'user' }}
/>Avatar
The Avatar component is used to display profile pictures or icons. It supports different shapes (rounded, square) and sizes, making it suitable for user profiles and lists.
import { Avatar } from 'react-native-elements';
<Avatar
rounded
source={{ uri: 'https://example.com/avatar.jpg' }}
size="large"
/>ListItem
The ListItem component is used to create list items with various elements like avatars, titles, and subtitles. It is useful for creating lists of data, such as contact lists or settings menus.
import { ListItem } from 'react-native-elements';
<ListItem bottomDivider>
<Avatar source={{ uri: 'https://example.com/avatar.jpg' }} />
<ListItem.Content>
<ListItem.Title>John Doe</ListItem.Title>
<ListItem.Subtitle>Software Engineer</ListItem.Subtitle>
</ListItem.Content>
</ListItem>NativeBase is another popular UI component library for React Native. It offers a wide range of customizable components and follows a design system approach. Compared to React Native Elements, NativeBase provides more theming options and is more opinionated in terms of design.
React Native Paper is a UI library that follows the Material Design guidelines. It provides a set of components that are designed to look and feel like native Material Design components. Compared to React Native Elements, React Native Paper is more focused on adhering to Material Design principles.
React Native UI Kitten is a framework that provides a set of customizable and reusable UI components. It follows the Eva Design System and offers a theming mechanism that allows developers to define custom themes. Compared to React Native Elements, UI Kitten is more focused on providing a consistent design system and theming capabilities.
Cross Platform React Native UI Toolkit
This project has been renamed to @rneui/themed. Install using @rneui/themed instead. See the guide https://reactnativeelements.com/migration/migration-v3 to upgrade to v4.
Follow these instructions to install React Native Elements!
Start using the components or try it on Snack here.
import { Button } from 'react-native-elements';
<Button />;
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.
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.
Interested in contributing to this repo? Check out our Contributing Guide and submit a PR for a new feature/bug fix.
A big shoutout to all our contributors! You could be here too!
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.
We are currently looking for new core contributors that can help lead this project.
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! 👋😃
Become a backer and show your support for React Native Elements.
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.
FAQs
React Native Elements & UI Toolkit
We found that react-native-elements demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.
Security News
NIST's new password guidelines remove periodic changes and special character requirements, focusing on longer, more secure passwords for better authentication practices.