React Native Height and Width

Introduction

React Native is extensively used for mobile application development. Giants like Tesla and Microsoft use it, to name a few. It is essential to maintain the proportion and size of elements for ease of use and visual aesthetics in any application. So, let us dive deeper into how to set the dimensions of a component in React Native, using Height and Width.

Refer to know  about, React Native Paper

Hands-on Examples

Below we will see how we can adjust the size of components using three ways.

Fixed Dimensions

The usual way of setting the dimensions of a component is to set a fixed Height and Width for the component. The size of the component remains fixed and is not influenced by the screen size.

It is important to note that these values are unitless. They represent pixels independent of density.

import React from 'react';

import { View } from 'react-native';



const FixedDimEx = () => {

  return (

    <View>

      <View style={{

        width: 30, height: 30, backgroundColor: 'green'

      }} />

      <View style={{

        width: 60, height: 60, backgroundColor: 'red'

      }} />

      <View style={{

        width: 100, height: 100, backgroundColor: 'yellow'

      }} />

    </View>

  );

};



export default FixedDimEx;

Output

Flex Dimensions

Flex is used to change the size of a component dynamically according to the screen size. 

For example, flex = 1 denotes that the component fills all the available space, and the space is shared equally amongst the components with the same parent.

The higher the flex is, the more space it takes than its siblings.

It is important to note that the dimensions of parents should be greater than 0 for the child component to be visible. The parent should have fixed or flex dimensions. Otherwise, the dimensions of the parents are 0, and the flex child will not be visible.

import React from 'react';

import { View } from 'react-native';



const FlexDimEx = () => {

  return (

    <View style={{ flex: 1 }}>

      <View style={{ flex: 1, backgroundColor: 'red' }} />

      <View style={{ flex: 2, backgroundColor: 'green' }} />

      <View style={{ flex: 3, backgroundColor: 'yellow' }} />

    </View>

  );

};



export default FlexDimEx;

Output

Try removing flex:1 of the parent, and you will see that the child components are no longer visible.

Also see,  React Native Reanimated

Percentage Dimensions

We use Percentage Dimension to fill a particular portion of the screen size. Similar to Flex Dimension, Percentage Dimension also requires a defined parent dimension.

import React from 'react';

import { View } from 'react-native';



const PercentageDimEx = () => {

  return (

    <View style={{ height: '100%' }}>

      <View style={{

        height: '10%', backgroundColor: 'red'

      }} />

      <View style={{

        height: '20%', width: '70%', backgroundColor: 'green'

      }} />

      <View style={{

        width: '30%', height: '20%', backgroundColor: 'yellow'

      }} />

    </View>

  );

};



export default PercentageDimEx;

Output