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>
);
};
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.
TouchableOpacity
component, pass
onLongPress
prop and pass the function to make your modal visible & store the clicked item
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.View
inside overlay View
, and pass the selected item data in itView
with options of emoji you want and make it right alignAnd you will get the expected output for sure