Unable to execute onPress of TouchableOpacity or TouchableHighlight if I use button instead it works what am I doing wrong?

Question

I have created a MyAlertBox.js file. For testing using like below.

render() {
       return (
               <MyAlertBox title="Testing" message="Worked?" show={true} />
       );
     }

inside Home.js. the MyAlertBox is like below.

export default class MyAlertBox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Alert_Visibility: props.show,
            showme: props.show
        };
    }

    ok_Button (){
        this.setState({showme:false,Alert_Visibility:false});
    }

    render() {
        if (!this.state.Alert_Visibility)
            return (<View><Text>Suppose to be alertbox.</Text></View>);
        else
            return (
                <View style={styles.MainContainer}>
                    <Modal
                        visible={this.state.Alert_Visibility}
                        transparent={true}
                        animationType={"fade"}
                        onRequestClose={() => { console.warn('closing.');this.Show_Custom_Alert(false)}} >

                        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                            <View style={styles.Alert_Main_View}>
                                <Text style={styles.Alert_Title}>{this.props.title}</Text>
                                <View style={{ width: '100%', height: 2, backgroundColor: '#fff' }} />
                                <Text style={styles.Alert_Message}> {this.props.message} </Text>
                                <View style={{ width: '100%', height: 1, backgroundColor: '#fff' }} />
                                <View style={{ flexDirection: 'row', height: '30%' }}>
                                    <TouchableOpacity
                                        style={styles.buttonStyle}
                                        onPress={this.ok_Button.bind(this)}
                                        activeOpacity={0.7}>
                                        <Text style={styles.TextStyle}> OK </Text>
                                    </TouchableOpacity>
                                    {/* <Button title="OK" onPress={this.ok_Button.bind(this)} /> */}
                                    <View style={{ width: 1, height: '100%', backgroundColor: '#fff' }} />
                                    <TouchableHighlight
                                        style={styles.buttonStyle}
                                        onPress={this.ok_Button.bind(this)}
                                        activeOpacity={0.7} >
                                        <Text style={styles.TextStyle}> CANCEL </Text>
                                    </TouchableHighlight>
                                    {/* <Button title="CANCEL" onPress={this.ok_Button.bind(this)} /> */}
                                </View>
                            </View>
                        </View>
                    </Modal>
                </View>
            );
    }
}

Here the alert box is showing but unable to click on 'OK' or 'cancel' if I change TouchableOpacity or TouchableHightlight to Button it gets called and working fine. what am I doing wrong?

please advice. Thanks.

Answer 1

Make sure you import Touchable from correct package. I imported class from 'react-native-gesture-handler' which suppose to be 'react-native'. The code is ok.