React-native-gifted-chat: Load earlier messages by pull

[konclave]

Issue Description

Now there's a way to add load earlier button at the top of the messages list, or refresh list by passing onRefresh and refreshing props to FlatList via listViewProps.
In the second case refresh will be done on pulling list from the bottom to the top.

Is there a way to keep inverted FlatList, but load earlier messages by scroll to the earliest message loaded (at the very top of the list) and pull the list from the top to bottom and control list scroll to keep current earliest element at the place when earlier messages will be loaded?

Additional Information

• Nodejs version: 10.10.0
• React version: 16.6.1
• React Native version: 0.57.5
• react-native-gifted-chat version: 0.6.0
• Platform(s) (iOS, Android, or both?): both

[evertonco]

Have you try wrap GiftedChat on ScrollView component and implement refresh control on ScrollView?

[konclave]

@evertonco wrapping GiftedChat into ScrollView doesn't give me control on on scroll position inside GiftedChat. I can't keep list position when new messages are loaded and added to the list.

[MarcoLLeite]

I also tried to wrap GiftedChat into a ScrollView, but I dont have control of the refresh section. And I assume I will have the same issue as @konclave.

At the moment I am just using the button, but I would rather not.
Anyone know a clear way to implement the pull to load more?

Thanks

[evertonco]

Hey guys, have you tried use onEndReach and onEndReachedThreshold props?

[MarcoLLeite]

@evertonco I have tried with this:

listViewProps={
    {
      onEndReached: this.onEndReached,
      onEndReachedThreshold: 1000,
    }
}

But this didn't seem to work correctly, but it seems to trigger before getting to the end of the list, way before. I explain better:
I have about 100 messages loaded on initial load.
Without scrolling, I can see around 12-15 messages.
As soon as I start scrollig the OnEndReached action gets triggered.

I have also tried to wrap the Gifted chat around a Scroll View with a refresh control, but the screen gets confusing between scrolling and refreshing.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[trane294]

Any update on that?

[zzbynzz]

Any update on solution about this ?

[ntnamag]

This issue is very necessary. No any update?

[TheYoungBoss]

This issue is very necessary. No any update?

indeed I'm facing to the same problem. Any idea ?

[hubermat]

onEndReachedThreshold is a value between 0 and 1.

This works for me perfectly:

listViewProps={
  {
    onEndReached: this.onLoadEarlier.bind(this),
    onEndReachedThreshold: 0.5,
  }
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.