How do I stretch scrollview to whole screen in react native?

Question

I have this code

render() {
  return (
    <View style={styles.container}>
      <TopMenu />
      <ScrollView style={styles.scrollView}>
        {array_with_two_items.map(this.createRow)}
      </ScrollView>
    </View>
  )
}

with styles

scrollView: {
  flex:1,
  marginBottom:0,
},
containter: {
  flex:1,
},

and the problem is that it looks like this

+-----------+
|    MENU   |
+-----------+
|   item1   |
+-----------+
|   item2   |
+-----------+
|           |
|   blank   |
|    not    |
| scrollable|
+-----------+

but I want it to look like

+-----------+
|    MENU   |
+-----------+
|   item1   |
+-----------+
|   item2   |
+-----------+
| blank,but |
|   still   |
|  part of  |
| scrollview|
+-----------+

I have little experience with styling and flexbox so that's why I'm asking. (Menu is not supposed to be a part of scrollview)

Answer 1

I think what you want here is flexGrow - flexGrow documentation

<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
  
</ScrollView>