diff --git a/README.md b/README.md index 0747a20..eec732e 100644 --- a/README.md +++ b/README.md @@ -15,16 +15,131 @@ React-native wrapper for android & IOS google maps sdk ## Installation +`react-native-nitro-modules` is required as this library relies on [Nitro Modules](https://nitro.margelo.com/). + ```sh yarn add react-native-google-maps-plus react-native-nitro-modules - -> `react-native-nitro-modules` is required as this library relies on [Nitro Modules](https://nitro.margelo.com/). ``` +Dependencies + +This package builds on native SVG rendering libraries: + +iOS: [SVGKit](https://github.com/SVGKit/SVGKit) + +Android: [AndroidSVG](https://bigbadaboom.github.io/androidsvg/) + +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](https://console.cloud.google.com/). + +### Android + +It's recommend to use [Secrets Gradle Plugin](https://developers.google.com/maps/documentation/android-sdk/secrets-gradle-plugin) to securely manage your Google Maps API Key. + +--- + +### iOS + +See the official [Google Maps iOS SDK configuration guide](https://developers.google.com/maps/documentation/ios-sdk/config#get-key) for more details. + +1. Create a `Secrets.xcconfig` file inside the **ios/** folder: + + ```properties + MAPS_API_KEY=YOUR_IOS_MAPS_API_KEY + ``` + + Include it in your project configuration file: + + ```xcconfig + #include? "Secrets.xcconfig" + ``` + +2. Reference the API key in your **Info.plist**: + + ```xml + MAPS_API_KEY + $(MAPS_API_KEY) + ``` + +3. Provide the key programmatically in **AppDelegate.swift**: + + ```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](./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` import error from SVGKit** + SVGKit uses a header `Node.h` which can conflict with iOS system headers. + You can patch it automatically in your **Podfile** inside the `post_install` hook: + + ```ruby + 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 + + # Patch SVGKit includes to avoid Node.h conflicts + require 'fileutils' + svgkit_path = File.join(installer.sandbox.pod_dir('SVGKit'), 'Source') + 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) } + end + end + ``` + + After applying this, run: + + ```sh + 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](CONTRIBUTING.md#development-workflow) diff --git a/example/README.md b/example/README.md index 3e2c3f8..9619ed2 100644 --- a/example/README.md +++ b/example/README.md @@ -1,97 +1,22 @@ -This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli). +# React Native Google Maps Plus – Example App -# Getting Started +This is the **example application** for [`react-native-google-maps-plus`](https://github.com/yourname/react-native-google-maps-plus). +It demonstrates how to set up and run the package on **Android** and **iOS**. -> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding. +--- -## Step 1: Start Metro +## Prerequisites -First, you will need to run **Metro**, the JavaScript build tool for React Native. +- Make sure you have completed the [React Native environment setup](https://reactnative.dev/docs/set-up-your-environment). +- You will need a valid **Google Maps API Key** from the [Google Cloud Console](https://console.cloud.google.com/). -To start the Metro dev server, run the following command from the root of your React Native project: +--- -```sh -# Using npm -npm start - -# OR using Yarn -yarn start -``` - -## Step 2: Build and run your app - -With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app: +## Step 1: Add Google Maps API Key -### Android +Create the required secrets files and add your API key: ```sh -# Using npm -npm run android - -# OR using Yarn -yarn android +echo MAPS_API_KEY="" >> android/secrets.properties +echo MAPS_API_KEY="" >> ios/Secrets.xcconfig ``` - -### iOS - -For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps). - -The first time you create a new project, run the Ruby bundler to install CocoaPods itself: - -```sh -bundle install -``` - -Then, and every time you update your native dependencies, run: - -```sh -bundle exec pod install -``` - -For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html). - -```sh -# Using npm -npm run ios - -# OR using Yarn -yarn ios -``` - -If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device. - -This is one way to run your app — you can also build it directly from Android Studio or Xcode. - -## Step 3: Modify your app - -Now that you have successfully run the app, let's make changes! - -Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh). - -When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload: - -- **Android**: Press the R key twice or select **"Reload"** from the **Dev Menu**, accessed via Ctrl + M (Windows/Linux) or Cmd ⌘ + M (macOS). -- **iOS**: Press R in iOS Simulator. - -## Congratulations! :tada: - -You've successfully run and modified your React Native App. :partying_face: - -### Now what? - -- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps). -- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started). - -# Troubleshooting - -If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. - -# Learn More - -To learn more about React Native, take a look at the following resources: - -- [React Native Website](https://reactnative.dev) - learn more about React Native. -- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment. -- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**. -- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts. -- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native. diff --git a/example/ios/GoogleMapsPlusExample/Debug.xcconfig b/example/ios/GoogleMapsPlusExample/Debug.xcconfig index 97e2231..86bfc84 100644 --- a/example/ios/GoogleMapsPlusExample/Debug.xcconfig +++ b/example/ios/GoogleMapsPlusExample/Debug.xcconfig @@ -1,2 +1,2 @@ #include "Pods/Target Support Files/Pods-GoogleMapsPlusExample/Pods-GoogleMapsPlusExample.debug.xcconfig" -#include "Secrets.xcconfig" +#include? "Secrets.xcconfig" diff --git a/example/ios/GoogleMapsPlusExample/Release.xcconfig b/example/ios/GoogleMapsPlusExample/Release.xcconfig index 1d5de37..81103d8 100644 --- a/example/ios/GoogleMapsPlusExample/Release.xcconfig +++ b/example/ios/GoogleMapsPlusExample/Release.xcconfig @@ -1,2 +1,2 @@ #include "Pods/Target Support Files/Pods-GoogleMapsPlusExample/Pods-GoogleMapsPlusExample.release.xcconfig" -#include "Secrets.xcconfig" +#include? "Secrets.xcconfig" diff --git a/lefthook.yml b/lefthook.yml index d085b82..f683cc3 100644 --- a/lefthook.yml +++ b/lefthook.yml @@ -1,21 +1,28 @@ pre-commit: parallel: false - commands: - lint-js: - glob: '**/*.{js,ts,jsx,tsx}' + jobs: + - name: format + run: yarn format + stage_fixed: true + + - name: lint-js run: yarn lint:js - lint-android: - glob: 'android/**/*.{kt,java,xml,gradle}' + + - name: lint-android run: yarn lint:android - lint-ios: - glob: 'ios/**/*.{h,m,mm,cpp,swift}' + + - name: lint-ios run: yarn lint:ios - types: - glob: '**/*.{ts,tsx}' - run: npx tsc --noEmit + + - name: final-check + run: | + if git diff --cached --quiet HEAD; then + echo "No changes to commit" + exit 1 + fi commit-msg: - parallel: true - commands: - commitlint: + parallel: false + jobs: + - name: commitlint run: npx commitlint --edit {1}