Skip to content
Related Articles
Open in App
Not now

Related Articles

React Native Width Prop

Improve Article
Save Article
  • Last Updated : 28 Apr, 2021
Improve Article
Save Article

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. 


        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:



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'
      }} />
export default WidthCompo;



My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!