Building a react native app, I'm using Firebase as a backend service.

// The latest version of react-native-firebase

I used firestore and his tools (startAfter, endBefore and limit) to build a simple pagination for a large collection of data. This pagination uses next and previous buttons and everything works just fine.

The thing is i would like to disable these buttons whether there is more data to load or not.

As for the previous button creating a piece of state to follow in which page the user is in and then disable the button when state is page 1 should be good enough. (It might not be the best move tho so feel free to share if you have a better solution)

But for the next button it is harder. I did some research and found some solutions like using the limit number. If the limit is < to the number of data displayed in a page then disable the button. It works but my problem is what if limit = number of data in a page ? And no more data to load afterwards.

To be more precise let's take an example limit = 9 / number data displayed = 7 => button disabled ✅ limit = 9 / number data displayed = 9 => button still active ❌ (and these 9 elements are the last one to get still)

I was thinking to change my call to maybe put a limit of 10, instead of 9 currently. And still display only 9 elements each page (still keeping track of this 9th element for the lastVisible prop in order to call startAfter from it and not from the 10th element). Then check if this 10th elements exists or not to disable the next button. But this is all theory and as for now and i don't see the way to do it without breaking my endBefore and startAfter calls too much.

I would like to hear what you think about this solution, maybe if you could help me to use it correctly. Or maybe if you have another solution to achieve my goal

Thanks for your time