onLongPress is not working in my application - react-native

Question

maybe someone can help me with that. I don't know why my onLongPress is not working. After starting my application it shows errors like in the bellow link:
https://imageupload.io/i/0eEdzuD7CI
Please help me!
import React, { useState } from "react";
import {
View,
StyleSheet,
Text,
Image,[enter image description here][1]
TouchableHighLight,
TouchableOpacity,
Dimensions,
Button,
Modal
} from "react-native";
import Icon from "react-native-vector-icons/FontAwesome"
var { width } = Dimensions.get("window");
const ListItem = (props) => {
const [modalVisible, setModalVisible] = useState(false)
return (
<View>
<Modal animationType="fade" transparent={true} visible={modalVisible} onRequestClose={() => {
setModalVisible(false)
}}>
<View>
<View>
<TouchableHighLight
underlayColor="E8E8E8"
onPress={() => {
setModalVisible(false)
}}
style={{
alignSelf: "flex-end",
position: "absolute",
top: 5,
right: 10
}}
>
<Icon name="close" size={20} />
</TouchableHighLight>
<Button title="Edit"
onPress={() => [
props.navigation.navigate("Product Form"),
setModalVisible(false)
]}
/>
<Button title="Delete"
// delete
/>
</View>
</View>
</Modal>
<TouchableOpacity
onPress={() => {
props.navigation.navigate("Product Detail", { item: props })
}}
onLongPress={() => setModalVisible(true)}
style={[styles.container, {
backgroundColor: props.index % 2 == 0 ? "white" : "gainsboro"
}]}
>
<Image
source={{
uri: props.image
? props.image
: 'https://cdn.pixabay.com/photo/2012/04/01/17/29/box-23649_960_720.png'
}}
resizeMode="contain"
style={styles.image}
/>
<Text style={styles.item}>{props.brand}</Text>
<Text style={styles.item} numberOfLines={1} ellipsizeMode="tail">{props.name}</Text>
<Text style={styles.item} numberOfLines={1} ellipsizeMode="tail">{props.category.name}</Text>
<Text style={styles.item}>$ {props.price}</Text>
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
padding: 5,
width: width
},
image: {
borderRadius: 50,
width: width / 6,
height: 20,
margin: 2
},
item: {
flexWrap: "wrap",
margin: 3,
width: width / 6
}
})
export default ListItem;