react-native: OnEndReached for Flatlist not working in scrollview

Question

I'm new on ReactNative development and I'm developing my first application. I'm trying to use OnEndReached in a flat list which is in a scrollview tab. I use this scrollview because I have 3 flat lists in my application.

The first two are horizontal. For the last one, I need to handle the pagination with the onEndReached. But, When I put this last flat list in the scroll view, it doesn't work at all without any issues.

When I put it out of the scrollview, it works correctly. So I assume the issue is related to that.

Do you know how I can manage this issue? I'm sorry if this question is a basic one :(

Answer 1

OnEndReached doesn't call if the parent has ScrollView. Why not put those top views in the Header?

<FlatList
 data={data}
 renderItem={}
 keyExtractor={(item, index) => item.personId}
  onEndReached={() => {
  console.log(" On End Reached");
 }}
 onEndReachedThreshold={0.01}
 ListHeaderComponent={() => (
  <View>
   <FlatList/>
   <FlatList/>
 </View>
 ))
/>