How to show selected value from modal on text component in 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>

Anus Kaleem Anus Kaleem · Accepted Answer · 2020-01-24T08:12:29

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

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

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

1 Answers