How to create distinct and engaging react native maps

This post will teach you how to change the style (colors and other visual elements) of a react native map.
You will also learn how to use callouts to add a search box to a map.

Get a map

If you haven’t done this already, get yourself a nice basic map. If you have a map already, skip to the next section. If you don’t, slap this into your terminal:

npm install react-native-maps --save

And follow these instructions. After you have installed react native maps, you are going to want to import react native maps and add a MapView component to the render of your app.

import MapView from 'react-native-maps';
// declare this outside of render
  var region = {
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  };
// add this to render
  <MapView
    initialRegion={region}
  />

Verify that the map works and move on.

Choosing the style

According to the MapView documentation you can add a custom style to a map with the prop customMapStyle. This prop accepts an array which contains the custom style. To generate a custom style go to the Google Maps Styling Wizard.

With the Google Maps Styling Wizard you can create a unique style for your react native map. Using the basic editor you can…