React Native onPress not working while using modal

Question

I am having a modal that displays image, I am using an image viewer which will display the image for me and also zoom etc. Because I dont have direct control over how the modal is styled, image-viewer gave an option to give react element for renderHeader, here is my code below

class EventDetailsScreen extends Component {

  constructor(props){
    super(props);
    this.state = {
      token: null,
      event: null,
      eventImages: [],
      isModalVisible: false,
      dataFetched: false,
    }
  }

  showModal = (image) => {
    this.setState({
      isModalVisible: true,
      currentImageIndex: image.index
    });
  }

  closeModal = () => {
    this.setState({isModalVisible: false});
  }

  render() {
    return (
      <Container style={{backgroundColor: "#F5F5F5"}}>
        <BackHeaderComponent {...this.props} headerName="Event Details" />
        <Content contentContainerStyle={{
          flex: 1, 
        }}>
          {
            this.state.dataFetched ?
            <EventDetails 
              {...this.state}
              showModal={this.showModal}
              closeModal={this.closeModal}
            />
            :<LoadingIndicatorcomponent />

          }
        </Content>
      </Container>
    );
  }
}


const EventDetails = props => (
  <ScrollView style={styles.eventContainer}>
      <View>
          <Text style={styles.eventName}>{props.event.name}</Text>
          <Text style={styles.eventDetails}>
              {props.event.from_date} - {props.event.to_date}
          </Text>
      </View>
      <View style={styles.imageContainer}>
          {props.eventImages.map(image => (
            <TouchableHighlight onPress={() => props.showModal(image)} key={image.id}>
              <Image 
                  source={{uri: image.url}}
                  style={styles.image}
              />
            </TouchableHighlight>
          ))}
      </View>
      <ImageViewerModal {...props}></ImageViewerModal>
  </ScrollView>
)

class ImageViewerModal extends Component {
  render(){
    return (
      <Modal 
        visible={this.props.isModalVisible}
        transparent={true}
        animationType="slide"
        onRequestClose={() => this.props.closeModal()}>

          <ImageViewer 
            imageUrls={this.props.eventImages}
            index={this.props.currentImageIndex}
            enableImageZoom={true}
            loadingRender={() => (<LoadingIndicatorcomponent />)}
            renderHeader={() => (
              <View style={modalStyles.header}>

                <TouchableOpacity onPress={this.props.closeModal} style={modalStyles.leftHeader}>
                  <MaterialIcon name="close" size={25} color="#fff"></MaterialIcon>
                </TouchableOpacity>

                <TouchableOpacity onPress={() => this.props.closeModal()} style={modalStyles.rightHeader}>
                  <FeatherIcon name="download" size={25} color="#fff"></FeatherIcon>
                </TouchableOpacity>

              </View>
            )}
          >
          </ImageViewer>
      </Modal>
    )
  }
}

When I press on either close or download, Nothing happens. I tried with TouchableHighlight too.

These are my styles

const modalStyles = StyleSheet.create({
  header: { 
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  leftHeader: {
    marginTop: 35,
    marginLeft: 25,
    width: 25,
    height: 25,
  },
  rightHeader: {
    marginTop: 35,
    marginRight: 25,
    width: 25,
    height: 25,
  },
})

Answer 1

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.)