Creating pagination in react-native

In order to create pagination in react native using FlatList component of react-native.
You might have already gone through basics, & must known about the fact that no suitable answer is found yet.
So directly jumping into the solution.

Pagination in react native

import React from 'react';
import {
SafeAreaView,StyleSheet,ScrollView,View,Text, StatusBar, FlatList, ActivityIndicator,TouchableOpacity,Button,TextInput, Image, Alert} from 'react-native';
interface S {
studentData: any[];
currentPage: number;
isLoading: boolean;
lastPage: number;
}
class App extends React.Component<any, S, any> {
constructor(props: any) {
super(props);
this.state = {
 studentData: [],
 currentPage: 1,
 lastPage: 0,
 isLoading: false
 }
}
componentDidMount() {
 this.lodeMoreData()
 let interval = setInterval(() => {
  this.lodeMoreData()
 }, 10000);
}
async lodeMoreData() {
let nextPage = this.state.currentPage + 10;
this.setState({ isLoading: true })
let param = JSON.stringify({
 page: nextPage,
});
let res: any = await fetch(`https://randomuser.me/api/?results=${nextPage}`);
if (res.status == 200) {
const respJson = await res.json();
console.log(respJson)
// if (res.status == 200) {
if (
respJson.results != null &&
respJson.results != undefined &&
respJson.results.length > 0
) {
this.setState({
studentData: [...this.state.studentData,...respJson.results],
currentPage: nextPage,
isLoading: false
});
}
}
}
renderCustomItem = ({ item, index }: any) => {
return (
 <View style={{ justifyContent: 'center', alignItems: 'center' }}>
   <Text>{item.gender}</Text>
   <Text>{item.name["first"]} {item.name["last"]}</Text>
   <Image source={{ uri: item.picture["medium"] }} style={{ width: 200, height: 200 }} />
 </View>
)
}
keyExtractor = (item: any, index: any) => item.email;
render() {
return (
<View style={{}}>
<FlatList
style={{ backgroundColor: "white" }}
showsVerticalScrollIndicator={false}
data={this.state.studentData}
keyExtractor={(item) => item.email}
extraData={this.state.studentData}
renderItem={({ item, index }) =>
<Text style={{ height: 100, width: '100%' }}>{item.email}</Text>
}
onScroll={e => {
let paddingToBottom = 10;
paddingToBottom +=
e.nativeEvent.layoutMeasurement.height;
var currentOffset = e.nativeEvent.contentOffset.y;
if (
e.nativeEvent.contentOffset.y >= e.nativeEvent.contentSize.height -
paddingToBottom) {
console.log(!this.state.isLoading,
this.state.currentPage, this.state.lastPage)
if (!this.state.isLoading) {
console.log('next page');
this.setState({ isLoading: true });
setTimeout(() => {
this.lodeMoreData();
}, 1000);}}}}/>
{this.state.isLoading && (
<View style={{width: '100%', height: '100%',alignItems: 'center', justifyContent: 'center',position: 'absolute'}}>
<ActivityIndicator size="large" color={'black'} />
</View>
)}
</View>
)
}};
const styles = StyleSheet.create({
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600'
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400'
},
highlight: {fontWeight: '700',}
});
export default App;

All you have to do is to focus on onScroll Prop of FlatList, which will help you to get what you willing to implement.