React Native Set View Width and Height in Fixed Dimensions

This tutorial explains how to set the width and height of the views in fixed dimension in react native application. The simplest way to set the dimensions of a component is by adding a fixed width and height to style. All dimensions in React Native are unitless, and represent density-independent pixels.

React Native Fixed Dimensions

Lets see the below example, where we are setting the width and height of the view component in fixed dimension. This Fixed height and width gives the View to a permanent area on screen no matter what screen size is. We can define fixed height using style.

App.js 

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: 50, height: 50, backgroundColor: '#f44336' }} />
        <View style={{ width: 100, height: 100, backgroundColor: '#9c27b0' }} />
        <View style={{ width: 150, height: 150, backgroundColor: '#009688' }} />
        <View style={{ width: 200, height: 200, backgroundColor: '#8bc34a' }} />        
      </View>
    );
  }
}


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

NOTE: 
Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.

Screenshot :

This is all about React Native Set View Width and Height in Fixed Dimensions. 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.