How to customize/style MapView in Expo on IOS and Android?

Question

I have generated a style on https://mapstyle.withgoogle.com, which gives me a JSON.

I followed the information here: https://github.com/airbnb/react-native-maps

For some reason, the styling does not work.

Answer 1

On IOS, by default, it is not google maps what opens.
Solution:
you need to add the following property to MapView: provider = { MapView.PROVIDER_GOOGLE }

On Android, it should work right away.

Here is a working example:

import React from "react"; 
import { StyleSheet, Text } from "react-native"; 
import { MapView, Constants } from 'expo';

export default class MapScreen extends React.Component {
      render() {
        return (
          <MapView
            style = { styles.container }
            provider = { MapView.PROVIDER_GOOGLE }
            customMapStyle = { generatedMapStyle }
          />
        );} 
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

const generatedMapStyle = [...] // just paste the JSON here.

Answer 2

Also, make sure you have enabled the Maps SDK for iOS/Android services in your Google Cloud Platform, as well as including your API key in app.json. It took me 4 builds to find out....