Marker Click Event on React Native Maps Not Working in React iOS

Marker click event on react native maps not working in react ios

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>

React Native Map clickable Markers with props on IOS

onMarkerPressed should receive pressed marker object keys-values pair properties and pass down to navigation.navigate('ChallengeScreen') as route parameters.

onMarkerPressed = (marker)=> {

const params = {marker}
  navigation.navigate('ChallengeScreen',params);
}
  render(){
    const {latitude, longitude, onloading,markers } = this.state;
        return(
          <View style={styles.container}>
            <MapView
            style={styles.mapview}
            loadingEnabled={true}
            region={{
                latitude: 49.4459,//latitude,
                longitude: 7.77151, //longitude,
                latitudeDelta: 0.00722,
                longitudeDelta: 0.00421
            }}
            > 
            {markers.map(marker => {
                return(
                    <MapView.Marker
                    key={marker.id}
                    coordinate={{
                        latitude: marker.latitude,
                        longitude: marker.longitude,
                    }}
                    onPress={()=>this.onMarkerPressed(marker)}
                    >
                    </MapView.Marker>
                )
            })}
        </MapView>
        </View>
        )
    }
  }

Note: onMarkerPressed changed to arrow function to avoid function binding with component class.

Check React Navigation passing parameters to routes for in-depht guide.

How to enable centering Marker on Map in IOS using React native?

you could either set

<MapView
moveOnMarkerPress={false}
...
/>

which would disable the android-behavior, or you could handle the MarkerPress on iOS and center the MapView on it, something like this:

 <MapView
    ...
    ref={ref => {
       this.map = ref;
    }}
    >
      {this.state.markers.map(marker => (
        <Marker
          ...
          onSelect=(({coordinate}) =>  this.map.animateCamera({center: coordinate}, { duration: 2000 }))
        />
      ))}
    </MapView>

Unable to Trigger React Navigation from React Native Maps

I figured out how to trigger an the onpress event by using onCalloutPress in the Marker:

<Marker
    key={id}
    coordinate={commlatlong}
    title={community.name}
    onCalloutPress={() => this.props.navigation.navigate("Community", { communityId: `${community._id}` })}>
    <Callout>
        <TouchableOpacity
            style={styles.communityButton}>
            <Text style={styles.communityButtonText}>{community.name}</Text>
            <Text style={styles.descButtonText}>{community.description}</Text>
        </TouchableOpacity>
    </Callout>
</Marker>

I am now able to navigate to show screens from the map. Thanks to this post:

Marker click event on react native maps not working in react ios

Additional source:

onCalloutPress Callback that is called when a callout is tapped by the user.

https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md

React Native Maps Custom Marker blocking Marker onPress

Fixed the issue by adding onSelect which is iOS specific. The onPress was only working for Android so don't know if this is the right answer but is working for me as of now.

React native maps callout press not triggering on IOS

After some additional research I found this open issue https://github.com/react-native-community/react-native-maps/issues/2223

The issue states that using provider={PROVIDER_GOOGLE} and a custom style on MapView is making onCalloutPress not trigger on IOS. It does trigger when using native provider.

Apparently there's an onPress event on the callout and using that makes it work on IOS as well. Here's a final solution working on both android and ios with google provider, it only trigger once on each platform:

import React, { Component } from "react";
import { View, StyleSheet, Text } from "react-native";
import MapView, { Marker, Callout, PROVIDER_GOOGLE } from "react-native-maps";

export default class MapTabs extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={styles.mapContainer}>
                <MapView
                    provider={PROVIDER_GOOGLE}
                    style={styles.map}
                    rotateEnabled={false}
                    mapType="standard"
                    initialRegion={region}
                >
                    <Marker
                        coordinate={markerCoordinate}
                        onCalloutPress={() => this.calloutPress()}
                    >
                        <Callout onPress={() => this.calloutPress()}>
                            <View>
                                <Text style={styles.calloutTitle}>My title</Text>
                                <Text style={styles.calloutDescription}>My description</Text>
                            </View>
                        </Callout>
                    </Marker>
                </MapView>
            </View>
        );
    }

    calloutPress() {
        console.log("hello!");
    }
}

const region = {
    latitude: 54.403664,
    longitude: 14.769657,
    latitudeDelta: 30,
    longitudeDelta: 30
};

const markerCoordinate = { latitude: 54.403664, longitude: 14.769657 };

const styles = StyleSheet.create({
    mapContainer: {
        width: "100%",
        height: "100%",
        zIndex: 0
    },
    map: {
        flex: 1
    },
    calloutTitle: {
        fontSize: 17,
        marginBottom: 5,
        fontWeight: "bold"
    },
    calloutDescription: {
        fontSize: 14
    }
});

If you don't want to add event listeners that aren't triggered, make the onPress and onCalloutPress platform dependent.

---

Related Topics