Setting component height to 100% in react-native

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

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

flex:1,

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'

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

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>

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

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

<View style={styles.container}> 
</View>

const styles = StyleSheet.create({
    container: {
        flex: 1
    }
})

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: https://stackoverflow.com/questions/34880660/react-native-children-of-scrollview-wont-fill-full-height#answer-56183419