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(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 } horizontal />; + + return ( + } + horizontal + keyExtractor={item => item} + /> + ); };