Setting component height to 100% in 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

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 2

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 3

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

Answer 4

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

flex:1,

Answer 5

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

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

Answer 6

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'