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%
?
11 Answers
check out the flexbox doc. in the stylesheet, use:
flex:1,
-
5
-
-
Sorry — 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.– fatuhokuJul 10, 2015 at 18:41 -
Problem is this also centers elements inside that would otherwise be positioned to the top of the screen...– Some GuyAug 11, 2015 at 21:12
-
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'
-
height: "100vh" generate critical error in react-native that's why use Dimensions.get("window").height– zloctbAug 29, 2020 at 7:26
-
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>
-
2I was unaware of
contentContainerStyle
. This fixed the issue for me :-) Aug 23, 2021 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. Apr 28, 2022 at 20:28
You can simply add height: '100%'
into your item's stylesheet.
it works for me
-
what version your project is running? I'm using 49.3 and it still works well Dec 1, 2017 at 16:03
-
2Not sure why this is being down-voted. Works perfectly on my machine (tm)– AndrioidDec 5, 2017 at 10:34
-
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: github.com/facebook/react-native/blob/… 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.– AndrioidDec 15, 2017 at 9:24
-
1This was added here, and is tagged as 0.51: github.com/facebook/react-native/commit/… So, with November release of React Native, this is supported.– AndrioidDec 18, 2017 at 12:02
-
1Updated documentation: facebook.github.io/react-native/docs/layout-props.html#width– AndrioidJan 26, 2018 at 9:41
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 Jul 19, 2020 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).
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
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
<View style={styles.container}>
</View>
const styles = StyleSheet.create({
container: {
flex: 1
}
})
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.
I would say
<View
style={{
...StyleSheet.absoluteFillObject,
}}></View>
In this way, you can fill the entire screen without caring about, flex, width, or height