Marker click event on react native maps not working in react ios
To add to Anil's answer, you can use the 'onCalloutPress' callback on Marker to handle the callout press event, so that you don't need a TouchableHighlight in the callout:
<MapView.Marker
coordinate={marker.coordinate}
title={marker.title}
description={marker.description}
onCalloutPress={this.markerClick}>
<MapView.Callout tooltip style={styles.customView}>
<View style={styles.calloutText}>
<Text>{marker.title}{"\n"}{marker.description}</Text>
</View>
</MapView.Callout>
</MapView.Marker>
You just need to add <MapView.Callout>
in <MapView.Marker>
tag.
Custom callout- you can customize marker info click window as your requirement.
I have used TouchableHighlight
for marker info window click
, so that you can able to redirect user to other screen on click of custom callout
.
<View style={styles.mainContainer}>
<MapView style={styles.map}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0,
longitudeDelta: 0.0,
}}>
{this.state.markers.map((marker) => (
<MapView.Marker
coordinate={marker.coordinate}
title={marker.title}
description={marker.description}>
<MapView.Callout tooltip style={styles.customView}>
<TouchableHighlight onPress= {()=>this.markerClick()} underlayColor='#dddddd'>
<View style={styles.calloutText}>
<Text>{marker.title}{"\n"}{marker.description}</Text>
</View>
</TouchableHighlight>
</MapView.Callout>
</MapView.Marker>
))}
</MapView>
</View>