react-native-maps custom map style

Question

I created a json using google maps styling wizard. I then set that to a const under render and set that const to my MapView style but it renderers nothing when I do.

I am not sure the issue, Ideally I would like to have the style in a separate file but I was trying to start small.

How can I fix the current issue I am having as well as import and use the style from a separate file?

Here is a snack of my code that reproduces my exact error as well as the code below.

export default class Map extends React.Component {

 
  render() {
    const mapStyle = [
      {
        "featureType": "landscape.man_made",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.attraction",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.business",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.business",
        "elementType": "labels.text",
        "stylers": [
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "poi.government",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }
    ]

    return (
     <View style={{...StyleSheet.absoluteFillObject}}>
      <MapView
        style={mapStyle}
        provider={PROVIDER_GOOGLE}>
      </MapView>

      </View>
    );
  }
}

Answer 1

The custom google maps styling must be passed to the customMapStyle prop and you need to set a specific width and height in the normal style prop of the MapView. Setting absoluteFillObject does something different than you might have thought and according to the react-native documentation there is

Currently, there is no difference between using absoluteFill vs. absoluteFillObject.

Thus, absoluteFill is for the following use case.

A very common pattern is to create overlays with position absolute and zero positioning (position: 'absolute', left: 0, right: 0, top: 0, bottom: 0), so absoluteFill can be used for convenience and to reduce duplication of these repeated styles.

This will not set a height and a width! We need to do this manually which is documented here.

The following solves your problem.

const styles = ScaledSheet.create({
  map: {
width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    
  },
...

The JSX component.

return (
     <View style={{...StyleSheet.absoluteFillObject}}>
      <MapView
        style={styles.map}
        customMapStyle={mapStyle}
        provider={PROVIDER_GOOGLE}>
      </MapView>

      </View>
    );

Here is the full solution.

export default class Map extends React.Component {

  render() {
    const mapStyle = [
      {
        "featureType": "landscape.man_made",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.attraction",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.business",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.business",
        "elementType": "labels.text",
        "stylers": [
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "poi.government",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }
    ]
    
    return (
     <View style={{...StyleSheet.absoluteFillObject}}>
      <MapView
        style={styles.map}
        customMapStyle={mapStyle}
        provider={PROVIDER_GOOGLE}>
      </MapView>

      </View>
    );
  }
}

const styles = ScaledSheet.create({
  map: {
width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    
  },
  bubble: {
    justifyContent: 'center',
    alignItems: 'center',
    padding: 15,
  },
  carousel: {
    position: 'absolute',
    top: scale(625)
  },
  cardContainer: {
    backgroundColor: '#d1cfcf',
    height: scale(40),
    width: scale(300),
    borderRadius: 10,
    alignSelf: 'center',
    alignItems: 'center',
    justifyContent: 'center',
  },

  name: {
    color: 'black',
    fontSize: 22,

  }
});

Defining the customMapStyle in a separate file is plain JS and can be done as follows.

Define a new file, named CustomMapStyle.js and add the following content.

export const CustomMapStyle = [
      {
        "featureType": "landscape.man_made",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.attraction",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.business",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.business",
        "elementType": "labels.text",
        "stylers": [
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "poi.government",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }
    ]

Then use it as follows.

import {CustomMapStyle} from './CustomMapStyle'

...

render() {    
    return (
     <View style={{...StyleSheet.absoluteFillObject}}>
      <MapView
        style={styles.map}
        customMapStyle={CustomMapStyle}
        provider={PROVIDER_GOOGLE}>
      </MapView>

      </View>
    );
  }

I have updated your snack here.

The final result.