Custom map styling in react-native-maps not rendering, reverts to basic/standard map style

Question

Working on a ReactNative App and I am trying to edit the map style.

I am following the instructions on "https://github.com/react-native-community/react-native-maps".

For IOS the docs suggest the below.

I.e:

1) Adding a mapStyle = [JSON being generated from https://mapstyle.withgoogle.com/].

2) Importing PROVIDER_GOOGLE

3) Adding 'customMapStyle' & 'provider' props (see below)

However, even though I have manually checked the JSON (namely that the colours are all black and grey, as per the custom map I want) The rendered map is still coming out in the standard blue and greens?

Oddly my markers are changing from pins to some android looking pins, so something is happening.

Any ideas welcome.

Thanks

import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'

MapStyle = [ ... ]

render() {
  return (
    <MapView
      region={this.state.region}
      onRegionChange={this.onRegionChange}
      provider={PROVIDER_GOOGLE}
      customMapStyle={MapStyle}
    />
  );
}

Answer 1

I did the same mistake of fetching the styles from a local json file and it didn't work. Here's a work around - save the json styles in a var and pass it to customMapStyle. Have a read : Custom google map styles in React Native - medium.com

Answer 2

First go the official side i.e https://mapstyle.withgoogle.com/ and get the json for your style value and copy to the raw folder in resources

And then apply on your onMapready() like this

MapStyleOptions mapStyleOptions = MapStyleOptions.loadRawResourceStyle(this, R.raw.style_json);
mGoogleMap.setMapStyle(mapStyleOptions);