React Native ScrollView is cut off from the bottom in iOS

In my case the issue wasn't flex: 1 or flexGrow: 1, but using padding on ScrollView styles.

So instead of doing this:

<ScrollView style={{padding: 40}}>
  {/* MY CONTENT HERE */}
</ScrollView>

I did this:

<ScrollView>
  <View style={{padding: 40}}>
    {/* MY CONTENT HERE */}
  </View>
</ScrollView>

And the problem was fixed.

So if you want to add padding to your ScrollView, create a View inside it and apply padding to it instead.

flex:1 to the outer parent

<View> //Parent
 <Header/>
 <ScrollView/>
</View>

if ScrollView is cutting off, assign parent <View> flex:1

<View style={{flex:1}}> //Parent
 <Header/>
 <ScrollView/>
</View>

Problem: Your nav bar is pushing your ScrollView down.

Solution: Make the wrapper fill the entire screen. This change in line 8 does the magic: <View style={StyleSheet.absoluteFill}>

I also changed your code minimally to make it useful for people who don't have your image and to better see what's happening I named the values differently. Here's the working version: https://repl.it/Iqcx/2