How can highlight selected item in flatlist in React Native?

Question

I am developing an application with React Native. There is a screen like in the picture and I am displaying messages with flatlist on this screen. I want to get a view like in picture 2 when a message is long clicked. I tried the package https://www.npmjs.com/package/react-native-highlight-overlay but I did not get the result I wanted. When I long click on any element in the flatlist, that element should come to the foreground and an extra box should open under it. How can I do this?

import React from 'react';
import { Text, View, FlatList, TouchableOpacity, } from 'react-native';

export const Screen = () => {

  const data = [
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
  ]


  const Card = ({ item }) => {
    return (
      <TouchableOpacity style={{ padding: 16, rowGap: 8, borderWidth:2, borderColor:"black", margin:16, borderRadius:16 }}>
        <Text>{item.title}</Text>
        <Text>{item.text}</Text>
      </TouchableOpacity>
    )
  }
  return (
    <View >
      <FlatList
        data={data}
        renderItem={({ item }) => <Card item={item} />}
      />
    </View>
  );
};

Answer 1

You don't have to use any package for this as far as you follow the below steps:

Note: You will be using modal from react-native to achieve this.

1. Assuming you're using TouchableOpacity component, pass onLongPress prop and pass the function to make your modal visible & store the clicked item
2. Now in modal, create a View (name it as Overlay view) & give background color of black with alpha 0.6 ('rgba(0,0,0,0.6)') so it will give you color of overlay.
3. Create a View inside overlay View, and pass the selected item data in it
4. Create another View with options of emoji you want and make it right align

And you will get the expected output for sure