React Native Custom Infinite Scroll

When I started working with React Native recently, I did a lot of research oninfinite scroll. There are many proposed solutions online, even libraries ready to be used, but none of them were quite right for me. That is why I created one for myself, and this blog will show you how you can do it too.

Step 1: The idea

I wanted to create apicture appthat fetches data from API and shows a list of pictures with atitleanddescription.Previous experience taught me that getting the whole list and rendering it on the screen can be really bad for performances of your application (Web or Mobile) so I decided to limit the response to 5 items per page :

As you can see from the response, there are 40 items in total, with 5 items per page on a total of 8 pages.

Step 2: Setting the scene📜

First, we need to fetch the data from API. For this I will use axios. (You can find the full documentationhere)

npm install --save axios

After installing axios, we need to create a new instance of axios with our API URL, inrootfolder of our application (If you are not sure where the root folder is, just make it appear in the same place asApp.jsfile) and name it “axios.js”

import axios from 'axios';

var instance = axios.create({ baseURL: 'https://YOUR_URL/api'});

export default instance;

After creating the instance, we can start implementing ourinfinite scroll.

First, create a new component called “ImageList.js” and add all imports that we will use for creating and rendering pictures:

import React, { Component } from 'react';

import {Text,View,ScrollView,TouchableOpacity} from 'react-native';

import API from './axios';

As you can see, we added a few things that we will use for this component. The most important is ScrollView and we will use it foronScrollevent, a few steps later.

Step 3: The Coding💻

We can now start creating our class component. To do that, we need to define ourstateand create a life cycle methodcomponentWillMount().

The functiongetListOfImages()is then called, like you can see in the next block of code. A similar function was found onstack overflowbut it didn’t work for me, so I modified it. This is what I came up with:

ThegetListOfImages()function allows us to get images from our API. As you can see in the window above, we need to set ourloading to true. We then use our instance of axios and make a request to the API with the starting page. (Remember, we have 8 pages with 5 items on each page - 40 items in total).

Next, we add our data tonextPicturevariable where we hold the 5 items, and append it to ourdataarray. ForhasMoreproperty we will returntrueorfalsebased oncurrent_pageandlast_page,and lastly forcurrent_pagewe will just increment value after each request. For rendering list of pictures we will use ScrollView:

This function will returnBoolean valuebased on height and content of the screen.

Lastly, we will implement our function to actually see our images with title and description. For displaying pictures I used‘react-native-elements’;Cardcomponent, but you can use this code for any type of custom View. If you want to follow my example you can find the full documentation for react-native-elementshere.