Skip to content
Related Articles

Related Articles

Improve Article

React Native Width Prop

  • Last Updated : 28 Apr, 2021

In React Native if we need to set any dimension of a component is by adding a fixed width and height to style, in this article we will set the width of any component using the width props. 

Syntax:

style={{
        width: dimension, height: dimension,
      }} />

There are three types of dimension width as mentioned below:

  1. Fixed Dimensions: All dimensions in React Native are unitless and represent density-independent pixels here only the raw number has to be used.
  2. Flex Dimensions: Here use the flex in component’s style to have to available space, it manipulates itself to capture the space.
  3. Percentage Dimensions: This option need to used when you want that component to fill a certain portion of the screen, but you don’t want to use the flex.

Now let’s start with the implementation:

Step 1: Open your terminal and install expo-cli by the following command.



npm install -g expo-cli

Step 2: Now create a project by the following command.

expo init myapp

Step 3: Now go into your project folder i.e. myapp

cd myapp

Project Structure:

Example:

Javascript




import React from 'react';
import { View } from 'react-native';
  
const WidthCompo= () => {
  
  return (
    <View style={{ height: '100%' }}>
      <View style={{
        width: '15%', height: '15%', backgroundColor: 'yellow'
      }} />
      <View style={{ flex: 3, backgroundColor: 'green' }} />
      <View style={{
        width: 150, height: 150, backgroundColor: 'purple'
      }} />
    </View>
  );
};
  
export default WidthCompo;

Output:

Reference: https://reactnative.dev/docs/height-and-width

My Personal Notes arrow_drop_up
Recommended Articles
Page :