Okay, let's implement infinite scroll. So as we scroll down here, we want to load any new tweets, so we don't have to load everything at once. So that means we need pagination in the backend, which we'll take a look at in a second. But first, let's see how we can detect that we're at the end of the list here. So it's built right into the FlatList component. We can say onEndReached and give it a method name. Let's say handleEnd. And we also have a threshold, so onEndReachedThreshold. And this is a number between 0 and 1. If we say 0,

a threshold, so onEndReachedThreshold. And this is a number between 0 and 1. If we say 0, then this will fire once we're at the end of the list. But if we were to give it, say, 0.5, then it will fire when we're halfway through the list, or halfway scrolled through the list. So ideally, you'd probably want to set it to something right before the end, 0.1 or 0.2. But for demo purposes, I'll keep it at 0 so you can see what we're doing. So let's go ahead and define that method, and let's just see if we can console.log something once we reach the end of the FlatList.

And there it is, atEndOfFlatList. Cool. So ideally, we'd like to have a loading spinner here, so we can do that as well. So back to our FlatList. We can specify a footerComponent, which we'll render at the end of the FlatList. So we can say listFooterComponent. Okay. And we can give it an ActivityIndicator component. So let's say ActivityIndicator. And let's just make it large like we did earlier. And color gray. Okay. Save that, and

And color gray. Okay. Save that, and there should be a loading spinner here at the end. So we'll make this conditional later on. But now let's move on to the backend. So I have it here. And pagination in Laravel is very simple. So all we have to do is change get to paginate, and that's basically it. So before I do that, let's go into our REST client. And let me just refresh this. And you'll see that the data coming back is an array. But if we change it to pagination, so let's say paginate, let's say 10.

array. But if we change it to pagination, so let's say paginate, let's say 10. Save that. Refresh this. Now you see that we get an object, and the data is now in a data key. So we have to accommodate for that in the frontend. So let's do that. So back to our React Native app. In the Axios call, where is it? Right here. When we're setting the data, it's now going to be response.data.data. Okay. So let's save that. Back to the simulator. And now we should have only 10 results here.

Okay. So let's save that. Back to the simulator. And now we should have only 10 results here. So let me just refresh this. And we should only have 10. And we do. Cool. So now we can specify a query string param for whatever page we want. So we can say the default is 1, obviously. And then we can specify whatever page we want here. Okay. So now we need to keep that as a piece of state on our frontend. So let's do that. Let's say const page

a piece of state on our frontend. So let's do that. Let's say const page and setPage. And that's going to be page1 by default. So now our endpoint will make use of that piece of state. So let's change this to a template string. And let's say page equals that variable. Okay. So this should still work the same. Let's make sure. Okay. But now once we reach the end of the list, then we want to increment that page. So for handleEnd,

Okay. But now once we reach the end of the list, then we want to increment that page. So for handleEnd, we can set the page here. So say setPage(page + 1). Okay. And we can get all tweets here, like we did in the handleRefresh. But since we already have this useEffect hook here, which is calling getAllTweets when the screen starts, we can just add a parameter here to check if the page is updated. And then it will call getAllTweets. So let's say page. Whenever the page is updated,

parameter here to check if the page is updated. And then it will call getAllTweets. So let's say page. Whenever the page is updated, then go ahead and get all the tweets again. So at this point, the page should be updated. And instead of setting the data to whatever's coming back, we want to append to the current data that's already on the page. So let's go ahead and do that. Let me just comment this out. We can say setData. And we can just make use of arraySpread to append the new data coming in. So this is the existing data. Let's spread in the new data coming in. So response.data.data.

this is the existing data. Let's spread in the new data coming in. So response.data.data. And hopefully I did everything correctly. So let's see if the infinite scroll works. Save that. Okay. Encounter two children with the same key. Let me just refresh this. Okay. So let's see if it loads the data in once we scroll to the end of the list. And it looks like it does. Cool. Okay. So it is working. And after a certain point, there's no more data,

Okay. So it is working. And after a certain point, there's no more data, which we'll account for in a second. So now let me just reload this again. If we pull to refresh, like we did in the last video, then we're going to get this error here. And if you take a look, we have duplicate data. So we have this is a new tweet. And if you scroll down, we have it again. So that's because we're appending to the list here as well, even when we're just doing a pull to refresh. So we only want to do this when the page is greater than one. So let's make a conditional here. So if page

Actually, I added the tweets, so the last page should be five. And you can see the next page URL is not null here. We do have page equals five. But if we go to this, you'll see that the next page URL is null. So that means it's the last page. So how about this? How about we keep a piece of state that tells us if we are done scrolling? So let's do that. So let's say const isAtEndOfScrolling = false by default.

set isAt end of scrolling. It's false by default. And let's check for that case right underneath here. You can also put this in a ternary if you want to make it cleaner, but that's fine for me. So what was that called? It was called nextPageURL. So if the response.data.nextPageURL is not null, so not, okay. Sorry, I meant if it is null.

you'll see we get some duplicate data. So let's just reset a few things when we handle the refresh. Let's just set the page back to 1. And let's set the scrolling. So set isAtEndOfScrolling to false. And that should fix that. So again, let me reload here. Let's load some data. Okay. Let's pull to refresh. And now we're back at page 1. So that handles that case. So yeah, that's basically it. As you see, the flat list makes everything easy. Laravel makes pagination simple as

one. So that handles that case. So yeah, that's basically it. As you see, the flat list makes everything easy. Laravel makes pagination simple as well. So all we have to do is append the data we want for each new page. So let's go ahead and make a commit here. So we have new commits on our frontend and backend. Let's just say for the frontend, infinite scroll. And for the backend, let's just say add pagination. And we'll clean out the backend later on. We'll put stuff in controllers and make everything more maintainable. But for now, this is fine. add pagination.

And we'll clean out the backend later on. We'll put stuff in controllers and make everything more maintainable. But for now, this is fine. Add pagination.