How to have a React FlatList inside a ScrollView without breaking onEndReached

Question

I made an infinite scroll using FlatList, and it works perfectly on its own. When I add it to a bottom-drawer (based off of this) the "onEndReached" starts acting crazy - it will hit 10x suddenly, then scrolling to the end of the list won't trigger it anymore. It seems to me that the Gesture Handler or the Animated.ScrollView are breaking the scroll for the flatlist. Can I keep the bottom drawer somehow?

Update: Using this bottom drawer fixes the issue, but we lose the ability to drag the drawer down up/down to open/close, it needs a button instead. This is clearly an issue around ScrollView and FlatList. I'd love to know how/why this works rather than just a bandaid solution of "I swapped in another part that seems to work. Not sure why... but it works"

Answer 1

You can set the Scrollview props style and contentContainerStyle. This will prevent onEndReached from infinitely triggering.

For example:

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

See this github issue for a discussion on the matter.