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:
- 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
Contact Us