React Native ScrollView is cut off from the bottom on iOS

Question

I've just encountered a weird issue that I didn't know why it was happening. For some reason, I can't scroll to the bottom of my <ScrollView>.

Here's my code: https://repl.it/Iqcx/0

Thanks!

Answer 1

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.

Answer 2

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>