Basic components in React Native

Updated 6 March 2021

Save

React Native allow us to create mobile apps with the help of JavaScript which is supportable for android and ios platform. It save development time as we can code once and our app is available for both platform.
React native uses native components instead of web components.Component is the basic building block of any application.
In this post we are going to study some basic component of React Native.

Below are the basic component of react native we are going to study.
1. View
2. Text
3. Image
4. TextInput
5. ScrollView

  1. View :

In React native View is a container and most fundamental component. View is just like a <div> element in html.
It can have nested views inside it and can also have 0 to many children of any type.

Let’s take an example of view.

2. Text:
Text is the component to display text on page. It wrap the text of the page.
The component  <text> is similar to <p/> tag in html.
We can set any style on text with the help of style prop.

Example of Text component :

 

3. Image:
In react native we can show image from resources like local disc, network images,static resources, temporary local files. It use to display image on app page.

Image component is similar to <img/> tag in html.

We can use background image to any page by using BackgoundImage component and put any child inside it like text, image etc.

 

 

5. Text Input:

Taking input from user is most import part of any application. In React native we can achieve this by using Text input component.
This is similar to <input> tag in html.
We can use onChangeText to detect the change in input.There are also other events, such as onSubmitEditing and onFocus that can also be used.

 

5. Scroll View :

As we all aware from scroll View, it provide functionality to scroll multiple child and view to scroll.
Basically scroll view provides scrolling boundaries to nested child and views on our page.
In react native it behave as a container to wrap our nested view inside it.
We can set scrolling direction as horizontal and vertical. By default scroll View direction is Vertical and we can set it to horizontal by using prop horizontal: true.

 

Conclusion:
In this post you have learn about some basic component of react native.

Thanks for reading.

author
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Start a Project


    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home