React Native Elements (RNE) are considered as a part of a cross-platform UI Toolkit. These elements can be now used on the web and you can share your codebase amongst your React Native as well as React web apps. The components of react-native elements are perfectly rendered on the browser. You can use these components to target Android, iOS, and Web after collaborating with React Native for Web and RNE.

The goal of the react-native elements is to present a comprehensive UI kit for the creation of apps in react native. In open-source, there are several outstanding UI components made by developers. Moreover, react-native elements simplify the process of assembling React these packages by providing you with a ready-made kit with reliable API, look and feel.

If you intend to Learn Reactjs Step By Step, you cannot ignore components of react-native elements. The reason is the react learning path focuses on describing these components and their usefulness.

Components included:

• Avatar

• Badge

• Button

• ButtonGroup

• BottomSheet

• CheckBox

• Card

• Divider

• FAB

• Header

• HTML style headings

• Icon 

• Image

• Input

• ListItem

• Overlay

• Linear Progress

• Rating

• Pricing

• SearchBar

• Social Icons/ Social Icon Buttons

• Slider

• Switch

• Speed Dial

• Tab

• TabView

• Tile

• Tooltip

Avatar:

Throughout the UI design, Avatars are prevalent. Right from the lists to profile screens, you can find them all over the UI design. These components are typically used to depict a user. They can contain icons, photos, or text.

Common types of Avatar are:

• Standard

• Title

• Icon

• Standard with accessory

Badge:

Badges are tiny components widely used for communicating a numeric value or depicting the status of a particular item to the user.

One of the most prevalent types of the badge is the mini badge. It comes into the picture when no value prop is given. Moreover, it is highly effective for representing statuses. As seen from the above figure, the particular color shows a particular badge.

Button:

Buttons are renowned for increasing the interaction with the screen. They are touchable elements that may display icons, text, or both. They can be styled with various props to appear uniquely.

ButtonGroup:

ButtonGroup is considered as a linear set of sections. Each ButtonGroup works as a button that can demonstrate a unique view. You can use a ButtonGroup to provide choices that are closely connected yet mutually exclusive.

Bottom Sheet:

A Bottom Sheet can be considered as an overlay modal that showcases content from the bottom part of the screen.

CheckBox:

CheckBoxes enables the users to accomplish tasks that let them make choices. The choices can be selecting the options or switching the settings on/off. Furthermore, it offers a clear visual of choice whether true or false. Whichever React training option you pick, it is great if you hold knowledge of these components.

Card:

Cards serve excellent way to showcase information. They typically comprise content and actions regarding a single subject. Besides, cards can include text, buttons, images, and more.

Divider:

When it comes to visually separating the content, the dividers are used. You can use a divider when you wish to make a distinction among various sections of content.

Floating Action Button (FAB):

A floating action button (FAB) carries out the primary or most familiar action across a screen. This component is present at the front of all screen content. Usually, it is available in a circular shape along with an icon at its center.

Header:

Headers are simply the navigation components that show information as well as actions related to the existing screen.

As shown in the figure above, the header is ‘My History’ and it has a menu beside to prompt you with corresponding actions.

Some of the typical usages of headers are as follows:

• Header with default components

• Header with custom components passed in through props

• Header with custom components passed in as children

• Left aligned center component

• Header with mixed components

• Header customisability

• Component precedence

HTML style headings (Text):

The text showcases characters and words of different sizes. A simple example of HTML style headings can be seen in React tutorial where each text is clearly recognized.

Icon:

If you want to visually indicate or describe intent or action then icons are the best choices.

The icon sets in the React Native Elements are accomplished through the react-native-vector-icons.

The list of available icon sets in React Native Elements are:

• antdesign

• evilicon

• entypo

• font-awesome

• font-awesome-5

• feather

• fontisto

• foundation

• material

• material-community

• ionicon

• octicon

• simple-line-icon

• zocial

Image:

Images are the drop-in replacements for the standard React Native Image component. They showcase images along with a placeholder as well as smooth image transitioning.

Input:

Presented like forms or dialogs, these components enable users to enter text into a UI. 

ListItem:

When it comes to displaying rows of information, ListItem is the suitable component. They display rows of information like menu, playlist, or contact list. They are extremely customizable and can comprise icons, badges, avatars, switches, and more.

The above figure shows a list of menus that will display you a drop-down list when you hover your mouse on each of them.

Overlay:

The Overlay is a view that floats over the content of an app. Generally, Overlays are simple approaches to notify or request details from the user.

Linear Progress:

These components depict the status of continuing processes to the users. They use progress indicators for displaying the status of progress. They indicate statuses like form submission, app loading, saving updates, etc. Furthermore, they express an app’s state and represent available actions like whether a user can browse away from the current screen.

Rating:

Ratings are useful to gather quantifiable feedback from the users. The clear images along with rating indications boost the user interaction. When you prepare for the React Interview Questions and Answers, the knowledge of such components is a must.

Pricing:

Displaying features and costs, these components provide so much convenience to the user. The appealingly display pricing information.

For example, the above figure shows the pricing component. It mentions the cost as well as features provided in the particular package.

SearchBar:

SearchBars are useful to either filter or search items. You can use a SearchBar whenever the number of items directly influences a user's capability to find one out of them.

Types of search bars are:

• Default SearchBar:

• Platform-specific SearchBar (iOS and Android)

SocialIcon:

SocialIcons are visual indications to online as well as social media networks.

Slider:

With this component, you can conveniently choose a value from the provided set of options. Moreover, this component is considered as a forked implementation of react-native-slider.

Switch:

It indicates whether a particular state is on/off. When the need arises to indicate the decision of the user, this component is used. Basically, a switch is a controlled component that needs an onValueChange to refresh the value prop and it renders a boolean value. Through the Switch Button, React native elements serve you with an extra theme as well as color support.

Speed Dial:

When Speed Dial is pressed, a floating action button can show 3 to 6 actions as speed dial. If you require more than 6 actions, you can use something else than a FAB. When pressed, the FAB stays visible and generates a stack of corresponding actions. In this state, if the FAB is tapped, it must either start its default action or shut down the speed dial actions.

Tabs:

Tabs neatly arrange content across various screens, data sets, and a few other interactions. The following diagram shows how the content of ‘recent’, favorite’, and ‘cart’ options are neatly arranged.

TabView:

The list of Props available in this component are:

• value

• onChange

• animationConfig

• animationType

Tile:

Just like cards, Tiles serve easy way to showcase relevant content regarding a single subject.

Various ways in which tiles are used are:

• Featured Tile

• Featured Tile with Icon

• Tile with Icon

Tooltip:

Tooltips show informative text whenever users tap over an element.

Other new native components

Apart from the above given native component, some of the new components have been also added which are given below.

1. AirbnbRating: New component which is used to add an Airbnb rating layout with two variants which are TapRating and SwipeRating
2. Chip: The chip component is useful to show the elements that may include text, input, icon, and other elements and it can be used by combining text and icons accordingly
3. Text: It is a basic component that is used to show the text with the variant of the sizes according to the viewport of the device

Also, Read- 

1. Various methods in async storage react native

2. Things you need to know about react-navigation

3. Core Components and Native Components

Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.

GET TEST NOW