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
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!