feat: adds scroll when a new quote is added to the list (#5516)

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}
+		/>
+	);
 };