A Short Note – How To Control Component Size In React Native ?

Hello Readers, CoolMonkTechie heartily welcomes you in A Short Note Series.

In this note series, we will learn how to control component size in React Native. A component’s height and width determine its size on the screen.

How To Control Component Size In React Native ?

So Let’s begin.


Fixed Dimensions

The general 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.

Height and Width

import React from 'react';
import { View } from 'react-native';

const FixedDimensionsBasics = () => {
    return (
      <View>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
      </View>
    );
};

export default FixedDimensionsBasics;

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

The Preview of the above example is :

Fixed Dimensions Preview
Fixed Dimensions Preview


Flex Dimensions

We use flex in a component’s style to have the component expand and shrink dynamically based on available space. Normally we will use flex: 1, which tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.

A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.

Flex Dimensions

import React from 'react';
import { View } from 'react-native';

const FlexDimensionsBasics = () => {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
};

export default FlexDimensionsBasics;

The Preview of the above example is :

Flex Dimensions Preview
Flex Dimensions Preview


Conclusion

In this note series, We understood how to control component size in React Native. We discussed about Fixed Dimensions and Flex Dimensions to control the component size.

Thanks for reading ! I hope you enjoyed and learned about Fixed Dimensions and Flex Dimensions concepts in React Native. Reading is one thing, but the only way to master it is to do it yourself.

Please follow and subscribe us on this blog and and support us in any way possible. Also like and share the article with others for spread valuable knowledge.

If you have any comments, questions, or think I missed something, feel free to leave them below in the comment box.

Thanks again Reading. HAPPY READING !!😊😊😊

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s