In this tutorial we will learn how to use React Native Elements to design the UI in React Native projects. How to implement these elements in the project UI and why these are necessary.

What Are React Native Elements?

The aim of React Native Elements is to provide an all-in-one UI kit for React Native apps. There are many widgets in react native which provide the way to design best UI in react native apps. By combining these elements we will make an app. Some of the common elements are below:

• Avatar
• Badge
• Bottom Sheet
• Button
• Button Group
• Card
• Checkbox
• Chip
• Divider
• Floating Action Button
• Header
• Icon
• Input
• Image
• Linear Progress
• List Item
• Overlay
• Pricing
• Rating
• Search Bar
• Slider
• Social Icon
• Speed Dial
• Switch
• Tab
• Text
• Tile
• Tooltip

Install Dependency

npm install react-native-elements

# or with yarn
yarn add react-native-elements

Explanation One By one

Some of description of each component is below. You can visit the react native element website to learn each of them from here.

Avatar

Avatars are commonly used to represent the user and contains image, icon or text.

Badge

Badges are small component, these are used to communicate a numerical value or indicates a status of item.

Bottom Sheet

Bottom Sheet overlay a model that displays content from the bottom of the screen.

Button Element in React Native

Buttons are touchable element in react native. Button interact with screen. These can display a text, icon or both.

Button Group

Button Group is a linear set of segments, each of which function as a button that can display a different view.

Card

Cards are best way to display information which contains image, button, text and more component. Card are clickable element in react native.

Checkbox

Checkboxes are used to determine the condition in react native apps like selecting the condition, on/off, switch or true or false conditions.

Chip

Chips represent an input, attribute or action. They may display text, icon or both in react native apps.

Divider

Dividers in react native are visual separators of content in react native elements.

Floating Action Button

A floating action button (FAB) in react native. It a circular action button which always appears in front of all screens.

Header

Headers are navigation component which displays the information about the current page.

Icon In React Native Elements

Icons are used to show the indication. These are visual indicators which describe about action or intent.

Input

Inputs are used to take input from user. These can display in form or dialog.

Image

Image is used to display an image from an URL or from local storage.

Linear Progress

Linear progress shows the current state of the ongoing task such as loading or downloading.

List Item

List Item displays the information about a row. such as in ListView, FlatList. It can contain avatar, icon, image, text and more elements.

Overlay

The overlay element is used to make a view above another elements. The overlay is looks like a popup.

Pricing

Pricing is a component that displays the price in a beautiful way in the table format.

Rating

Rating element displays the number of stars which shows the feedback from user. These can contains different colors.

SearchBar

The main use of SearchBar is to filter the items from the list. We can also select the item after searching from the list.

Slider

Slider allow user to select value from a given minimum and maximum range. The slider slides on a rack by dragging it using thumb.

Social Icons

Social icons mainly used to connect with social media platforms.

Speed Dial

Speed Dial is a hidden elements in React Native Elements. These appears when we click on the ICON like FAB and again get hide on toggle click.

Switch

Switches represent the true/false state. These can also be used in ON of OFF conditions.

Tabs

Tabs loads multiple screens on a single screen.

Text

Text displays characters or string/words at various sizes.

Tiles

Tiles like cards, are a convenient way to display a related content about a single object.

Tooltip

Tooltip displays informative text when someone tap on element.