How to add load more records with Spinner in FlatList react-native (means -10 - 10 records) manually! not from using server side - react-native

Question

Hi I am developing sample application based on FlatList this is my code here. Actually i showed entire records like i have 50 records to my account . But now i am displaying entire 50 records. Bur i need show 10 after adding to 10 records. But i don't know adding to FlatList.
Here this is my code:
<FlatList
data={this.state.profiles}
renderItem={({ item, index }) => this.renderCard(item, index)}
keyExtractor={item => item.id}
ItemSeparatorComponent={() => <Divider style={{ marginTop: 5, marginLeft: width * 0.2 + 20 }} parentStyle={{ backgroundColor: globalStyles.BG_COLOR, alignItems: 'baseline' }} />}
/>
renderCard (profile, index) {
console.log('rendercard', profile);
//
return (
<View key={profile.id}>
<ProfileCard
profile={profile}
style={styles.card}
onPress={() => this.props.screenProps.rootNavigation.navigate('Profile', { profile: this.state.profile, id: profile.id })}
// onPress={() => alert('PROFILE')}
onAddClick={() => this.setState({ connectionPageVisible: true, cardProfile: profile })}
connectedIds={(this.props.screenProps && this.props.screenProps.connectedIds) || this.props.connectedIds}
/>
</View>
);
}
Please show me load more records with Activity Indicator.
Thanks in Advance

Answer 1

If I have understood your problem properly, then you are looking for infinite scrolling in Flatlist. You can achieve this with the help of onEndReached and onEndThreshold attributes.
Consider the following prototype
Assuming you are storing records into this.state.profiles.
Pulling new records from the server
Setting initial page number in the constructor
constructor(props){
super(props);
this.state = { page: 0}
}
Fetching new records
fetchRecords = (page) => {
// following API will changed based on your requirement
fetch(`${API}/${page}/...`)
.then(res => res.json())
.then(response => {
this.setState({
profiles: [...this.state.profiles, ...response.data] // assuming response.data is an array and holds new records
});
});
}
to handle scroll
onScrollHandler = () => {
this.setState({
page: this.state.page + 1
}, () => {
this.fetchRecords(this.state.page);
});
}
Render function
render() {
return(
...
<FlatList
data={this.state.profiles}
renderItem={({ item, index }) => this.renderCard(item, index)}
keyExtractor={item => item.id}
ItemSeparatorComponent={() => <Divider style={{ marginTop: 5, marginLeft: width * 0.2 + 20 }} parentStyle={{ backgroundColor: globalStyles.BG_COLOR, alignItems: 'baseline' }} />}
onEndReached={this.onScrollHandler}
onEndThreshold={0}
/>
...
);
}
Local updates
If you have already pulled all the data, but want to show only 10 at a time, then all you need to do is change the fetchRecords
fetchRecords = (page) => {
// assuming this.state.records hold all the records
const newRecords = []
for(var i = page * 10, il = i + 10; i < il && i < this.state.records.length; i++){
newRecords.push(this.state.records[i]);
}
this.setState({
profiles: [...this.state.profiles, ...newRecords]
});
}
Above approach will show Activity Indicator while pulling records.
Hope this will help!