Setting component height to 100% in react-native - react-native

Question

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%?

Answer 1

check out the flexbox doc. in the stylesheet, use:
flex:1,

Answer 2

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'

Answer 3

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>

Answer 4

You can simply add height: '100%' into your item's stylesheet.
it works for me

Answer 5

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,
}

Answer 6

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).

Answer 7

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

Answer 8

<View style={styles.container}>
</View>
const styles = StyleSheet.create({
container: {
flex: 1
}
})

Answer 9

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.

Answer 10

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