Dimensional Measurements of Height and Width in React Native

It is common to set the dimension of a component with a fixed size that remains the same regardless of screen dimensions. This is because we base the size on the width of the device, so if the device has a different size, the component’s size will also vary.

The size of a component on the screen is determined by its height and width, which can be set in two different ways: fixed dimensions and flex dimensions.

Fixed Dimensions

The easiest way to establish the size of the component is by using fixed height and width in the style. The dimensions of the
React Native
component are expressed in density-independent pixels and are unit-less.

Setting the size of a component to a fixed dimension is a common practice, wherein the component remains the same size irrespective of the screen dimensions.

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

export default class HeightWidth extends Component {
    render() {
        return (
            
                
                
                
            
        );
    }
}
const styles = StyleSheet.create({
    powderblue:{
        width: 100, height: 100, backgroundColor: 'powderblue'
    },
    skyblue:{
        width: 200, height: 200, backgroundColor: 'skyblue'
    },
    steelblue:{
        height: 300, backgroundColor: 'steelblue'
    },
})


Output


React Native Height and Width

Flex Dimensions

The flex property is used to dynamically expand and shrink a component based on the available space. By setting flex: 1, the component will fill all the available space and be shared evenly with other components of the same parent. The higher the flex value, the more space the component will occupy compared to its siblings.

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

export default class HeightWidth extends Component {
    render() {
        return (
            
                
                
                
            
        );
    }
}
const styles = StyleSheet.create({
    container:{
      flex:1
    },
    powderblue:{
        flex:1,
        backgroundColor: 'powderblue',
    },
    skyblue:{
        flex:2,
        backgroundColor: 'skyblue',
    },
    steelblue:{
        flex:3,
        backgroundColor: 'steelblue',
    },
})


Output

React Native Height and Width


Frequently Asked Questions