React-native-gifted-chat: Question: Call scroll to bottom programmatically

[Hirbod]

Hi,

how can I call scrollToBottom programmatically? The reason why I am asking: when the user scrolled up and sends a new message, it stays at the position. I would like to call a method to scroll down in this case.

[jerearaujo03]

+1

[Hirbod]

@jerearaujo03 it's

this.giftedChatRef.scrollToBottom();

Just set a ref to the GiftedChat component.

   ref={ref => this.giftedChatRef = ref}

or use React.createRef() and call it with this.giftedChatRef.current.scrollToBottom();

[jerearaujo03]

I'm getting ref = undefined

[jerearaujo03]

Ok, it's working when I send a message (onSend), but I want to call it when the chat render for first time (maybe on componentDidMount or on render)

[Hirbod]

If you want to use it on componentDidMount, you will have to use React.createRef.

Add

this.yourRef = React.createRef(); inside your Class or Class Constructor.
Add

ref={this.yourRef} to the Gifted Chat component.
On componentDidMount, add this.yourRef.current.scrollToBottom().
If you still get an undefined error, try wrapping a setTimeout of 100ms around it (but it should work)

[jerearaujo03]

My idea is to wrap it with setTimeout, but can't access ref, i'm getting this error:

[Hirbod]

you have to use a arrow function or .bind(this) on your function.

[jerearaujo03]

    setTimeout(() => {
      this.giftedChat.scrollToBottom();
    }, 1000);

Thanks for answering, but not working :/

[Hirbod]

As I said, use React.createRef() and call this.giftedChat.current.scrollToBottom(). It is working, as I am also using it. You need to make sure that your component is created on time and maybe dig into some principles of JS

[jerearaujo03]

It's working, i forgot the .current
Thanks a lot!