/Javascript/React/Width 100% react-native

Width 100% react-native

Width 100% react native

import { Dimensions } from 'react-native';

width: ${(Dimensions.get('window').width)}px;

How to take 100% width in react native

header : {
	height : 100,
  	backgroundColor: "favorite color",
    alignSelf: "stretch",
}

Width 100% react-native

First, define Dimensions.

import { Dimensions } from "react-native";

var width = Dimensions.get('window').width; //full width
var height = Dimensions.get('window').height; //full height

then, change line1 style like below:

line1: {
    backgroundColor: '#FDD7E4',
    width: width,
},

Similar codes

27 votes304 views6 answers
React usestate
Javascript React
0 vote322 views1 answer
Await zoomus.joinmeeting crashing app react native
Javascript React
0 vote282 views5 answers
React buttons npm
Javascript React
0 vote356 views1 answer
React-native-bouncy-checkbox
Javascript React
0 vote356 views1 answer
Matched leaf route at location "/" does not have an element. react
Javascript React
0 vote309 views1 answer
CocoaPods could not find compatible versions for pod "React/Core": In Podfile: react-native-fetch-blob (from `../node_modules/react-native-fetch-blob`) was resolved to 0.10.6, which depends on React/Cor
Javascript React
0 vote351 views1 answer
How To Set Opacity of a View In React Native
Javascript React
0 vote343 views1 answer
Custom react native product rating
Javascript React
0 vote334 views1 answer
Reactjs clic copy
Javascript React
1 vote296 views1 answer
Add class to react children
Javascript React