React-native: [HELP] FlatList inverted={true} should have an onTopReached callback

[Jose4gg]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

1. react-native -v: 0.47
2. node -v: 6.11.1
3. npm -v: 3.10.10

Then, specify:

• Target Platform: IOS, ANDROID

• Development Operating System: Mac OS Sierra

• Build tools: Packager

Expected Behavior

If I have a FlatList with the prop inverted={true} I want the callback onEndReached to be dispached when the user reaches the top of the items.

Actual Behavior

There is no way to get a callback when the user reaches the top of an Inverted FlatList. Its should be a callback for this just like the onEndReached.

[chirag04]

check how this is done: https://github.com/expo/react-native-invertible-scroll-view

[abrantes01]

@hramos Can we have more infos about this ? React-native-invertible-scroll-view doesn't seem to be compatible with FlatList. I also think we should have an event for top reached using inverted FlatList.

[danieljvdm]

I don't know what I'm missing here but onEndReached fires when you reach the top when the FlatList is inverted...

[quadsurf]

my issue is semi-related... i have an inverted FlatList for a texting app who's UI is identical to the iOS Messages app (an inverted list where the user pulls down to load more messages)

pull DOWN to refresh (with ActivityIndicator at the top) does not work when the FlatList is inverted, instead, it behaves like this: pull UP to refresh (with Activity Indicator at the bottom) ... literal vs intuitive: when taken "literally", i can agree that this is expected behavior since it is after all "inverted" ... however, when taken "intuitively", it's not so expected

this default is non-intuitive to users and is preventing me from being able to load more chat messages in the same manner that the iOS Messages app does it, where the user pulls DOWN to refresh and the ActivityIndicator appears at the top

does anyone know how to override this default?

[marsonmao]

So will there be a onTopReached? Or any workaround to do the same thing with FlatList? I've just searched a lot and have no clue. And I tried the onScroll event, but it is not firing for FlatList also causes out of memory.

React-Native 0.52.0
Android 8

[marsonmao]

https://github.com/expo/react-native-invertible-scroll-view could work, but it is based on ScrollView.