React Native Set View Width and Height in Percentage Format

This tutorial explains how to set view width and height in percentage format in react native application. In our last post we have discussed about react native set view width and height in fixed dimensions and React Native Set View Width And Height In Percentage Flex Dimensions. I think this may help you to build more understanding on responsive view design and layout design in react native application. Also similarly React native components did support the percentage(%) format like web application.It will automatically determine the Parent component height width and according to that it will set children view height width in both android and iOS react native applications.

React Native Width and Height in Percentage Format 

Lets see the below example, where we are creating a parent view with flex :1 and setting the width and height in percentage format in react native application.

Step-1: First create the new reactive project.

Step-2: Open App.js File  in your favorite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.

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

Step-4: Open App.js component and  and Implement render method. The render method returns multiple View component wrapped by root View component. Here we are setting the width and height of child view component in percentage format.

render() {

    return (
      <View style={styles.container}>
        <View style={{ width: '100%',height: '20%', backgroundColor: '#f44336' }} />
        <View style={{ width: '90%', height: '20%', backgroundColor: '#9c27b0' }} />
        <View style={{ width: '80%', height: '20%', backgroundColor: '#009688' }} />
        <View style={{ width: '70%', height: '20%', backgroundColor: '#8bc34a' }} />        
      </View>
    );
  }

Step-5 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

});

Complete Source Code for App.js 

Lets see the complete source code that helps to set the width and height of View component in react native application.

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

export default class App extends Component {

  render() {

    return (
      <View style={styles.container}>
        <View style={{ width: '100%',height: '20%', backgroundColor: '#f44336' }} />
        <View style={{ width: '90%', height: '20%', backgroundColor: '#9c27b0' }} />
        <View style={{ width: '80%', height: '20%', backgroundColor: '#009688' }} />
        <View style={{ width: '70%', height: '20%', backgroundColor: '#8bc34a' }} />        
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

});

Screenshot : 

This is all about React Native Set View Width and Height in Percentage Format. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.