I can give the height element of style numeric values such as 40
but these are required to be integers. How can I make my component to have a height of 100%
?

- 5,909
- 9
- 33
- 40
11 Answers
check out the flexbox doc. in the stylesheet, use:
flex:1,

- 2,570
- 1
- 22
- 29
-
5This actually sets both height and width to 100%. Set only height? – fatuhoku Jul 10 '15 at 14:49
-
have you set `flex-direction`? – wangii Jul 10 '15 at 17:59
-
1Sorry — I don't know what exactly I've changed but it appears to be working as I want it now. I was using the `flex` option to grow the element. – fatuhoku Jul 10 '15 at 18:41
-
Problem is this also centers elements inside that would otherwise be positioned to the top of the screen... – Some Guy Aug 11 '15 at 21:12
-
This solution works for mobile devices, but does not work on the web. Please see my solution [here](https://stackoverflow.com/a/65719668/385619) – Willster Jun 16 '22 at 13:19
Grab the window height into a variable, then assign it as the height of the flex container you want to target :
let ScreenHeight = Dimensions.get("window").height;
In your styles :
var Styles = StyleSheet.create({ ... height: ScreenHeight });
Note that you have to import Dimensions before using it:
import { ... Dimensions } from 'react-native'

- 799
- 5
- 8
-
height: "100vh" generate critical error in react-native that's why use Dimensions.get("window").height – zloctb Aug 29 '20 at 07:26
-
Tracking the window height via the Dimensions API is a bit cumbersome, and actually sometimes inaccurate on some mobile devices. I have a solution that can work across mobile and web, that makes use of '100vh' see [here](https://stackoverflow.com/a/65719668/385619) – Willster Jun 16 '22 at 13:21
flex:1
should work for almost any case. However, remember that for ScrollView
, it's contentContainerStyle
that controls the height of view:
WRONG
const styles = StyleSheet.create({
outer: {
flex: 1,
},
inner: {
flex: 1
}
});
<ScrollView style={styles.outer}>
<View style={styles.inner}>
</View>
</ScrollView>
CORRECT
const styles = StyleSheet.create({
outer: {
flex: 1,
},
inner: {
flex: 1
}
});
<ScrollView contentContainerStyle={styles.outer}>
<View style={styles.inner}>
</View>
</ScrollView>

- 7,659
- 5
- 40
- 78
-
3I was unaware of `contentContainerStyle`. This fixed the issue for me :-) – oldo.nicho Aug 23 '21 at 20:47
-
Should this work with `react-native-web` ? Like I'm developing it with Web interface, with NextJS, but Styles conversion are not 100% same, I have to separate some. But I don't know in this case. – KeitelDOG Apr 28 '22 at 20:28
You can simply add height: '100%'
into your item's stylesheet.
it works for me

- 483
- 5
- 3
-
what version your project is running? I'm using 49.3 and it still works well – Umino San Dec 01 '17 at 16:03
-
3Not sure why this is being down-voted. Works perfectly on my machine (tm) – Andrioid Dec 05 '17 at 10:34
-
@UminoSan @Andrioid please see the other answers below. Percentage doesn't work in React Native (perhaps you're talking about React for web?). You can set it in your style sheet without throwing an error, but `flex` and explicit number values are the only valid ways of setting height and width. https://facebook.github.io/react-native/docs/height-and-width.html . I downvoted because your answer is wrong and should be removed. Please include a link to documentation in your answer if I'm mistaken. – Southerneer Dec 14 '17 at 23:43
-
5@Southerneer The answer isn't wrong. This works, and I work with RN on a daily basis using both iOS and Android. Look at this snippet from the RN repo, for example: https://github.com/facebook/react-native/blob/9f33fe258312987f490cc0f3a71c0c4f93494e7f/Libraries/ReactNative/YellowBox.js It uses height and width in percentages. I can't say why this isn't documented, but it works. I use flex as much as possible, but flex and Dimensions isn't always applicable when you want relative size. – Andrioid Dec 15 '17 at 09:24
-
I'll note that this didn't work when I started using React-Native. If this is unintended or simply not documented, I don't know. I've raised the question here: https://github.com/facebook/react-native/issues/364 – Andrioid Dec 15 '17 at 09:31
-
Interesting. I've only ever seen recommendations for using flexbox so while this answer may work now, it could very well be unsupported and break in future versions. Very interested to see how a react-native repo maintainer responds to your question @Andrioid – Southerneer Dec 15 '17 at 20:32
-
1This was added here, and is tagged as 0.51: https://github.com/facebook/react-native/commit/3f49e743bea730907066677c7cbfbb1260677d11 So, with November release of React Native, this is supported. – Andrioid Dec 18 '17 at 12:02
-
1Updated documentation: https://facebook.github.io/react-native/docs/layout-props.html#width – Andrioid Jan 26 '18 at 09:41
-
Currently working link to docs saying that % are supported is [https://reactnative.dev/docs/height-and-width#percentage-dimensions](https://reactnative.dev/docs/height-and-width#percentage-dimensions) – Andis Kacerovskis Nov 01 '21 at 16:48
-
When I do this the view overflows off screen. When I try to `justifyContent: 'center'` it puts the content at the bottom, if I `justifyContent: 'flex-end'` it puts the content way off screen – KylianMbappe Mar 27 '22 at 20:48
most of the time should be using flexGrow: 1
or flex: 1
or you can use
import { Dimensions } from 'react-native';
const { Height } = Dimensions.get('window');
styleSheet({
classA: {
height: Height - 40,
},
});
if none of them work for you try it:
container: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
}
-
1You have error here: const { Height } = Dimensions.get('window'), use height (small letter) to extract data – user2220199 Jul 19 '20 at 14:36
Try this:
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'skyblue'}} />
</View>
You can have more help in react-native online documentation (https://facebook.github.io/react-native/docs/height-and-width).

- 21,634
- 7
- 38
- 62

- 159
- 1
- 8
I was using a ScrollView, so none of these solutions solved my problem. Until I tried contentContainerStyle={{flexGrow: 1}}
prop on my scrollview. Seems like without it -scrollviews will just always be as tall as their content.
My solution was found here: React native, children of ScrollView wont fill full height

- 1,960
- 1
- 22
- 33
None of the solutions worked for me. What I did was this:
<SafeAreaView style={{height: '100%'}} >
<ScrollView style={{height: '100%'}}>
<View style={{height: '100%'}}>
// your content here

- 11
- 7
I looked at lots of these solutions, and none worked across React Native mobile and web.
Tracking the screen height using Dimensions API is one way that does work, but this can be innacurate on some mobile devices. The best solution I found was to use this on your element:
<View style={{ height:Platform.OS === 'web' ? '100vh' : '100%' }}
/* ... your application */
</View>
Please also note the caveat with ScrollView as mentioned here.

- 2,526
- 1
- 32
- 32
I would say
<View
style={{
...StyleSheet.absoluteFillObject,
}}></View>
In this way, you can fill the entire screen without caring about, flex, width, or height

- 923
- 2
- 7
- 32