react-native-google-maps-plus

React-native wrapper for android & IOS google maps sdk

Installation

react-native-nitro-modules is required as this library relies on Nitro Modules.

yarn add react-native-google-maps-plus react-native-nitro-modules

Dependencies

This package builds on native libraries for SVG rendering and Google Maps integration:

• iOS: SVGKit
• Android: AndroidSVG
• iOS Maps SDK: Google Maps SDK for iOS
• Android Maps SDK: Google Maps SDK for Android
• Maps Utility Libraries: Google Maps Utils for iOS and Google Maps Utils for Android

These are automatically linked when you install the package, but you may need to clean/rebuild your native projects after first install.

Setup API Key

You will need a valid Google Maps API Key from the Google Cloud Console.

Android

It's recommend to use Secrets Gradle Plugin to securely manage your Google Maps API Key.

---

iOS

See the official Google Maps iOS SDK configuration guide for more details.

1. Create a Secrets.xcconfig file inside the ios/ folder:

   MAPS_API_KEY=YOUR_IOS_MAPS_API_KEY

   Include it in your project configuration file:

   #include? "Secrets.xcconfig"
   

2. Reference the API key in your Info.plist:

   <key>MAPS_API_KEY</key>
   <string>$(MAPS_API_KEY)</string>

3. Provide the key programmatically in AppDelegate.swift:

   import GoogleMaps
   
   @UIApplicationMain
   class AppDelegate: UIResponder, UIApplicationDelegate {
     func application(_ application: UIApplication,
                      didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
       if let apiKey = Bundle.main.object(forInfoDictionaryKey: "MAPS_API_KEY") as? String {
           GMSServices.provideAPIKey(apiKey)
       }
       return true
     }
   }

---

Usage

Checkout the example app in the example folder.

Troubleshooting

Android

• API key not found Make sure secrets.properties exists under android/ and contains your MAPS_API_KEY. Run ./gradlew clean and rebuild.

iOS

• GMSServices must be configured before use Ensure your key is in Info.plist and/or provided via GMSServices.provideAPIKey(...) in AppDelegate.swift.

• Build fails with Node.h, CSSValue.h, or SVGLength.h import errors from SVGKit SVGKit includes headers (Node.h, CSSValue.h, SVGLength.h) that can conflict with iOS system headers and React Native Reanimated’s internal types. You can patch them automatically in your Podfile inside the post_install

  post_install do |installer|
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false,
    )
    # Force iOS 16+ to avoid deployment target warnings
    installer.pods_project.targets.each do |target|
      target.build_configurations.each do |config|
        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '16.0'
      end
    end
  
    # --- SVGKit Patch ---
    require 'fileutils'
    svgkit_path = File.join(installer.sandbox.pod_dir('SVGKit'), 'Source')
  
    # node fix
    Dir.glob(File.join(svgkit_path, '**', '*.{h,m}')).each do |file|
      FileUtils.chmod("u+w", file)
      text = File.read(file)
      new_contents = text.gsub('#import "Node.h"', '#import "SVGKit/Node.h"')
      File.open(file, 'w') { |f| f.write(new_contents) }
      # puts "Patched Node import in: #{file}"
    end
  
    # import CSSValue.h
    Dir.glob(File.join(svgkit_path, '**', '*.{h,m}')).each do |file|
      FileUtils.chmod("u+w", file)
      text = File.read(file)
      new_contents = text.gsub('#import "CSSValue.h"', '#import "SVGKit/CSSValue.h"')
      File.open(file, 'w') { |f| f.write(new_contents) }
      # puts "Patched CSSValue import in: #{file}"
    end
  
    # import SVGLength.h
    Dir.glob(File.join(svgkit_path, '**', '*.{h,m}')).each do |file|
      FileUtils.chmod("u+w", file)
      text = File.read(file)
      new_contents = text.gsub('#import "SVGLength.h"', '#import "SVGKit/SVGLength.h"')
      File.open(file, 'w') { |f| f.write(new_contents) }
      # puts "Patched SVGLength import in: #{file}"
    end
  end

  After applying this, run:

  cd ios && pod install --repo-update

• Maps not rendering

  • Check that your API key has Maps SDK for Android/iOS enabled in Google Cloud Console.
  • Make sure the key is not restricted to wrong bundle IDs or SHA1 fingerprints.

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

---

Made with create-react-native-library