React Native Maps: Properties `showsPointsOfInterest`, `showsIndoors` and `showsBuildings` don't work

Question

Even though I explicitly set showsPointsOfInterest, showsIndoors and showsBuildings to false - trying both the string "false" and the boolean false - my MapView in React Native renders all sorts of additional information. I want the map to be uncluttered and for the user. Here is my MapsContainer:

import React, { Component } from "react";
import MapView, { Marker } from "react-native-maps";
import { View } from "react-native";
import { connect } from "react-redux";
import PropTypes from "prop-types";

import MapsMarker from "../MapsMarker/MapsMarker";
import styles from "./styles";

export class MapsContainer extends Component {
  static propTypes = {
    addresses: PropTypes.object,
    coordinates: PropTypes.object,
    locations: PropTypes.array
  };

  render() {
    const { coordinates, addresses, restaurants } = this.props;
    return (
      <View style={styles.mapContainer}>
        <MapView
          style={styles.map}
          showsPointsOfInterest="false"
          showsIndoors="false"
          showsBuildings="false"
          initialRegion={{
            latitude: 150.35154,
            longitude: 12.0344940,
            latitudeDelta: 0.0145,
            longitudeDelta: 0.0055
          }}
        >
          {locations.map(location => {
            const { uuid, ...coordinate } = coordinates[addresses[location.address].coordinates];
            return (
              <Marker coordinate={coordinate} key={uuid}>
                <MapsMarker label={location.name} />
              </Marker>
            );
          })}
        </MapView>
      </View>
    );
  }
}

const mapStateToProps = state => {
  const { addresses, coordinates } = state;
  return { addresses, coordinates };
};

export default connect(mapStateToProps)(MapsContainer);

What am I doing wrong? Why is the map still full of extra information and points of interest?

Answer 1

Just found out how to solve this. You will need to add custom map styles:

          provider={PROVIDER_GOOGLE}
          customMapStyle={[
            {
              featureType: "administrative",
              elementType: "geometry",
              stylers: [
              {
                  visibility: "off"
              }
              ]
            },
            {
              featureType: "poi",
              stylers: [
                {
                  visibility: "off"
                }
              ]
            },
            {
              featureType: "road",
              elementType: "labels.icon",
              stylers: [
                {
                  visibility: "off"
                }
              ]
            },
            {
              featureType: "transit",
              stylers: [
                {
                  visibility: "off"
                }
              ]
            }
          ]}

Using provider you also tell iOS to use Google Maps. Make sure to follow the docs and properly install it. If you get some YellowBox warnings about RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks just close your simulator and your metro server and restart both.

Answer 2

You can create custom map styles interactively with this tool: https://mapstyle.withgoogle.com/

and use the customMapStyle prop.