Category: React Native Map

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 :

react-native init --version="0.42.0" MapApp

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

npm install react-native-maps@0.15.2 --save

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

react-native link react-native-maps

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

pod init

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

source 'https://github.com/CocoaPods/Specs.git'

# Change 'MapApp' to match the target in your Xcode project.
target 'MapApp' do

  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga/Yoga.podspec'
  pod 'React', path: '../node_modules/react-native', :subspecs => [
    'Core',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket'
  ]

  pod 'GoogleMaps'  
 
end

and again from ios directory run following command :

pod install

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 :