In this React Native article we are going to talk about View Component in React Native, so in React Native we have different built in components that we can use, for example we have View, Text, Button and many more, in this article we want to talk about React Native View Component. in react you will use view component a lot more. View Component in react native is like container, so if you are familiar with the web development, we can say that it is like div.
So first we want to create our React Native Project we are going to use Expo Cli.
First install expo cli.
|
1 |
npm install -g expo-cli |
After that create your React Native Project with Expo CLI. you can give the name of your project as you want.
|
1 |
expo init AwesomeProject |
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.
|
1 2 3 4 |
<View style={{ flexDirection : "row", height : 200, padding: 20 }}> <View style={{ backgroundColor : "green", flex : 0.5}} /> <View style={{ backgroundColor : "red", flex : 0.5}} /> </View> |
You can see 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.
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; import { View } from 'react-native'; export default function App() { return ( <View style={{ flexDirection : "row", height : 200, padding: 20 }}> <View style={{ backgroundColor : "green", flex : 0.5}} /> <View style={{ backgroundColor : "red", flex : 0.5}} /> </View> ); } |
Now run the code and this will be the result.
