[FlatList] FlatList onEndReached no work android

[KeyX-y]

<FlatList
data={dataSource}
keyExtractor={(_, i) => i}
ItemSeparatorComponent={this._renderSeparator}
renderItem={({ item }) => this._renderListItem(item)}
onRefresh={() => this.handleRefresh()}
refreshing={refreshing}
onEndReached={() => this.handleLoadMore()}
onEndReachedThreshold={0.3}
/>

this is no work in android,
can work in ios

[shergin]

Can you provide a minimal amount of code to reproduce this using Sketch? This is necessary for people to be able to see and debug the issue being reported.

[PauloDurrerMelo]

+1

onEndReached is called one or two times before the first load ends and data array is filled.
It should only get called when the data is loaded and the onEndReachedThreshold is true. Since no data is yet displayed, the onEndReached should not be called.

This does not happen on iOS.

[BouncyLlama]

I'm having this issue as well; onEndReached simply never fires. Here's a link to a sketch that reproduces the issue on android: https://snack.expo.io/SkNo3vn7-

Very frustrating; haven't even been able to find a functional workaround.

[iainheng]

I had the same problem with onEndReached is not called on Android when FlatList is scrolled to the bottom when I have prop onEndReachedThreshold={0}. Change the {0} to any number greater than 0 will make it working again.

This issue only happen on Android but not iOS.

[yash2code]

same issue

[zakster12]

Same problem here. Changing the value of onEndReachedThreshold didn't fix the issue.

[vvavepacket]

+1, happening on android on react native 0.45 any solution?

[vishnuc]

+1 same for me

[phumaster]

+1

[phumaster]

I think this is not a bug. My FlatList trigger onEndReached once time. This is problem. When onEndReached trigger, we must get new data and append to the old data => FlatList change and onEndReached can be fire.
My emulator: Pixel_API_25(AVD) - 7.1.1.
React native: 0.46.1.
Worked!

[yash2code]

@phumaster can you explain with sharing some code. Ty!

[phumaster]

My FlatList

<FlatList
                    data={this.props.data.data}
                    renderItem={this.renderItem}
                    keyExtractor={this.keyExtractor}
                    initialNumToRender={10}
                    onEndReached={this.handleOnEndReached}
                    onEndReachedThreshold={0.5}
                    refreshing={fetching}
                    onRefresh={this.handleOnRefresh}
                />

I get data. => FlatList have 10 Items

when onEndReached fire i get data from api. Then I change data in reducer (I use Redux)

let {data} = action.payload;
            let hasData = data && data.results && data.results.length > 0;
            state = {
                ...state,
                fetched: true,
                fetching: false,
                data: hasData ? {data: [...state.data.data, ...data.results], nextPage: data.next_page} : {
                    data: [],
                    nextPage: -1
                }
            };

=> FlatList has 20 Items. And onEndReached work!

state.data.data is old data.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[zhy8023]

I have a same problem.

[dan-klasson]

Still not fixed. Same problem here on Android.

[Sadanandteggi]

I found answer here , I initially tried all solutions given in github comments nothing worked, but finally check this answer which worked for me. Hope it will work for other too.

https://stackoverflow.com/questions/48740770/react-native-flatlist-pagination-not-working-onendreached-doesnt-fired/48747461#48747461

[lucaslz2020]

+1

[khanhtdbse]

[RN 0.52.1 -Both iOS - Android]
In my case onEndReached was not called because the list is not long enough.
So i hacked by adding marginTop to the container of FlatList. After the first fetch i remove that marginTop and anything work as expected