Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React native infinite scroll with flatlist

Tags:

react-native

I followed this tutorial https://www.youtube.com/watch?v=rY0braBBlgw When I scroll down it sends the request then it gets stuck in a loop and just requests and requests. I think this is a problem with the scrollview in the listview.

like image 585
Jaden Zayas Avatar asked Sep 24 '17 00:09

Jaden Zayas


1 Answers

I am not sure if you were able to resolve this but I was having the same problem and I am adding what worked well for me.

onEndReachedThreshold=>onEndThreshold

<FlatList
      data={this.state.data}
      renderItem={({ item }) => (
        <ListItem
          roundAvatar
          title={
            <Text style={{textAlign: 'left'}}> {item.name.first} {item.name.last}</Text>
          }
          subtitle={
              <Text style={{textAlign: 'left'}}>{item.email}</Text>
          }
          avatar={{ uri: item.picture.thumbnail }}
          containerStyle={{ borderBottomWidth: 0 }}
        />
      )}
      ItemSeparatorComponent={this.renderSeparator}
      ListHeaderComponent={this.renderHeader}
      ListFooterComponent={this.renderFooter}
      keyExtractor={item => item.email}
      refreshing={this.state.refreshing}
      onRefresh={this.handleRefresh}
      onEndReached={this.handleLoadMore}
      onEndThreshold={0}

    />

I hope this helps someone.

like image 134
Blue Tram Avatar answered Oct 19 '22 04:10

Blue Tram