Map integration in React Native

Tram Ho


This article I will introduce you to integrating Map into React Native App with react-native-maps library.

With this library, on Android devices will use Google Maps, while on iOS devices can use Google Maps or Apple Map.


First, run the following command to install the library:


Configure on iOS

Use React Native Link (React Native <= 0.59)

Run react-native link react-native-maps to link the library, then we can use this library on iOS

Using CocoaPods (React Native <= 0.59)

Edit Podfile in the ios/Podfile directory, replace _YOUR_PROJECT_TARGET_ with your target project (project name by default)

Then run the commands:

and open the workspace file ( .xcworkspace ) in XCode to build the project.

Use CocoaPods (React Native> = 60)

For React Native version> = 60 then you just need to run the commands:

Configure on Android

  1. (React Native <= 0.59) add react-native-maps project to android/settings.gradle :

  1. (React Native <= 0.59) add dependency react-native-maps to android/app/build.gradle :

  1. Add the dependency gms service to android/app/build.gradle :

  1. Add Google Map API Key to manifest file ( android/app/src/main/AndroidManifest.xml )

To get API Key:

  1. (React Native <= 0.59) Add import; and new MapsPackage() to file:


The react-native-maps library provides components:

General use

MapView Component is the parent component, built up from other components such as Marker, Polygon … which are children of MapView

Render Map with initialization area

With given logitude and latitude we can render the Map showing:

Render Map when changing area

Render the Markers:

Render Marker with custom image:

Get the Snapshot Map


There are many more features with map supported by this library, please refer to:

Share the news now

Source : Viblo