In this React Native tutorial we are going to learn How to Create View Component in React Native,  there are different built in components in React Native that you can use, React Native provides a number of built in core components that you can directly use them in your applications, as an example we can use View, Button, Text and etc. so View is a type of built in component in React Native. the View component, simply put, is a container element that supports layout with flexbox, styling via CSS, some general touch handling, and accessibility controls. As such, View components come in many forms, but a basic usage might be as follows:

 

This creates on the screen a red box 200 pixels wide and 100 pixels high, also in here we have used inline styles for the view component.

 

 

 

So first we want to create our React Native Project we are going to use Expo Cli.

 

First install expo cli.

 

 

After that create your React Native Project with Expo CLI. you can give the name of your project as you want.

 

 

• Connect Genymotion Emulator with React Native
• Styling Text in React Native 

 

 

After creating of the React Native Project, now open your App.js file and create a View component. make sure that you have imported the View component from React Native. and add this code in your App.js file.

 

In the above code we have created three View component, also you can give background color, height, width and padding for a view.

 

 

 

This is the complete code for App.js.

 

 

 

Now change directory to your created project and run your project.

 

 

After that run your application from metro bundler, make sure that you have started your virtual emulator.