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

Question

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 ?

Answer 1

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

Answer 2

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

<Content contentContainerStyle={{ flex: 1 }}>

Answer 3

Pass extraData prop to FlatList as extraData = {this.state} check the docs for more info.

Answer 4

onEndReachedThreshold={0.5}     remove this line