/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

0 vote386 views1 answer
Login condition if and else in router dom of react jsx
Javascript React
1 vote336 views1 answer
React waypoint loadmore not working
Javascript React
0 vote302 views1 answer
React-native eject not working
Javascript React
4 votes309 views1 answer
Import react icons module
Javascript React
32 votes292 views1 answer
How to use routes in react js
Javascript React
0 vote324 views1 answer
How to change grid size with conditional expression in react
Javascript React
1 vote321 views5 answers
React state
Javascript React
1 vote322 views1 answer
Div onchange react
Javascript React
1 vote325 views1 answer
Add value to state array react native dispatch
Javascript React
0 vote324 views1 answer
React native filter list
Javascript React