How to add pagination to a React-Native flatlist

This tutorial will explain how to add pagination to your flatlist while scrolling, so 10 more items get added to the flatlist the more you scroll.

The first thing we need to do as always is create a new React-Native project, use the command below.

react-native init paginationflatlist

After we have created the project we need to open this in our favourite code editor, mine is VS code.

The firs thing we need to do is open the “App.js” file and change the “App” class to be the below.

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true,
randomUserData: [],
loadingExtraData: false,
page:1
}
}
render() {
return (
<View>
</View>
)
}
}

The class includes a constructor that will contain a state object.