15

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

Lavaraju
  • 2,614
  • 7
  • 29
  • 49
  • Ideally, if you're getting the profiles from some `api`, then you need to add a limit to the `api` to return 10 results, and a url object for the next 10 elements and so on, like what `SoundCloud` does – Pritish Vaidya May 03 '18 at 09:06
  • thanks for your response! from service side they didn't give any size limit – Lavaraju May 03 '18 at 09:10

1 Answers1

17

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!

Prasun
  • 4,943
  • 2
  • 21
  • 23
  • Thanks for your reply. But i am getting all records from api. and in my api i didn't have any page size attribute or keyword – Lavaraju May 04 '18 at 03:53
  • Ok, for this I have provided `Local updates`, where it is assumed that all the data is pulled at first, then when user reach to end of the list, it will populate data from the local state. Take a look at `Local updates` part. – Prasun May 04 '18 at 03:55
  • 1
    BTW, `page` is mentained locally to indicate pegination only. I just wanted to make it extendable, so that if there is any change in the API, all u need to do is change the `fetchRecords` method. – Prasun May 04 '18 at 03:56
  • I mean, now you are populating data from local, if there is any change in future to populate data from backend then you just need to change fetch method. I think `Local updates` section should solve your issue. – Prasun May 04 '18 at 04:01
  • But my api have not size option – Lavaraju May 04 '18 at 04:05
  • Yes, right now there is no support in your API, so your issue can be solved using `Local updates` section mentioned in my answer. – Prasun May 04 '18 at 04:22
  • thanks but on updating state my flat list goes to start, means if i have 10 item at first the i got next 10 and i append the new array to the previous 10 item, so, state is updated and my component is rerendered and flatllist scroll to first item – Sultan Ali Jan 13 '21 at 13:27