React-native pagination example using array method map

Hi Guys, In this article, we are going to learn about the React-native pagination example using array method map, as we all know many developers use FlatList component to display the list with pagination but in this article, we will learn with the help of JSX array method in react-native, also we are using NativeBase.io in this example which is open source and minimize code for UI design and provide a special type of component to design UI in react-native. so let’s start with an example

To learn infinity list with FlatList check this post

1. Create a new project

Install NativeBase.io using the following command

2. Import the following components

Import react-native as well as Nativebase components like below

3. Define variables

Define variables for pageNumber and state

Inside call constructor define the following variables

4. Fetch call for pagination

As you can see in the below code I have pass pageSize and boolean to display loadMore loader at the bottom. In response, I have added JSON response in the previous Arraylist and update pageNumber using pageNumber = pageNumber + 1;

We have to call this function in componentWillMount.

5. Pagination using the map array

In NativeBase we have to wrap everything inside <Container>… </Container> component. Inside the Container, I have added the Content component. Using content component we can trigger the event when the user reached the end of the page to find out the end we have created a new function isCloseToBottom this function will return true if the user is close to the bottom at that time we have to call fetch method to get next page response let’ see below source code

Function to check scroll reached end of page

6. Full Source code

7. Output

React-native pagination example using array method map

Thank you 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *