I have developed a Chat App using React Native, I have also implemented a feature which is present in WhatsApp & other Chat Apps -> if a message is a reply of a particular message, if we tap on it, it will scroll us to that specific message just like shown in the image below. Now, I have managed to develop the scrolling feature when a reply message is pressed, but unable to highlight that view of message for a particular duration like WhatsApp does. How can I implement the same?
Repied message highlight image
MessageItem.js
const MessageItem = ({
message,
scrollViewRef,
replyMessageIndex,
}) => {
return (
<TouchableOpacity>
{message.reply && (
<TouchableOpacity
style={styles.replyContainer}
onPress={() => {
scrollViewRef.current.scrollTo({
animated: true,
y: replyMessageIndex,
});
}}>
<Text>{message.reply.text}</Text>
)}
</TouchableOpacity>
)}
<Text>{message.text}</Text>
</TouchableOpacity>
);
};
ChatScreen.js -> ScrollView
didn’t include all the code because it was a large file.
<ScrollView
ref={scrollViewRef}
showsVerticalScrollIndicator={false}>
{messages.length > 0 ? (
messages.map((message, index) => {
// finding the replied message if it is present. No problem here, working fine.
let replyMessageIndex = null;
if (message.reply) {
replyMessageIndex = messages.findIndex(
msg => msg._id === message.reply._id,
);
}
return (
<MessageItem
key={index}
message={message}
scrollViewRef={scrollViewRef}
replyMessageIndex={replyMessageIndex}
/>
);
})
) : (
<View style={styles.noChatContainer}>
<Text style={styles.noChatText}>Start Chatting</Text>
</View>
)}
</ScrollView>
So, as I said earlier, how can I actually highlight the scrolled message for, like a second so that user gets to know that “oh it was a reply to this message”. I am able to scroll to that message but not animate/highlight it.
Any solution would be really appreciated!