Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Hands-on Examples
2.1.
Fixed Dimensions
2.2.
Flex Dimensions
2.3.
Percentage Dimensions
3.
Frequently Asked Questions
3.1.
What is the unit of fixed component dimensions in React Native?
3.2.
How to set dynamic dimensions in React Native?
3.3.
Can we set Flex Dimensions without parent dimensions in React Native?
3.4.
Can we set fixed dimensions to a component regardless of screen size?
3.5.
How to set the size of a component as double of another component in React Native?
4.
Conclusion
Last Updated: Mar 27, 2024

React Native Height and Width

Author Prakriti
0 upvote
Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

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

 

 

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Frequently Asked Questions

What is the unit of fixed component dimensions in React Native?

Fixed component dimensions are unitless.

How to set dynamic dimensions in React Native?

In React Native, we can use Flex or Percentage Dimensions for dynamic dimensions.

Can we set Flex Dimensions without parent dimensions in React Native?

No, we cannot set Flex Dimensions without knowing the parent dimensions.

Can we set fixed dimensions to a component regardless of screen size?

Yes, you can set fixed dimensions.

How to set the size of a component as double of another component in React Native?

You can use Flex Dimension to set the component size as double the size.

Conclusion

This article discussed the setting of dimensions of a component in React Native, using Height and Width in three different ways - Fixed Dimensions, Flex Dimensions, and Percentage Dimensions.

Hoping this blog has helped you enhance your knowledge regarding Height and Width in React Native. To learn more about React Native, view our React Native course, curated by experts.

Check out our fantastic interview preparation course for your dream companies and a complete preparation guide.

Upvote our blog to help other ninjas grow! 

Happy Learning!!

Live masterclass