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;

--

--

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