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:
- Bottom Sheet
- Button Group
- Floating Action Button
- Linear Progress
- List Item
- Search Bar
- Social Icon
- Speed Dial
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.
Avatars are commonly used to represent the user and contains image, icon or text.
Badges are small component, these are used to communicate a numerical value or indicates a status of item.
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 is a linear set of segments, each of which function as a button that can display a different view.
Cards are best way to display information which contains image, button, text and more component. Card are clickable element in react native.
Checkboxes are used to determine the condition in react native apps like selecting the condition, on/off, switch or true or false conditions.
Chips represent an input, attribute or action. They may display text, icon or both in react native apps.
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.
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.
Inputs are used to take input from user. These can display in form or dialog.
Image is used to display an image from an URL or from local storage.
Linear progress shows the current state of the ongoing task such as loading or downloading.
List Item displays the information about a row. such as in ListView, FlatList. It can contain avatar, icon, image, text and more elements.
The overlay element is used to make a view above another elements. The overlay is looks like a popup.
Pricing is a component that displays the price in a beautiful way in the table format.
Rating element displays the number of stars which shows the feedback from user. These can contains different colors.
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 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 mainly used to connect with social media platforms.
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.
Switches represent the true/false state. These can also be used in ON of OFF conditions.
Tabs loads multiple screens on a single screen.
Text displays characters or string/words at various sizes.
Tiles like cards, are a convenient way to display a related content about a single object.
Tooltip displays informative text when someone tap on element.