CODEWITHSUNDEEP
react-nativereact-native-mapscalloutsreact-native-mapbox-gl
javi
javi

Reputation: 31

Problems with react-native-maps callout

I'm new to React Native and I'm having problems in both platforms with react-native-maps Callout. I'm using Apple maps on iOS and Google ones on Android. Callout shows title and image.

On iOS when I have several markers in the map, and some of them are very near each other, when clicking the marker the callout shows for a second but then it hides and shows the one from the nearest marker. I have searched for a solution and found people using some workarounds like setting pointerEvents="auto" but nothing worked for me.

On Android when clicking the marker the callout shows correctly but the image is not shown. I also searched and found a workaround including the image inside a but this didn't work for me at all, it works better, because the image is shown most of the times, but not always. So for now I'm only showing the title on Android.

I have tried using last react-native-maps version 0.28.0 and same behavior. I haven't tried Google Maps on iOS, I think that will be the following step if I can't find a solution.

I also tried react-native-mapbox-gl and works fine on iOS, the Callout shows correctly with title and image, but on Android I install the app and it opens for a second and then closes throwing MainActivity not found error. If I go back to the previous commit without react-native-mapbox-gl then it installs and opens correctly. I have thought also about using react-native-mapbox-gl on iOS and react-native-maps on Android. But, is it really so hard this to work with maps in React Native?

Thanks in advance.

Upvotes: 0

Views: 1280

Answers (1)

Faisal Taibi
Faisal Taibi

Reputation: 21

I had the same issue and solved it adding this to the Marker anchor={{x: 1, y: 1}} pointerEvents="auto"

Upvotes: 0

Related Questions