Rob Rob - 3 months ago 24
Javascript Question

react-native map customized css or style

Is there a way to customize a MapView like you can with regular javascript? I'd like to do a theme like this: file:///Users/robertkelly/Downloads/snazzy-maps-example-ultra-light-with-labels-style.html

and I'm able to get it working in vanilla javascript: http://jsbin.com/fodapo/edit?js,output

but can't seem to figure out how to implement this in React-Native since there is no standard google maps api to give input to the mapview like:

[{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]}]

Answer

I don't know a method to style the RN build-in MapView yet, but I think the possibility to define a custom map style would be a nice feature and should maybe added to the react native productpains.

Meanwhile you should have a look at the react-native-mapbox-gl component (android/ios). You can add a custom map style to react-native-mapbox-gl created using Mapbox Studio (examples).