React-native-gifted-chat: Need to auto-scroll to a particular message of a chat conversation

[Thyix]

Good afternoon,

I have a chat messages thread and I want to scroll to a particular message by it's Id. I have searched and haven't found anything so far.

e.g. : I have a 'message search' scene in my application. When you enter something in the search bar, every messages from every contacts are fetched and I display only some that corresponds with the entry.

When I click on a particular message of a particular contact, I navigate to this contact chat conversation.

The only thing I need is scrolling to that particular message. I know every message have an Id, that's why I wanted to know if there's a method to move directly to a specific message by providing the chat Id.

Hope you can help me with this 👍

Additional Information

• Nodejs version: v8.9.4
• React version: 16.2.0
• React Native version: 0.55.4
• react-native-gifted-chat version: 0.4.3
• Platform(s) (IOS&Android): (IOS v11.2, Android v6.0)

[leron8]

I will also be looking forward to having this feature. I see that gifted chat uses RN's FlatList (https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/MessageContainer.js) so this could be used https://facebook.github.io/react-native/docs/virtualizedlist.html#scrolltooffset Which I see they have that function in Gifted chat also:

scrollTo(options) {
if (this.flatListRef) {
this.flatListRef.scrollToOffset(options);
}
}

I haven't been able to dig in more to see how to implement it though. I hope it helps in some way!

[alexvaltin97]

Also looking for it

[Thyix]

@leron8 Thank you for your reply.

Your answer would work with a normal flatList usage, but I don't know if the behavior will still work even with the spacing for the dates displaying, and the variable height depending of the chat message content.

I will work on this issue and make up a pull request as soon as I can! :)

[flashimxd]

I'm looking for something similar...
Let me know if you guys figure out how to do that.

[maulikdhameliya]

@leron8 : created this scrolling functionality ? Let me know if you have so that I need to implement at my end also

[leron8]

Hello @maulikdhameliya I haven't implemented it. Been busy. I believe @Thyix might have worked on a PR, but not sure though.

[Thyix]

Didn't find anything yet, sadly :(

[brianinator]

Technically, as alluded gifted chat uses Flatlist internally and it could be that you can use scrollToIndex but as documentation states it depends on getItemLayout and that depends on giving Flatlist heights to the items upfront.
@leron8 Your PR would be able to calculate variable item heights?

[leron8]

Hey @testshallpasswork I can't work on PR right now. @Thyix was but he says he hasn't found anything yet :'(

[anhtukhtn]

I'm waiting for this also. Hope.

[anhtukhtn]

I finally did it by myself with v0.4.3.
The idea is:

1. Get ref of the list view chatListView.
2. Get position of the message views. Because in v0.4.3, gifted-chat using InvertibleScrollView. So I have to using a callback from onLayout of the View in InvertibleScrollView. Then I store them in a stored dictionary.

==> Scroll to message: Get position (messageViewY) of message view from the stored dictionary. Then:

let scrollY = messageViewY - this.chatListView.scrollProperties.visibleLength;
this.chatListView.scrollTo({ x: 0, y: scrollY, animated: true });

[SrWildman]

@anhtukhtn can you please provide a little more detail on this? I have my reference to gifted chat but am a little confused after that.

[anhtukhtn]

@SrWildman
I did it with v0.4.3 ,when gifted-chat used InvertibleScrollView. It uses FlatList in v0.5 now.
So my solution maybe not work anymore.

If you still use v0.4.3. You can see more detail from forked repo
https://github.com/anhtukhtn/react-native-gifted-chat/commit/8408a24f41fd8f2c14902c9681094c375919821b
https://github.com/anhtukhtn/react-native-invertible-scroll-view/commit/fa7ee55ffcb08809b9a32e34510ab4ff56c5b419

