Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native FlatList Pagination not working - onEndReached doesn't fired

I am using react-native FlatList component to list of items Pagination is not happening as expected , as per documentation onEndReached has to get fired when end of page is reached, currently I tried changing the values for onEndReachedThreshold ( tried 0.1, 1.0, 0.5, 0.01 ), am setting refreshing flag as well. Note: I am using ReactNative 0.48.4 So here my code

<Container style={{ marginTop: 22 }}>
      <Content
        style={{ flex: 1 }}
        contentContainerStyle={{ flexGrow: 1 }}
      >
        <View style={{ flex: 1 }}>
          <FlatList
            initialNumToRender={10}
            refreshing={this.state.refreshing}
            onEndReachedThreshold={0.5}
            onEndReached={({ distanceFromEnd }) => {
              console.log('on end reached ', distanceFromEnd);
            }}
            data={this.props.messages}
            renderItem={this.notificationContent.bind(this)}
            keyExtractor={(item) => item._id}
          />
        </View>
      </Content>
    </Container>

I have already tried all possible solutions as give in responses for github issues

Any Help here ?

like image 721
Sadanand Avatar asked Feb 12 '18 06:02

Sadanand


2 Answers

You use NativeBase in your project and the Flatlist is on Content they are conflict. To solve this problem you need to remove Content

like image 166
Hao Le Avatar answered Nov 11 '22 20:11

Hao Le


Same thing happens with me you need to add contentContainerStyle={flex:1}

<Content contentContainerStyle={{ flex: 1 }}>
like image 5
A Rahman Avatar answered Nov 11 '22 18:11

A Rahman