React Native Maps:

First, you should take advantage of Google Maps features with our app; we must enable the SDK for both iOS and Android. This must be set up in a Google project with an active billing account in Google Cloud Console. Then we will create an API key to add to your code project later.

Go to the Google Cloud Console and create a new project, which we will call Google-maps-project. Then, enter the APIs library and enable the Maps SDK for Android and iOS. Are they already enabled? Then it’s time to create an API key in the Control Panel / Create Credentials. 

Now that you already have the API key, you will need to enter app.json and type the following:

// app.json
{
  : {
    "name": "google-maps-example",
    "slug": "google-maps-example",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./src/assets/icon.png",
    "splash": {
      "image": "./src/assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffffff".
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "config": {
          "googleMapsApiKey": "REPLACE_FOR_API_KEY".
      }
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./src/assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFFFFFF"
      },
      "config": {
        "googleMaps": {
          "apiKey": "REPLACE_FOR_API_KEY".
        }
      }
    },
    "web": {
      "favicon": "./src/assets/favicon.png".
    }
  }
}

To add the Key in an Android Bare project, you must add the API Key Google_maps_api.xml in the path Android/app/src/main/res/values as follows:

<resources>
  <string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">(api key here)</string>
</resources>

On iOS, you will need to edit the AppDelegate.m file and include the snippet:

#import <GoogleMaps/GoogleMaps.h>. 
@implementation AppDelegate 
... 
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
{ 
  [GMSServices provideAPIKey:@"_YOUR_API_KEY_"]; // add this line using the API key obtained from Google Console. 
... 
}

# React Native Maps dependencies 
  rn_maps_path = '../node_modules/react-native-maps'. 
  pod 'react-native-google-maps', :path => rn_maps_path 
  pod 'GoogleMaps'. 
  pod 'Google-Maps-iOS-Utils'.

In Apple, you will need to explain why you need access to the user’s location. They are strict with permissions! So if you don’t, your app will be rejected when you upload it to the App Store. To do this, go into the Info.plist file and edit the NSLocationWhenInUseUsageDescription field and concisely explain your reasons.

You already have the map library integrated. However, how can you add map visualization to your app? It’s easy:

Create a Map.js component similar to this one:

import React from 'react'; 
import { StyleSheet, View, Dimensions } from 'react-native'; 
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'; 
import { mapStyle } from './mapStyle';

export function MapScreen() {
  return (
    <View style={styles.container}>
      <MapView
        customMapStyle={mapStyle}
        provider={PROVIDER_GOOGLE}
        style={styles.mapStyle}
        initialRegion={{{
          latitude: 41.3995345,
          longitude: 2.1909796,
          latitudeDelta: 0.003,
          longitudeDelta: 0.003,
        }}
        mapType="standard"
      ></MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'black',
    alignItems: 'center',
    justifyContent: 'center',
  },
  mapStyle: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

You will be able to customize almost all the map parameters. The most important ones are:

• Providers, with a message indicating that we will use Google Maps. 
• initialRegion will be the map’s starting location.
• customMapStyle will allow you to generate a custom style. 

Last but not least, you can modify the map’s look and feel. The official Google documentation recommends a minimalist style to facilitate user navigation. So, an example could be the following:

//mapStyle.js
export const mapStyle = [
  {
    featureType: 'water',
    elementType: 'geometry',
    stylers: [
      {
        color: '#e9e9e9e9',
      },
      {
        lightness: 17,
      },
    ],
  },
  {
    featureType: 'landscape',
    elementType: 'geometry',
    stylers: [
      {
        color: '#f5f5f5f5',
      },
      {
        lightness: 20,
      },
    ],
  },
  {
    featureType: 'road.highway',
    elementType: 'geometry.fill',
    stylers: [
      {
        color: '#ffffffff',
      },
      {
        lightness: 17,
      },
    ],
  },
  {
    featureType: 'road.highway',
    elementType: 'geometry.stroke',
    stylers: [
      {
        color: '#ffffffff',
      },
      {
        lightness: 29,
      },
      {
        weight: 0.2,
      },
    ],
  },
  {
    featureType: 'road.arterial',
    elementType: 'geometry',
    stylers: [
      {
        color: '#ffffffff',
      },
      {
        lightness: 18,
      },
    ],
  },
  {
    featureType: 'road.local',
    elementType: 'geometry',
    stylers: [
      {
        color: '#ffffffff',
      },
      {
        lightness: 16,
      },
    ],
  },
  {
    featureType: 'poi',
    elementType: 'geometry',
    stylers: [
      {
        color: '#f5f5f5f5',
      },
      {
        lightness: 21,
      },
    ],
  },
  {
    featureType: 'poi.park',
    elementType: 'geometry',
    stylers: [
      {
        color: '#dedede',
      },
      {
        lightness: 21,
      },
    ],
  },
  {
    elementType: 'labels.text.stroke',
    stylers: [
      {
        visibility: 'on',
      },
      {
        color: '#ffffffff',
      },
      {
        lightness: 16,
      },
    ],
  },
  {
    elementType: 'labels.text.fill',
    stylers: [
      {
        saturation: 36,
      },
      {
        color: '#333333',
      },
      {
        lightness: 40,
      },
    ],
  },
  {
    elementType: 'labels.icon',
    stylers: [
      {
        visibility: 'off',
      },
    ],
  },
  {
    featureType: 'transit',
    elementType: 'geometry',
    stylers: [
      {
        color: '#f2f2f2f2',
      },
      {
        lightness: 19,
      },
    ],
  },
  {
    featureType: 'administrative',
    elementType: 'geometry.fill',
    stylers: [
      {
        color: '#fefefe',
      },
      {
        lightness: 20,
      },
    ],
  },
  {
    featureType: 'administrative',
    elementType: 'geometry.stroke',
    stylers: [
      {
        color: '#fefefe',
      },
      {
        lightness: 17,
      },
      {
        weight: 1.2,
      },
    ],
  },
];

That’s it! You now have a basic working map for your React Native development. 

In short, you have now learned how to make a basic map run in React Native. For example, this feature can be very useful for companies that want to make their location known, just as many real-world mobile apps built with React Native integrate maps to enhance the user experience.

If you want to read more articles about React Native Maps, you can continue browsing our blog, and you can also check out this awesome tutorial.

If you want to empower your team using ours or have an idea you need help with, feel free to schedule a call with us using the following link.