CODEWITHSUNDEEP
react-nativepaginationreact-native-flatlistreact-native-scrollview
iReact
iReact

Reputation: 155

React native - Paginated SectionList inside ScrollView

My screen layout is SectionList inside a View and on onEndReached I am calling an API to get paginated data successfully (LoadMore behaviour).

As, SectionList is covering only 40% part of screen, I tried adding ScrollView so that complete screen becomes scrollable.

Problem: When the screen loads it fetches the initial paginated data. After rendering the UI, onEndReached event gets fired which in-turn calls api to get load more data again. This runs in loop until the complete data is fetched.

Has anyone faced the same issue. Any solution how to stop that.

Upvotes: 4

Views: 2972

Answers (1)

JiteshW
JiteshW

Reputation: 2205

Instead of adding a SectionList inside ScrollView, What you can do is by adding your above view (i.e. your other 60% area) as header of the SectionList. This way your entire screen will be treated as SectionList, and onEndReached will only gets called when user performs scroll.

Upvotes: 5

Related Questions