How to show selected value from modal on text component in react-native - react-native

Question

How to set selected value from modal on text component in react-native.
I am using modal component from 'react-native'.
import { StyleSheet, View, Text, TouchableOpacity, Image,Modal,} from 'react-native'
<View style={styles.vwstyle}>
<Text style={styles.texthead}>You are Interested in</Text>
<View style={styles.vwside}>
<Modal
animationType="fade"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
}}>
<View style={styles.vwmodal}>
<TouchableOpacity style={styles.touchmodal}
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text style={styles.txtmodal}>Man</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchmodal}
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text style={styles.txtmodal}>Woman</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchmodal}
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text style={styles.txtmodal}>Everyone</Text>
</TouchableOpacity>
</View>
</Modal>
<TouchableOpacity
style={{flexDirection:'row'}}
onPress={() => {this.setModalVisible(true);}}>
<Text style={styles.txtselected}>Woman</Text>
<Image
source={require('../Images/rightarrow.png')} style={{ height: 20, width: 20, marginTop: 8, marginRight: 5 }} />
</TouchableOpacity>
</View>
</View>

Answer 1

You can use state to hold the values being pressed. I am including a code snippet here for your reference.
constructor(props) {
super(props);
this.state = {
otherStateVariables..... ,
pressedOption: ""
}
}
render() {
<View style={styles.vwstyle}>
<Text style={styles.texthead}>You are Interested in</Text>
<View style={styles.vwside}>
<Modal
animationType="fade"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
}}>
<View style={styles.vwmodal}>
<TouchableOpacity style={styles.touchmodal}
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
/* Add this line to set your state on onPress handler*/
this.setState({pressedOption:"Man"})
}}>
<Text style={styles.txtmodal}>Man</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchmodal}
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
/* Add this line to set your state on onPress handler*/
this.setState({pressedOption:"Woman"})
}}>
<Text style={styles.txtmodal}>Woman</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchmodal}
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
/* Add this line to set your state on onPress handler*/
this.setState({pressedOption:"Everyone"})
}}>
<Text style={styles.txtmodal}>Everyone</Text>
</TouchableOpacity>
</View>
</Modal>
<TouchableOpacity
style={{flexDirection:'row'}}
onPress={() => {this.setModalVisible(true);}}>
<Text style={styles.txtselected}>Woman</Text>
<Image
source={require('../Images/rightarrow.png')} style={{ height: 20, width: 20, marginTop: 8, marginRight: 5 }} />
</TouchableOpacity>
</View>
</View>
}
After setting the state, you can use that state variable anywhere in your code by using
this.state.pressedOption