I'm having some troubles trying to make this modal work. I have a flatlist with a lot of data inside and each item should be clickable to open a modal. Right now when im clicking the item in the flatlist nothing happens. What am I missing?
..........................................................................................................................................................................................................
export default function Home() {
const [modalVisible, setModalVisible] = useState(false);
renderItem = ({ item, index }) => {
return (
<View>
<TouchableOpacity
style={{
margin: 15,
padding: 10,
borderRadius: 10,
}}
onPress={() => getItem(item)}>
<Text style={{ color: colors.text, fontWeight: '700' }}>
{item.name}
</Text>
<Text style={{ color: colors.text }}>{item.company}</Text>
<Text style={{ color: colors.text }}>{item.info}</Text>
</TouchableOpacity>
</View>
);
};
const getItem = (item) => {
return (
<Modal
hardwareAccelerated={true}
animationType="slide"
visible={modalVisible}>
<View style={{ flex: 1, backgroundColor: '#fff' }}>
<TouchableOpacity
onPress={() => {
setModalVisible(!modalVisible);
}}></TouchableOpacity>
</View>
</Modal>
);
};
return (
<View style={{ flex: 1, backgroundColor: colors.background }}>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 19,
}}>
<TextInput
style={[
{
flex: 1,
backgroundColor: '#fff',
borderRadius: 10,
shadowColor: '#888888',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 3,
},
]}
placeholder="Sök"
placeholderTextColor="#000"
onChangeText={(text) => setSearch(text)}
value={search}
/>
</View>
<View>
<FlatList
data={filteredDataSource}
keyExtractor={(item, index) => index.toString()}
initialNumToRender={5}
showsVerticalScrollIndicator={true}
renderItem={renderItem}
style={{ height: 475 }}
/>
</View>
</View>
);
}