Creating pagination in react-native

React native pagination in FlatList
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;

--

--

--

Software Engineer by Profession, Blogger by Passion

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to copy by value of composite data types in JavaScript?

Role-Based Access Like a Pro

Role-Based Access Like a Pro Article

Flutter vs React Native: in 2021

js class 2

Setting up a JavaScript project: Prerequisites

Iterating: Ruby vs Javascript

Adding a Calendar and Reformatting Datetime in React

Integrating Google Sign-in Provider with a React Native app

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rushabh Gedam

Rushabh Gedam

Software Engineer by Profession, Blogger by Passion

More from Medium

Handling custom layouts on Device orientation changes in React Native

Implement “i18n” in React Native Application

Higher Order Component for listing data using FlatList in React Native

How to Create a Scaling Drawer Using React Navigation 6

Open kitchen drawer