TouchableOpacity onPress() not working with react-native-modal

Question

I am trying to get TouchableOpacity working with react-native-modal. When I press the button, nothing happens.

Here is my code, on pressing the button, there is no press animation and no alert appears:

<Modal
  isVisible={this.state.modalVisible}
  onBackdropPress={() => this.setState({ modalVisible: false })}
  deviceWidth={Dimensions.get('window').width}
  deviceHeight={Dimensions.get('window').height}
  backdropColor={'rgba(29, 36, 40, 0.5)'}>
  <View style={styles.modal}>
    <Text style={styles.modalTitle}>Test modal</Text>
    <View style={modalButtons}>
      <TouchableOpacity onPress={() => alert('hello!')}><Text style={styles.modalButton}>Test</Text></TouchableOpacity>
      <TouchableOpacity onPress={() => this.setState({ modalVisible: false })}><Text style={styles.modalButton}>Close</Text></TouchableOpacity>
    </View>
  </View>
</Modal>

I am importing TouchableOpacity from react-native, not react-native-gesture-handler (one solution mentioned this; all it did for me was prevent the buttons from being invisible).

EDIT: I've narrowed it down to the View around the buttons. When I remove this the following style, it works:

  modalButtons: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 30,
  },

Is there a way to keep this flex working? I would like for the buttons to display side by side.

Can you try wrapping TouchableOpacity by <React.Fragment> or <View>? — Divye Shah
Apologies for the late reply, it didn't seem to work @DivyeShah — Robert Berge
Does removing margin make any difference? Try using TouchableWithoutFeedback to check if it makes any difference? — Divye Shah
Using TouchableWithoutFeedback fixed the issue, but it doesn't show any text. — Robert Berge
Wrapping the TouchableOpacity by TouchableWithoutFeedback shows text but it goes back to not responding to any input. — Robert Berge

Luis Barrientos Fajardo Luis Barrientos Fajardo · Accepted Answer · 2019-12-05T15:16:36

I had the same problem. Check that your TouchableOpacity is imported from the "react-native" module and not from anything else. (Mine was in react-native-gesture-handler.)

TouchableOpacity onPress() not working with react-native-modal

1 Answers