button click inside callout is not working in react native map-android

Question

touchable opacity inside the caaout not working.Actually, i need to hide the custom callout view once the close button inside the same callout is clicked.Unfortunately, my function is not fire whicle clicking on the close button

`

const closeinforwindow=(e)=>{
  console.log("close button is clicked");
}
 

 <SafeAreaView style={{flex: 1}}>
      <View style={Interfacestyle.container}>
        <MapView mapType="satellite"   style={Interfacestyle.map}  region={getInitialState()}>
          {markers.map((marker, key) => {
              return(
                  <Marker
                    key={key}
                    coordinate={marker.latlng}
                    title={marker.title}
                    description={marker.description}
                    calloutOffset={{ x: -8, y: 10 }}
                    calloutAnchor={{ x: 0.5, y: 0.2 }}
                    
                   >
                    <Image source={{uri: marker.image}} style={{width: 42, height: 42,transform: [{ rotate : `${marker.heading} deg`}]}}/>
                    <Callout tooltip >
                      <View style={[Interfacestyle.info_windowwrapper]}>
                         <View style={[Interfacestyle.info_windowcontainer]}>
                            <View  style={[Interfacestyle.inforwwindowheader]} >
                                  <View style={{width:"92%",alignItems:'center'}}><Text style={[Interfacestyle.inforwwindowheadertext]}>{marker.name}</Text></View>
                                  <View style={[Interfacestyle.menuicon]}>
                                  <TouchableHighlight  onPress={(e)=>{closeinforwindow(e)}}>
                                       <Icon name="close" color="#fff" size={16} /> 
                                  </TouchableHighlight>
                                  </View>
                            </View>
                      </View>
                    </Callout>

                  </Marker>
                  
              )
          })} 

        </MapView>
   <View>
</SafeAreaView

`

Kindly help me.

Answer 1

This is an old thread, but it still seems relevant: https://github.com/react-native-maps/react-native-maps/issues/226#issuecomment-220356079

Android map callouts don't support buttons inside of them, only an onPress event for the entire callout. This is a limitation of the Google Maps library on Android and react-native-maps can't do anything about it.

Sounds like you'll either need to ditch the functionality or refactor your approach to use the onPress event for Callout.