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:
- Fixed Dimensions: All dimensions in React Native are unitless and represent density-independent pixels here only the raw number has to be used.
- Flex Dimensions: Here use the flex in component’s style to have to available space, it manipulates itself to capture the space.
- 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
Share your thoughts in the comments
Please Login to comment...