Map View implementation in React Native

anchit

5 March 2021

In this blog, we will learn about how to implement map view, add markers and draw navigation route between two markers.

Well, React Native is one of the best platforms for mobile application development.

But the official documents do not provide any way to integrate the maps/directions/navigation in your application.

Integrating this simple, but procedural, please follow through the lines written along

So, without wasting further time, let’s get started.

Things You Need To Get Started :

react-native-maps ( Refer here for the official github page of this package)
react-native-maps-directions (Refer here for the official github page of this package)

Installation Steps :

npm install react-native-maps --save

npm install react-native-maps-directions --save

npm install react-native-maps --save

npm install react-native-maps-directions --save

Before You Start Coding

Now, you need to do some manual changes in your android and ios directories respectively.

Let’s Start with the Android configuration first.

Android Changes

In your project level build.gradle file (path to this file: android –> build.gradle )

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "27.0.3"
        minSdkVersion = 16
        compileSdkVersion = 27
        targetSdkVersion = 27
        supportLibVersion = "27.1.1"
        googlePlayServicesVersion = "15.0.0" // Make Sure This line is added over here only
        androidMapsUtilsVersion = "0.5+"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.4'
        classpath 'com.google.gms:google-services:3.2.1' // Make Sure This line is added over here only

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        maven {
            url "$rootDir/../node_modules/react-native/android"
        }
         maven {
            url 'https://maven.google.com/' // Make Sure This block is added over here only
            name 'Google'
        }
    }
}

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {

ext {

buildToolsVersion = "27.0.3"

minSdkVersion = 16

compileSdkVersion = 27

targetSdkVersion = 27

supportLibVersion = "27.1.1"

googlePlayServicesVersion = "15.0.0" // Make Sure This line is added over here only

androidMapsUtilsVersion = "0.5+"

}

repositories {

google()

jcenter()

}

dependencies {

classpath 'com.android.tools.build:gradle:3.1.4'

classpath 'com.google.gms:google-services:3.2.1' // Make Sure This line is added over here only

// NOTE: Do not place your application dependencies here; they belong

// in the individual module build.gradle files

}

allprojects {

repositories {

mavenLocal()

google()

jcenter()

maven {

url "$rootDir/../node_modules/react-native/android"

}

maven {

url 'https://maven.google.com/' // Make Sure This block is added over here only

name 'Google'

}

In your module level build.gradle file (path to this file: android–> app–>build.gradle)

// other lines of file

dependencies {
// Your other dependencies
implementation project(':react-native-maps')
implementation "com.google.android.gms:play-services-base:15.0.0"
}

// other lines of file

dependencies {

// Your other dependencies

implementation project(':react-native-maps')

implementation "com.google.android.gms:play-services-base:15.0.0"

}

Now you need to add Your Google Map API key in your AndroidManifest.xml file

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.react.native.myproject">

    <application>

        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="Your Google Maps Api Key Goes here" />
    </application>
</manifest>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.example.react.native.myproject">

<meta-data

android:name="com.google.android.geo.API_KEY"

android:value="Your Google Maps Api Key Goes here" />

</application>

</manifest>

iOS Changes

Setup your Podfile (found at ios/Podfile as below, replacing all references to _YOUR_PROJECT_TARGET_ with your project target (it’s the same as project name by default).

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target '_YOUR_PROJECT_TARGET_' do
  rn_path = '../node_modules/react-native'
  rn_maps_path = '../node_modules/react-native-maps'

  # See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies
  pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
  pod 'React', path: rn_path, subspecs: [
    'Core',
    'CxxBridge',
    'DevSupport',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket',
  ]

  # React Native third party dependencies podspecs
  pod 'DoubleConversion', :podspec => "#{rn_path}/third-party-podspecs/DoubleConversion.podspec"
  pod 'glog', :podspec => "#{rn_path}/third-party-podspecs/glog.podspec"
  # If you are using React Native <0.54, you will get the following error:
  # "The name of the given podspec `GLog` doesn't match the expected one `glog`"
  # Use the following line instead:
  #pod 'GLog', :podspec => "#{rn_path}/third-party-podspecs/GLog.podspec"
  pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec"

  # react-native-maps dependencies
  pod 'react-native-maps', path: rn_maps_path
  # pod 'react-native-google-maps', path: rn_maps_path  # Uncomment this line if you want to support GoogleMaps on iOS
  # pod 'GoogleMaps'  # Uncomment this line if you want to support GoogleMaps on iOS
  # pod 'Google-Maps-iOS-Utils' # Uncomment this line if you want to support GoogleMaps on iOS
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == 'react-native-google-maps'
      target.build_configurations.each do |config|
        config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
      end
    end
    if target.name == "React"
      target.remove_from_project
    end
  end
end

# Uncomment the next line to define a global platform for your project

# platform :ios, '9.0'

target '_YOUR_PROJECT_TARGET_' do

rn_path = '../node_modules/react-native'

rn_maps_path = '../node_modules/react-native-maps'

# See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies

pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"

pod 'React', path: rn_path, subspecs: [

'Core',

'CxxBridge',

'DevSupport',

'RCTActionSheet',

'RCTAnimation',

'RCTGeolocation',

'RCTImage',

'RCTLinkingIOS',

'RCTNetwork',

'RCTSettings',

'RCTText',

'RCTVibration',

'RCTWebSocket',

]

# React Native third party dependencies podspecs

pod 'DoubleConversion', :podspec => "#{rn_path}/third-party-podspecs/DoubleConversion.podspec"

pod 'glog', :podspec => "#{rn_path}/third-party-podspecs/glog.podspec"

# If you are using React Native <0.54, you will get the following error:

# "The name of the given podspec `GLog` doesn't match the expected one `glog`"

# Use the following line instead:

#pod 'GLog', :podspec => "#{rn_path}/third-party-podspecs/GLog.podspec"

pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec"

# react-native-maps dependencies

pod 'react-native-maps', path: rn_maps_path

# pod 'react-native-google-maps', path: rn_maps_path # Uncomment this line if you want to support GoogleMaps on iOS

# pod 'GoogleMaps' # Uncomment this line if you want to support GoogleMaps on iOS

# pod 'Google-Maps-iOS-Utils' # Uncomment this line if you want to support GoogleMaps on iOS

end

post_install do |installer|

installer.pods_project.targets.each do |target|

if target.name == 'react-native-google-maps'

target.build_configurations.each do |config|

config.build_settings['CLANG_ENABLE_MODULES'] = 'No'

end

if target.name == "React"

target.remove_from_project

end

Then run in the ios folder

pod install

				1

						pod install

Enabling Google Maps on iOS

If you want to enable Google Maps on iOS, obtain the Google API key and edit your AppDelegate.m as follows:

+ #import &lt;GoogleMaps/GoogleMaps.h&gt;

<span class="pl-k">@implementation</span> <span class="pl-en">AppDelegate</span>
...

- (<span class="pl-c1">BOOL</span>)<span class="pl-en">application</span><span class="pl-en">:</span>(UIApplication *)<span class="pl-smi">application</span> <span class="pl-en">didFinishLaunchingWithOptions</span><span class="pl-en">:</span>(<span class="pl-c1">NSDictionary</span> *)<span class="pl-smi">launchOptions</span>
{
+  [GMSServices <span class="pl-c1">provideAPIKey:</span><span class="pl-s"><span class="pl-pds">@"</span>_YOUR_API_KEY_<span class="pl-pds">"</span></span>]; <span class="pl-c">// add this line using the api key obtained from Google Console</span>
...

				
					
				1
2
3
4
5
6
7
8
9

						+ #import &lt;GoogleMaps/GoogleMaps.h&gt;
 
<span class="pl-k">@implementation</span> <span class="pl-en">AppDelegate</span>
...
 
- (<span class="pl-c1">BOOL</span>)<span class="pl-en">application</span><span class="pl-en">:</span>(UIApplication *)<span class="pl-smi">application</span> <span class="pl-en">didFinishLaunchingWithOptions</span><span class="pl-en">:</span>(<span class="pl-c1">NSDictionary</span> *)<span class="pl-smi">launchOptions</span>
{
+  [GMSServices <span class="pl-c1">provideAPIKey:</span><span class="pl-s"><span class="pl-pds">@"</span>_YOUR_API_KEY_<span class="pl-pds">"</span></span>]; <span class="pl-c">// add this line using the api key obtained from Google Console</span>
...

					

			

The [GMSServices provideAPIKey] should be the first call of the method.

Then, do either of the following

If you are using CocoaPods to manage your dependecies, uncomment the lines related to Google Maps from the Podfile and run pod install.

If you used React Native link, you may include Google Maps manually as a XCode framework following the instructions from SDK docs -> Install manually. Then, to link this library to the framework, add the following to your package.jsonand replace the REPLACE_ME_RELATIVE_PATH_TO_GOOGLE_MAPS_INSTALL with the relative path from your project root to the directory in which you installed the Google Maps frameworks. You might need to specify a recursive search path by adding a /** at the end of the provided path (e.g. `”./node_modules/react-native-maps/enable-google-maps ‘ios/my-frameworks/GoogleMaps/**'”

{
  <span class="pl-s"><span class="pl-pds">"</span>name<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>your-app<span class="pl-pds">"</span></span>,
  <span class="pl-s"><span class="pl-pds">"</span>scripts<span class="pl-pds">"</span></span>: {
    <span class="pl-s"><span class="pl-pds">"</span>postinstall<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>./node_modules/react-native-maps/enable-google-maps REPLACE_ME_RELATIVE_PATH_TO_GOOGLE_MAPS_INSTALL<span class="pl-pds">"</span></span>
  }
}

				
					
				1
2
3
4
5
6

						{
  <span class="pl-s"><span class="pl-pds">"</span>name<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>your-app<span class="pl-pds">"</span></span>,
  <span class="pl-s"><span class="pl-pds">"</span>scripts<span class="pl-pds">"</span></span>: {
    <span class="pl-s"><span class="pl-pds">"</span>postinstall<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>./node_modules/react-native-maps/enable-google-maps REPLACE_ME_RELATIVE_PATH_TO_GOOGLE_MAPS_INSTALL<span class="pl-pds">"</span></span>
  }
}

					

			

Re-run npm install or yarn to ensure the postinstall script is run.

Import and add {PROVIDER_GOOGLE} to your JavaScript:

  <span class="pl-k">import</span> <span class="pl-smi">MapView</span>, { <span class="pl-smi">PROVIDER_GOOGLE</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native-maps<span class="pl-pds">'</span></span>;
  <span class="pl-k">...</span>
  
  <span class="pl-k">&lt;</span>MapView
     provider<span class="pl-k">=</span>{<span class="pl-c1">PROVIDER_GOOGLE</span>}
     style<span class="pl-k">=</span>{<span class="pl-smi">styles</span>.<span class="pl-smi">map</span>}
     <span class="pl-k">...</span>
  <span class="pl-k">&gt;</span>

import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

...

<MapView

provider={PROVIDER_GOOGLE}

style={styles.map}

...

>

CODE :

After following the initial configuration steps, the rest of the implementation is quite simple.

Suppose the name of your Component is MyAppRouteComponent then your file would be something like below :

import React from 'react';
import { View, Text, Dimensions, ScrollView, TouchableOpacity, FlatList, ToastAndroid, Alert, PermissionsAndroid, Platform, StyleSheet } from 'react-native';
import FastImage from 'react-native-fast-image';
import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';
export const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");

export default class MyAppRouteComponent extends React.Component {
    
    render() {
        return (
            <View
                style={{ flex: 1, height: SCREEN_HEIGHT }}
            >
                <MapView
                    provider={PROVIDER_GOOGLE} // remove if not using Google Maps
                    style={[styles.map, { width: SCREEN_WIDTH, height: SCREEN_WIDTH }]}
                    initialRegion={{
                        latitude: 28.623999,
                        longitude: 77.383707,
                        latitudeDelta: 0.05,
                        longitudeDelta: 0.05,
                    }}
                >
                    <Marker
                        pinColor={'green'}
                        coordinate={{ latitude: 77.383707, longitude: 77.383707 }}
                    />
                    <Marker
                        pinColor={'blue'}
                        coordinate={{ latitude: 28.469619, longitude: 77.038272 }}
                    />
                    {
                        this.state.navigationStarted
                            ?
                            <MapViewDirections
                                origin={{ latitude: 28.469619, longitude: 77.038272 }}
                                destination={{ latitude: 77.383707, longitude: 77.383707 }}
                                apikey={GOOGLE_MAPS_APIKEY} // Replace with your Google Maps Api Key
                                strokeWidth={3}
                                strokeColor="hotpink"
                                />
                            : null
                    }
                </MapView>
            </View>
        )
    }
}

export const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
    flex:1
  },

});

import React from 'react';

import { View, Text, Dimensions, ScrollView, TouchableOpacity, FlatList, ToastAndroid, Alert, PermissionsAndroid, Platform, StyleSheet } from 'react-native';

import FastImage from 'react-native-fast-image';

import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';

import MapViewDirections from 'react-native-maps-directions';

export const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");

export default class MyAppRouteComponent extends React.Component {

render() {

return (

<View

style={{ flex: 1, height: SCREEN_HEIGHT }}

<MapView

provider={PROVIDER_GOOGLE} // remove if not using Google Maps

style={[styles.map, { width: SCREEN_WIDTH, height: SCREEN_WIDTH }]}

initialRegion={{

latitude: 28.623999,

longitude: 77.383707,

latitudeDelta: 0.05,

longitudeDelta: 0.05,

}}

<Marker

pinColor={'green'}

coordinate={{ latitude: 77.383707, longitude: 77.383707 }}

<Marker

pinColor={'blue'}

coordinate={{ latitude: 28.469619, longitude: 77.038272 }}

{

this.state.navigationStarted

<MapViewDirections

origin={{ latitude: 28.469619, longitude: 77.038272 }}

destination={{ latitude: 77.383707, longitude: 77.383707 }}

apikey={GOOGLE_MAPS_APIKEY} // Replace with your Google Maps Api Key

strokeWidth={3}

strokeColor="hotpink"

: null

}

</MapView>

</View>

)

}

export const styles = StyleSheet.create({

map: {

...StyleSheet.absoluteFillObject,

flex:1

});

Hope This helps you.

For Map Related further Troubleshooting, Please do read more details over here

Keep coding and Keep Sharing

References : https://github.com/react-native-community/react-native-maps

https://github.com/bramus/react-native-maps-directions