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 (

      <View style={mystyle.container}>

        <View style={mystyle.header}>

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

        </View>

        <View style={mystyle.body}>

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

        </View>

      </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

 

 


Subscribe For Daily Updates