Introduction of 12 Basic React Native Components

Introduction

Introduction of 12 Basic React Native Components includes the overview and basic understanding of React Native basic components.

As we all know React Native is a component-based JS framework therefore whatever you make in Rect Native will become a component for others. Components are always required by the app developers to sketch his/her imagination on the canvas and React Native has many components to work with. In this post, we will see the basic components which are provided by the default React Native Library.

We will go through each component one by one. As we are exploring all the components one by one so this post will be divided into the number of posts. If you have any suggestion please share your suggestions here.

View

View is like a container view. (Ex. Linear Layout, Relative Layout, etc) for mobile developers and for web developers it is like <div>.

Text

Text is like TextView/Label for mobile developers and for web developers, it is like <p>.

State

State in React Native is like binding the value of any variable with any component, which will change when we change the value using setState. For example, if we made a state variable called varx and showing the value of varx in text view it will show the default value of varx but any time when we change the value of varx it will update automatically and will show the new value of varx (Same as ng-modal in Angular). Initialize state in the constructor, and then call setState when we want to change it.

Props

React Native components have some props which are helpful to customize the component. For example placeholder, Value, Style, etc. These are props.

The state is mutable while props are immutable. This means that state can be updated in the future while props cannot be updated.

StyleSheet

A stylesheet is like CSS to design and make your UI look like you want.

TextInput

TextInput is like EditText/UITextfield for mobile developers and for web developers it is like <input type=”text”>.

Image

An image is like ImageView for mobile developers and for web developers, it is like <img>.

ScrollView

ScrollView is like a normal ScrollView for mobile developers.

Button

A Button is like a normal Button for mobile developers and for web developers, it is like <button>.

Picker

Picker is like a Spinner/Dropdown for mobile developers and for web developers, it is like <Select>.

Switch

Activity Indicator

Activity Indicator is like a ProgressBar/Loader with for mobile developers and for web developers, it is like Loader.

If you have any doubts or you want to share something about the topic you can comment below or contact us here.

Hope you liked it. 🙂