React Native - View

View is the most common element in React Native. We can consider it as an equivalent of the div element used in web development.

Use Cases

When we need to wrap our elements inside the container, we can use View as a container element.
When we want to nest more elements inside the parent element, both parent and child can be View. It can have as many children as you want.
When we want to style different elements, we can place them inside View since it supports style property, flexbox etc.
View also supports synthetic touch events, which can be useful for different purposes.

Lets check Example

import React from 'react';

import {StyleSheet, View, Text} from 'react-native';

import {Component} from 'react';

export default class Views extends Component {

render() {

return (

<Text style={mystyle.boldText}>Header</Text>

</View>

<Text style={mystyle.text}>Hello, World!</Text>

</View>

);

}

const mystyle = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#FAFAFA',

alignItems: 'center',

alignContent: 'center',

header: {

backgroundColor: 'green',

width: '100%',

alignContent: 'center',

alignItems: 'center',

padding: 20,

boldText: {

fontWeight: 'bold',

color: 'white',

fontSize: 20,

text: {

fontWeight: 'normal',

color: 'red',

fontSize: 20,

body: {

width: '100%',

flex: 1,

backgroundColor: 'yellow',

padding: 20,

});

Output