Issue making model pop up onPress of flatlist - react-native

Question

I have a flatlist of cards, and I want a modal to appear when someone presses the card. Pressing the card doesn't seem to do anything though, so I'm wondering what I've done wrong. In my code at the top I have defined the state for the visibility of the modal, if you scroll down to the card you'll see onPress changes the state. Below the card is the actual modal which uses the state of the visible property to display it or not.
Code:
class HomeScreen extends React.Component {
state = {
isModalVisible: false
};
toggleModal = () => {
this.setState({ isModalVisible: !this.state.isModalVisible });
};
render() {
return (
<View style = {{flex:1}}>
<Header
centerComponent={{ text: 'MY MACROS', style: { color: '#fff', letterSpacing: 2} }}
containerStyle={{
backgroundColor: '#5BC0EB',
}}
/>
<Progress.Bar progress={0.7} width={null} height={10} borderRadius = {0} color = {'lightgreen'}/>
<ScrollView>
<FlatList
data = {Macros}
renderItem = {({ item }) => (
<TouchableOpacity>
<Card style = {{justifyContent: 'center', margin: 1, backgroundColor: '#ffff', borderRadius: 25}} onPress = {() => {this.toggleModal}}>
<Card.Content>
<View style = {{flexDirection: 'row', justifyContent: 'space-between'}}>
<View style = {{flexDirection: 'column', justifyContent: 'space-between'}}>
<Title style = {{paddingTop: 20, fontSize: 35, fontWeight: 'bold',color: 'black', letterSpacing: 2}}>{item.total} {item.unit}</Title>
<Text style= {{fontSize: 30, color: 'black', letterSpacing: 2, fontWeight: '100'}}>{item.title}</Text>
</View>
<MainProgress/>
</View>
</Card.Content>
<Card.Actions>
</Card.Actions>
</Card>
<Modal isVisible = {this.state.isModalVisible}>
<View>
<Text>Test</Text>
<Button title = "Cancel" onPress = {this.toggleModal}/>
</View>
</Modal>
</TouchableOpacity>
)}
keyExtractor = {item => item.key}
/>
</ScrollView>
<Button color = {'#5BC0EB'} onPress={popUpForm}>Add New Macro</Button>
</View>
);
}
}

Answer 1

According to your code, you need to pass your toggleModal function to TouchableOpacity in order to display your Model. Check below sample for more information.
import React, { Component } from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, TouchableOpacity, Modal, Button } from 'react-native';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
export default class App extends Component {
state = {
isModalVisible: false
}
toggleModal = () => {
this.setState({
isModalVisible: !this.state.isModalVisible
});
};
renderItem = ({ item }) => (
<TouchableOpacity style={styles.item} onPress={this.toggleModal}>
<Text style={styles.title}>{item.title}</Text>
</TouchableOpacity>
)
render() {
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={this.renderItem}
keyExtractor={item => item.id}
/>
{
this.state.isModalVisible &&
<Modal
visible={this.state.isModalVisible}
transparent={true}
animationType='slide'
onRequestClose={this.toggleModal}
>
<View style={styles.modelStyle}>
<View style={styles.modelWrapperStyle}>
<Text>Test</Text>
<Button title="Cancel" onPress={this.toggleModal} />
</View>
</View>
</Modal>
}
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 50,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
modelStyle: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.5)'
},
modelWrapperStyle: {
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ffffff',
padding: 20,
width: '90%'
}
});
Change this according to your requirement.
Hope this helps you. Feel free for doubts.