/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 vote217 views1 answer
React-datepicker
Javascript React
2 votes286 views4 answers
Discord js remove reaction from user
Javascript React
0 vote216 views1 answer
React native fade in fade out animation
Javascript React
1 vote244 views3 answers
[PrivateRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
Javascript React
2 votes236 views1 answer
React check if focused
Javascript React
1 vote238 views1 answer
Detect touch react
Javascript React
0 vote225 views1 answer
Upload image file in react native using rest api to website
Javascript React
0 vote236 views1 answer
React hook form submit outside form
Javascript React
0 vote260 views1 answer
Scrollbar automatically scroll down as new divs are added reactjs
Javascript React
33 votes250 views2 answers
UseRef react ref
Javascript React