react-native-maps: UrlTile and Polyline - zIndex/Overlaying not working

Viewed 1353

I am using react-native-maps. I use the <MapView.UrlTile/> and on top I am trying to visualize a <MapView.Polyline />. However, the Polyline is not visible. It lays under the passed URL Template. I can tell that, because when I zoom and pinch, I see the Polyline with the underlaying standard base map (on Android its google maps) for a brief time of rendering/loading the map. With markers, this problem does not occur.

Any ideas how I get the Polyline on top of the URL Template?

1 Answers

Apparently zIndex on PolyLine defaults to 0 while the Tiles zIndex defaults to -1 https://github.com/airbnb/react-native-maps/issues/1181. However, that brings the PolyLine not into the foreground.

Setting the zIndex of the Tiles to negative while setting the zIndex of the Polyline to something positive solves the problem.

Related