React Native Width Prop

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:

Output:

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