React-native-gifted-chat: [Feature Request] Implement Pull to load Earlier messages

[gperdomor]

Any way to implement pull to do something using props?...

I wanna using pull to refresh gesture load earlier messages.

More documentation => https://facebook.github.io/react-native/docs/refreshcontrol.html

[gperdomor]

I made a quick test and put some code to use refreshControl, but the refreshControl is render at the bottom

[Mr7Cat]

I want to add same feature, and I found in MessageContainer.js render()

renderScrollComponent={this.renderScrollComponent}

Use this component "InvertibleScrollView", this is the reason.

look at this issue: https://github.com/exponent/react-native-invertible-scroll-view/issues/24

I'm seeking the solution now....

[jjdp]

on 0.42.0 they released this https://github.com/facebook/react-native/commit/9dee696ed86e9597841922630087bf5033f50f8e
it may be worth it to change from invertiblescrollview so you can add an on refresh

[kfiroo]

@jjdp This looks great, if anyone is up for creating a PR that replaces the InvertibleScrollView with this it would be great

[Mr7Cat]

@kfiroo I simply changed InvertibleScrollView to ScrollView and work well,
I don't understand why use InvertibleScrollView....
Is there any one can explain it for me, very thankful!

[kfiroo]

@Mr7Cat The goal was to have the messages stuck to the bottom when there are less messages then the screen height, also when new messages arrive to keep the ScrollView scrolled to the end.
This was not possible on earlier versions of ScrollView so we had to use InvertibleScrollView

[Mr7Cat]

@kfiroo Thank you for your answer！
When there are less messages than the screen height, the messages don't need stuck to the bottom in most IM app. In our country, it's a little strange...
Oppositely, the messages need stuck to the top.
Is there any plan to change it? ^_^

[kfiroo]

@Mr7Cat It should definitely be configureable.
If I have time I would look into it, no promises though.
PRs are always welcome :)

[tonimoeckel]

I found this issue while I was looking for an solution to automatically fetch earlier messages when the user scrolls on top. As I found a solution it might be related to this issue...

OK so .. I wanted my chat to load earlier messages automatically when you scroll to the top element. I used the "listViewProps" for this. The callback gives you the number of message ids that are currently visible. Works great for my purpose.

```
listViewProps={
{onChangeVisibleRows: this.onChangeVisibleRow.bind(this)}
}
/>

[vinayr]

Here's how I did it (tested on iOS only) -

let onScroll = false;

onEndReached = () => {
  if (!onScroll) return;
  // load messages, show ActivityIndicator
  onScroll = false;
}

onMomentumScrollBegin = () => {
  onScroll = true;
}

<GiftedChat
  ....
  ....
  listViewProps={
    {
      onEndReached: this.onEndReached,
      onEndReachedThreshold: -100,
      onMomentumScrollBegin: this.onMomentumScrollBegin
    }
  }
/>

[swl367]

@vinayr thanks, that definitely helps.

[shekharskamble]

@vinayr - in my case onEndReached never gets fired :(

[thu-san]

@shekharskamble - mine also never gets fired. Seems like onEndReached is being called before onMomentumScrollBegin. I removed onMomentumScrollBegin and changed onEndReachedThreshold to 100 to fit my need and it works.

onEndReached = () => {
  // load messages, show ActivityIndicator
  console.log("Loading Messages");
}

<GiftedChat
  ....
  ....
  listViewProps={
    {
      onEndReached: this.onEndReached,
      onEndReachedThreshold: 100
    }
  }
/>

[shekharskamble]

@thu-sama thanks a lot it worked

[xfishernet]

it works very strange...

[AleksandarSavic95]

Here is how I did it!

1) use the onScroll callback in GiftedChat's listViewProps:

<GiftedChat
      listViewProps={{
        scrollEventThrottle: 400,
        onScroll: ({ nativeEvent }) =>
          this.isCloseToTop(nativeEvent) &&
          this.loadEarlierMessages()
      }}
/>

2) how to check if scroll is close to top:

const LOAD_EARLIER_ON_SCROLL_HEGHT_OFFSET = 100;
// ...
isCloseToTop({ layoutMeasurement, contentOffset, contentSize }) {
  const contentTopOffset = contentSize.height - layoutMeasurement.height - contentOffset.y;
  // if the screen is not full of messages, offset would be too big
  return contentSize.height < layoutMeasurement.height
    ? contentOffset.y > LOAD_EARLIER_ON_SCROLL_HEGHT_OFFSET // so we only check bottom offset
    : contentTopOffset + LOAD_EARLIER_ON_SCROLL_HEGHT_OFFSET < 0;
}

• contentTopOffset = how far is the oldest chat message from the top edge: positive number means above, negative number means below.
• contentOffset.y = the number showing how much content is below the bottom edge of the visible chat area.

[edrichhans]

Here's how I did it (tested on iOS only) -

let onScroll = false;

onEndReached = () => {
  if (!onScroll) return;
  // load messages, show ActivityIndicator
  onScroll = false;
}

onMomentumScrollBegin = () => {
  onScroll = true;
}

<GiftedChat
  ....
  ....
  listViewProps={
    {
      onEndReached: this.onEndReached,
      onEndReachedThreshold: -100,
      onMomentumScrollBegin: this.onMomentumScrollBegin
    }
  }
/>

I think the onEndReachedThreshold is updated to values between 0 and 1 following the deprecation of listview and using the newer flatlist. Setting it to 0.4 works for me.