In v2.1.0, Changes in message list not automatically triggering the message list to scroll down to bottom/End and no way to add reference to the GiftedChat functional component

[fahad86]

Issue Description

Changes in message list is not automatically triggering the message list to scroll down. (Basically scrollToBottom inside GiftedChat.js is not getting triggered on new messages)

Steps to Reproduce / Code Snippets

• Open and existing chat implementation using react-native-gifted-chat@2.1.0
• Send / Receive messages

Expected Results

The list should scroll down to the bottom to reveal the newly sent / received messages

Additional Information

• Nodejs version: 20.1.0
• React version: 18.2.0
• React Native version: 0.71.8
• react-native-gifted-chat version: 2.1.0
• Platform(s) (iOS, Android, or both?): both
• TypeScript version: 5.0.4

[fukemy]

you can do like this:

useState(() => {
   if(message[0].state === 'sending' && message[0].user._id === currentUserId){
       gitedRef.current.scrollToBottom()
   }
} ,[message]}

[fahad86]

you can do like this:

useState(() => {
   if(message[0].state === 'sending' && message[0].user._id === currentUserId){
       gitedRef.current.scrollToBottom()
   }
} ,[message]}

We used to do that in the past but with the change to functional components in version 2.1.0 not able to set a reference to giftedChat. Setting a ref yeilds the following error:

ERROR Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

[fahad86]

can you please let me know how a reference can be set in the latest version of react-native-gifted-chat

[fukemy]

Im using 0.16.3 and mofidy a lot of code for my job. If you using giftedChat lasted version, you can see the props: scrollToBottom (Bool) - Enables the scroll to bottom Component (Default is false)

[fukemy]

like this

<GiftedChat
 ...
scrollToBottom={(message[0].state === 'sending' && message[0].user._id === currentUserId}
...
/>

[karthikkoppa]

giftedChatRef.current._listRef._scrollRef.scrollTo(1)' & Working with "react-native-gifted-chat": "^2.4.0", & "react-native": "0.71.8", < GiftedChat messageContainerRef={giftedChatRef} />

[ahmadardal]

       const giftedChatRef = useRef<any>();

        <GiftedChat
        ... other code ...
        messageContainerRef={giftedChatRef}
        ... other code ...
       </GiftedChat>

Then anywhere in your code, for example onSend, you can call this

      if (giftedChatRef.current) {
      giftedChatRef.current._listRef._scrollRef.scrollToEnd();
      }