Infinite scrolling in React Native from API data in Redux without libraries

Photo by Caspar Camille Rubin on Unsplash

In this article, I’ll explain how to create infinite scrolling in your React Native Application by making API calls through Redux and storing/retrieving data from Redux, without the necessity of any external libraries.

For this, we’ll be using the FlatList component to render the data and onEndReached prop, which triggers the function passed into it as soon as the rendered list reaches a scroll threshold.

Here’s a working example of what the final product would look like:

Infinite scrolling with the help of FlatList

Firstly, your API needs to support pagination. I’ve coded my API in such a way that I’ll have to send a limit and skip queries to get the right amount of data in response.

As we’re using Redux Toolkit, let’s first make a service file. In my case, I’ll name it productService.js

The function getProducts will return a response containing:

1. The maxCount value which represents the total number of documents present in the collection, and is also based on any external queries provided.
2. An array of objects which contains the data. The length of the array depends on what limit has been passed in the query

Now let’s create a productSlice, to store all our data. At first, we need to create an initial state:

Then, we need to create a function using createAsyncThunk method, where we’ll call our getProducts() function which we had defined in our productService.js file. This will return an object containing a field called “response_data” which has the response from the API call, as well as we’ll be storing our query data which we’re gonna call from the main component later.

And finally, we’ll have to create a slice for our products redux store. Here we’ll write all our logics inside extraReducers, as we’ll be using createAsyncThunk to get our data. Once the request is fulfilled, we’re gonna push the array of response objects into our initialState’s data array.

In the end, your slice would look like this:

I’ve used the reselect library to create selectors so that I can use only certain data required in my component. This isn’t required.

Now we need to configure to add up all the redux stores which we’ve created, in this case, it’s just productSlice.

Now finally we’re at the part where we implement the logics in our component.

I’ve hardcoded the Page Limit to be set as 10. Initially, the useEffect calls the “getProducts” function with page=0, limit=10 and skip=0. This will get the first 10 items from the collection and store them inside redux. After this, whenever the user scrolls down and reaches to the end of the list, the “getProducts” function gets called, but this time, the page and skip parameters value changes. It changes dynamically based on it’s updated value in the redux store. Every time this function gets called, if the API call is successfully performed, the page number gets updated in redux. The function gets called only if the total count is greater than (current page number * limit).