Add Google Maps and Map Kit to React Native App in 10 steps

In this tutorial we will add Google Maps and Map Kit to React Native App. We will be using package react-native-maps. So, lets get started.

Step 1) Install React Native with following command :

Step 2) Go to newly created project directory ( for me it’s MapApp) and install react-native-maps with following command :

Step 3) Link react-native-maps with following command :

Step 4) Go to ios directory in your project and run command :

Step 5) Add following code to the new pod file created, replace your react native project name with “MapApp”

and again from ios directory run following command :

Step 6) Open .workspace file created by above pod command and right click on project and select ‘add files to..’ and add node_modules/react-native-maps/lib/ios/AirGoogleMaps into your project with Create groups checked.

Step 7) In AppDelegate.m, add @import GoogleMaps before @implementation AppDelegate. In application didFinishLaunchingWithOptions function , add [GMSServices provideAPIKey:@"YOUR_GOOGLE_MAP_API_KEY"]; with you actual Google Api key in place of YOUR_GOOGLE_MAP_API_KEY.

Step 8) Add $(SRCROOT)/../node_modules/react-native-maps/lib/ios/AirMapsto Build Settings > Header Search Pathswith option in right set to recursive.

Step 9) Enable Google Map SDK for IOS in Google Console.

Step 10) Download and add following examples to your React Native Project.

Run your project.

For better clarification and code in action you can check the video below :