Last active
April 8, 2018 07:00
-
-
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 file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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