Why SectionList onEndReached is not working?

Question

When I load my component onEndReached will be triggered one time before I scroll my <SectionList />, but when I scroll to bottom onEndReached won't be triggered any more.

Here is my code:

render (
  return (
    <View style={{ flex: 1 }}>
      <SectionList
        style={{ backgroundColor: 'pink' }}
        refreshControl={
          <RefreshControl
            refreshing={false}
            onRefresh={() => console.log('refreshControl')}
            tintColor='gray'
          />
        }
        renderSectionHeader={this.sectionHeader}
        renderItem={this.renderSectionView}
        sections={reservations}
        onEndReachedThreshold={0.05}
        onEndReached={(data) => {
         console.log('data', data); // { distanceFromEnd: -457 }
         console.log('onEndReached');
        }}
        keyExtractor={(item, index) => index}
        ItemSeparatorComponent={() => <View style={{ backgroundColor: 'gray', height: StyleSheet.hairlineWidth }} />}
      />
    </View>
  );
);

Here is my <SectionList /> screen:

In my <SectionList /> refreshControl is fine but onEndReached is not working, any one knows what happened ? Thanks.

Answer 1

Looks like a lot of people are experiencing the same. There is a suggestion to change the onEndReachedThreshold to value bigger that 0.05, for example: 0.5

Answer 2

Try something like

render (
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <SectionList
        style={{ backgroundColor: 'pink' }}
        refreshControl={
          <RefreshControl
            refreshing={false}
            onRefresh={() => console.log('refreshControl')}
            tintColor='gray'
          />
        }
        renderSectionHeader={this.sectionHeader}
        renderItem={this.renderSectionView}
        sections={reservations}
        onEndReachedThreshold={0.05}
        onEndReached={(data) => {
         console.log('data', data); // { distanceFromEnd: -457 }
         console.log('onEndReached');
        }}
        keyExtractor={(item, index) => index}
        ItemSeparatorComponent={() => <View style={{ backgroundColor: 'gray', height: StyleSheet.hairlineWidth }} />}
      />
    </SafeAreaView>
  );
);