[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.

[parthya]

This was simpler than I thought. I have created a PR https://github.com/FaridSafi/react-native-gifted-chat/pull/1157

@Thyix Can you check if it works for you, if you haven't found a solution already.

[infaz]

I finally did it by myself with v0.4.3.
The idea is:

1. Get ref of the list view chatListView.
2. Get position of the message views. Because in v0.4.3, gifted-chat using InvertibleScrollView. So I have to using a callback from onLayout of the View in InvertibleScrollView. Then I store them in a stored dictionary.

==> Scroll to message: Get position (messageViewY) of message view from the stored dictionary. Then:

let scrollY = messageViewY - this.chatListView.scrollProperties.visibleLength;
this.chatListView.scrollTo({ x: 0, y: scrollY, animated: true });

It says scrollTo in not a function. Any idea what might the reason?

[anhtukhtn]

@infaz Did you link it with ListView ref? I did it with v0.4.3.
At the current version >v0.6, GiftedChat changed the container to FlatList.

[LuckyShine001]

I want a scenario that on particular condition the chat should not scroll to the bottom(latest message), unless user manually scroll it.
can we achieve it with updated gifted-chat version?

[JonnyBurger]

My strategy:

• Store in redux or in a state the message that you would like to focus
• Pass each message row a field focusedMessage={}

• do a check in the component, if props.focusedMessage === this.props.message then ref.measure, then props.shouldScrollTo

• In the GiftedChat component, in the renderMessage section:

shouldScrollTo={(offset: number) => {
    ref.current._messageContainerRef.current.scrollToOffset({
        offset: scrollViewHeight - offset // for inverted
    });
}}

[romanmashkovskiy]

@JonnyBurger
As I understood you do it this way:
<GiftedChat ......... renderMessage={this.renderMessage} ref={this.chatListRef} shouldScrollTo={(offset) => { this.chatListRef.current._messageContainerRef.current.scrollToOffset({ offset: scrollViewHeight - offset }); }} focusedMessage={focusedMessage} />
Could you please explain how to calculate offset and scrollViewHeight?
And my renderMessage:
renderMessage(props) { if (props.focusedMessage && props.currentMessage._id === props.focusedMessage.id) { props.shouldScrollTo(.....) } return <Message text={props.currentMessage.text}/>; }

[JonnyBurger]

@romanmashkovskiy By scrollViewHeight I meant scroll view position, sorry. It can be calculated by listening to onScroll event of the ScrollView. The offset is already given in the callback, it doesn't need to be calculated.

[romanmashkovskiy]

@JonnyBurger As I understood I should call shouldScrollTo in my renderMessage if current message is equal to focused. Correct?

[JonnyBurger]

Yes, in my chat message view I have the following:

    componentDidUpdate(prevProps) {
        if (
            this.props.currentMessage?._id === this.props.scrollToMessage &&
            !prevProps.scrollToMessage
        ) {
            this.ref.current?.measure((fx, fy, width, height, px, py) => {
                this.props.shouldScrollTo(py);
                Animated.timing(this.animatedValue, {
                    toValue: 100,
                    duration: 200
                }).start();
            });
        }
        if (
            prevProps.currentMessage._id === prevProps.scrollToMessage &&
            !this.props.scrollToMessage
        ) {
            Animated.timing(this.animatedValue, {
                toValue: 0,
                duration: 1000
            }).start();
        }
    }

[romanmashkovskiy]

@JonnyBurger I added ref to my GiftedChat component <GiftedChat ref={this.chatListRef} />. But this.chatListRef.measure is not a function

[JonnyBurger]

Add the ref to each message. Also it might be ref.current.measure.

[4RGUS]

Add the ref to each message. Also it might be ref.current.measure.

I couldn't find measure inside ref._messageContainerRef.current or ref.current.measure. Did any one get the exact location of this.

[darron1217]

@4RGUS
I solved it by calling FlatList's scrollToIndex

      giftedChatRef.current?._messageContainerRef?.current?.scrollToIndex({
        animated: true,
        index: 5,
      });