Load more when the top is reached

Question

As we can use load more functionality when onEndReached, the same way how can we use load more when we reach to the top of the list ? Also while doing this when I load more data at the top, Flat list moves to the very top element and hence scroll becomes infinite.

thanks.

Answer 1

1) You can use onScroll callback and get offset from top from event.nativeEvent.contentOffset.y

0 means the top point

For example:

<FlatList
    data={messages}
    onScroll={
        (event: NativeSyntheticEvent<NativeScrollEvent>) => 
            onContentOffsetChanged(event.nativeEvent.contentOffset.y)
    }
/>

onContentOffsetChanged = (distanceFromTop: number) => {
    distanceFromTop === 0 && makeSomething();
}

2) Or you can use "inverted" property and onEndReached will call at top of the screen

inverted Reverses the direction of scroll. Uses scale transforms of -1.