ReactNative ScrollView will not scroll to the bottom

Question

If I try to scroll to the bottom of my ScrollView, it bounces back to its default position and won't let me view the entirety of its content.

My ( truncated ) setup is fairly simple :

  <View>
    <View>
      <ABunchOfStuff />
    </View>   
    <View style={styles.sectionNode} >
      <ABunchOfStuff />
    </View>   
    <ScrollView>    <------ My broken ScrollView :(
      <View>
        <ABunchOfStuff />
      </View>
    </ScrollView>   
  </View>

This is a simplified version of my actual code. But I'm reaching the conclusion that there's some kind of "unbounded height" going on as in this reference.

I did try making sure everything and all parents have flex: 1 all the way to the child <View> of my <ScrollView> and up to its parents. But that didn't seem to do the trick.

Any idea on how to debug this? I know ReactNative's website recommends this and says it would be easy to do in the inspector ( but with no instructions on how to do it ). If my assumption that there's an "unbounded height" issue, how would one go about and find this rascal unbounded node? Or is it something else?

Answer 1

For me the problem was setting a paddingVertical, paddingTop or paddingBottom on the ScrollView. Just don't do that. it influences the height of the content of the ScrollView, without the ScrollView adjusting to it appropriately.

Answer 2

This worked for me:

<View style={{flex: 1}}>
   <ScrollView>
      <View style={{paddingTop: 16, paddingBottom: 16}}>
         <SearchBar />
         <ItemsContainer />
      </View>
   </ScrollView>
</View>