From 501e42196df4a92eaf9795a83ac7b8b7350904a0 Mon Sep 17 00:00:00 2001
From: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>
Date: Fri, 26 Jan 2024 17:43:57 -0300
Subject: [PATCH] feat: adds scroll when a new quote is added to the list
 (#5516)

---
 .../components/Quotes/Quotes.tsx              | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/containers/MessageComposer/components/Quotes/Quotes.tsx b/app/containers/MessageComposer/components/Quotes/Quotes.tsx
index e35d98e99..7b2eb6bd4 100644
--- a/app/containers/MessageComposer/components/Quotes/Quotes.tsx
+++ b/app/containers/MessageComposer/components/Quotes/Quotes.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { FlatList } from 'react-native';
 
 import { Quote } from './Quote';
@@ -6,9 +6,29 @@ import { useRoomContext } from '../../../../views/RoomView/context';
 
 export const Quotes = (): React.ReactElement | null => {
 	const { selectedMessages, action } = useRoomContext();
+	const nQuotesRef = useRef(0);
+	const listRef = useRef<FlatList>(null);
+
+	useEffect(() => {
+		if (nQuotesRef.current && nQuotesRef.current < selectedMessages.length) {
+			setTimeout(() => {
+				listRef.current?.scrollToEnd({ animated: true });
+			}, 100);
+		}
+		nQuotesRef.current = selectedMessages.length;
+	}, [selectedMessages.length]);
 
 	if (action !== 'quote') {
 		return null;
 	}
-	return <FlatList data={selectedMessages} renderItem={({ item }) => <Quote messageId={item} />} horizontal />;
+
+	return (
+		<FlatList
+			ref={listRef}
+			data={selectedMessages}
+			renderItem={({ item }) => <Quote messageId={item} />}
+			horizontal
+			keyExtractor={item => item}
+		/>
+	);
 };