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.
Suggestions:
React Native Interview Questions – Top 25 Will Complete Solutions
React Native Geolocation FlutterTPoint
Lottie In React Native With Example
React Native Paper With Examples
Modal In React Native Examples
React Native TextInput With Examples
React Native Button With Complete Examples And Code
React Native Elements With Examples
React Native WebView With Examples
Async Storage React Native Example
