概要

先日【ReactNative】react-native-mapsを導入するという記事を書いて、react-native-mapsを導入しました。
そこでちょっとハマった事象があるので紹介します。

簡単に言うと、MapコンポーネントにonPressで地図を押下した際のイベントを指定した上で、Map上にMarkerを配置し、こちらにもonPressを指定している場合に、MarkerをタップしてonPressを発火させるとMapのonPressも同時に発火してしまうというものです。

TestMap.tsx

import React from 'react';
import { Alert } from 'react-native'
import MapView, { Region, Marker, LatLng } from 'react-native-maps';

render(){

    // 初期表示位置
    const initialRegion : Region = {
        latitude : 35.689521,
        longitude : 139.691704,
        latitudeDelta : 0.0460,
        longitudeDelta : 0.0260,
    }

    // マーカーの表示位置
    const coordinate : LatLng = {
        latitude : 35.689421,
        longitude :139.691604
    }
    <MapView initialRegion={initialRegion} onPress={()=> { Alert.alert("マップを押したよ") }} >
        <Marker coordinate={coordinate} onPress={()=>{ Alert.alert("マーカーを押したよ") }} />
    </MapView>
}

バージョン情報

"react-native": "0.61.5",
"react-native-maps": "^0.26.1",
"native-base": "^2.13.8",

対処法

MarkerのonPressにMapEvent型の引数を指定してstopPropagation()を実行します。
これによりMarker→Mapへのイベントの伝播が止まります。

<Marker coordinate={coordinate} onPress={(e : MapEvent) => {
            // マップにonPressイベントが伝播するのを止める 
            e.stopPropagation();
            Alert.alert("マーカーを押したよ")
        }} />

おわりに

react-native-mapsを使っていて、マップをタップしてマーカーを置き、マーカーをタップした時に何かをするというのはよくあるパターンだと思います。
一度対応を覚えればなんてことない内容なのですが、備忘として残しておきます。