Hi Guys, In this article we are going to learn about how to set up Google Maps in React Native iOS. React Native uses third-party dependency to render maps in the Application. we are going to implement react-native-maps dependency in our application to show maps. Let’s understand steps to implement this dependency because I was facing multiple issues during setting up Google Maps in iOS.
1. Install react-native-maps
Use the following comment to install maps in the React-native project
npm install react-native-maps //or yarn add react-native-maps
Add the following support dependencies in your Podfile.
pod 'Google-Maps-iOS-Utils', :git => 'https://github.com/Simon-TechForm/google-maps-ios-utils.git', :branch => 'feat/support-apple-silicon' rn_maps_path = '../node_modules/react-native-maps' pod 'react-native-google-maps', :path => rn_maps_path
2. Set up minimum ios platform version
To use react-native-maps you must set iOS platform version > 13.0. You can set this in Podfile & Project General Minimum deployment version.
In Podfile set to minimum platform version to 13.0 or above as below
platform :ios, '14.7'
Set up the same version in the Project General Minimum deployment version as below
3. Run Pod install
Run Pod install in the iOS folder after the above points. it will install all required pods which use to display maps in React native application.
4. Enable Google Maps in AppDelegate.m
Import and add the following to enable Google map in the iOS app. Also, you have to set up Project on the Google API console to get the Google Map API key
#import "AppDelegate.h" #import <GoogleMaps/GoogleMaps.h>. //<-- Import this
Add the Google API key in didFinishLaunchingWithOptions function in AppDelegate.m
@implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [GMSServices provideAPIKey:@"_GOOGLE_MAP_KEY_"]; //<-- Add this ...
5. Google-Maps-iOS-Utils/GMUHeatmapTileLayer.h file not found
If you face this error in xCode.
Just remove Google-Maps-iOS-Utils from imports as below
6. Google-Maps-iOS-Utils/GMUKMLParser.h’ file not found
If you face this error
Just remove Google-Maps-iOS-Utils from imports as below
7. Add the following in post_install in Podfile
Add the following code in your podfile post_install section and then run pod install. this will help you to fix some more errors like RCTConvert+AirMap.h file not found.
if target.name == 'react-native-google-maps' target.build_configurations.each do |config| config.build_settings['CLANG_ENABLE_MODULES'] = 'No' paths = Array["\"$(inherited)\"", "\"$(SRCROOT)/Google-Maps-iOS-Utils/src/Heatmap\""] config.build_settings['HEADER_SEARCH_PATHS'] = paths.uniq puts config.build_settings['HEADER_SEARCH_PATHS'] end end
8. Podfile
I am sharing my podfile code so that you will get a clear understanding of the react-native-maps iOS setup
require_relative '../node_modules/react-native/scripts/react_native_pods' require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' $RNFirebaseAsStaticFramework = true config = use_frameworks! :linkage => :static platform :ios, '14.7' target 'DemoApp' do config = use_native_modules! pod 'Google-Maps-iOS-Utils', :git => 'https://github.com/Simon-TechForm/google-maps-ios-utils.git', :branch => 'feat/support-apple-silicon' rn_maps_path = '../node_modules/react-native-maps' pod 'react-native-google-maps', :path => rn_maps_path use_react_native!( :path => config[:reactNativePath], # to enable hermes on iOS, change `false` to `true` and then install pods :hermes_enabled => false ) target 'DemoAppTests' do inherit! :complete # Pods for testing end # Enables Flipper. # # Note that if you have use_frameworks! enabled, Flipper will not work and # you should disable the next line. #use_flipper!() # pre_install do |installer| # workaround for https://github.com/CocoaPods/CocoaPods/issues/3289 # Pod::Installer::Xcode::TargetValidator.send(:define_method, :verify_no_static_framework_transitive_dependencies) {} # end pre_install do |installer| installer.pod_targets.each do |pod| if pod.name.eql?('react-native-razorpay') def pod.build_type Pod::BuildType.static_library end end end end post_install do |installer| react_native_post_install(installer) installer.pods_project.targets.each do |target| target.build_configurations.each do |config| config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES' end installer.pods_project.build_configurations.each do |config| config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64" end if target.name == 'react-native-google-maps' target.build_configurations.each do |config| config.build_settings['CLANG_ENABLE_MODULES'] = 'No' paths = Array["\"$(inherited)\"", "\"$(SRCROOT)/Google-Maps-iOS-Utils/src/Heatmap\""] config.build_settings['HEADER_SEARCH_PATHS'] = paths.uniq puts config.build_settings['HEADER_SEARCH_PATHS'] end end if (target.name&.eql?('FBReactNativeSpec')) target.build_phases.each do |build_phase| if (build_phase.respond_to?(:name) && build_phase.name.eql?('[CP-User] Generate Specs')) target.build_phases.move(build_phase, 0) end end end end end end
Hope this post will help you to set up Google Maps in React Native iOS
Thank you 🙂