Skip to content

Instantly share code, notes, and snippets.

@HerbertLim
Last active April 8, 2018 07:00
Show Gist options
  • Save HerbertLim/74fe6c753f56ecfed4ee9bf7185189ad to your computer and use it in GitHub Desktop.
Save HerbertLim/74fe6c753f56ecfed4ee9bf7185189ad to your computer and use it in GitHub Desktop.
Preventing generation of onPress event of MapView when touching Markers in React Native Maps,
// This issue happened only on iOS.
// In React Native Maps, touching a marker should generate only marker's onPress event.
// However, in iOS, MapView's onPress event is generated with marker's onPress event.
// I solved this issue by referencing this issue: https://github.com/react-community/react-native-maps/issues/758
// React Native Maps 를 사용할 때 iOS에서만 마커를 클릭할 때 MapView의 onPress 이벤트가 같이 발생한다.
// 이 이슈를 해결하기 위해서는 MapView.Marker의 onPress props의 이벤트 핸들러에
// e.stopPropagation(); 을 추가하여 MapView 로 이벤트가 전파되지 않도록 해야 한다.
// Previous code:
<MapView.Marker
key={i}
coordinate={{latitude: parseFloat(marker.lat), longitude: parseFloat(marker.lng)}}
style={{zIndex}}
onPress={(e) => this.onPressMarker(i) }
>
// Modified code. Watch line 23, onPress props. e.stopPropagation() is added.
<MapView.Marker
key={i}
coordinate={{latitude: parseFloat(marker.lat), longitude: parseFloat(marker.lng)}}
style={{zIndex}}
onPress={(e) => { e.stopPropagation(); this.onPressMarker(i) } }
>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment