Skip to content

Commit 2f06213

Browse files
pinpongpinpong
authored
merge dev
2 parents d528d7c + 9f88702 commit 2f06213

File tree

5 files changed

+151
-104
lines changed

5 files changed

+151
-104
lines changed

‎README.md‎

Lines changed: 117 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,131 @@ React-native wrapper for android & IOS google maps sdk
1515

1616
## Installation
1717

18+
`react-native-nitro-modules` is required as this library relies on [Nitro Modules](https://nitro.margelo.com/).
19+
1820
```sh
1921
yarn add react-native-google-maps-plus react-native-nitro-modules
20-
21-
> `react-native-nitro-modules` is required as this library relies on [Nitro Modules](https://nitro.margelo.com/).
2222
```
2323

24+
Dependencies
25+
26+
This package builds on native SVG rendering libraries:
27+
28+
iOS: [SVGKit](https://github.com/SVGKit/SVGKit)
29+
30+
Android: [AndroidSVG](https://bigbadaboom.github.io/androidsvg/)
31+
32+
These are automatically linked when you install the package, but you may need to clean/rebuild your native projects after first install.
33+
34+
## Setup API Key
35+
36+
You will need a valid **Google Maps API Key** from the [Google Cloud Console](https://console.cloud.google.com/).
37+
38+
### Android
39+
40+
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.
41+
42+
---
43+
44+
### iOS
45+
46+
See the official [Google Maps iOS SDK configuration guide](https://developers.google.com/maps/documentation/ios-sdk/config#get-key) for more details.
47+
48+
1. Create a `Secrets.xcconfig` file inside the **ios/** folder:
49+
50+
```properties
51+
MAPS_API_KEY=YOUR_IOS_MAPS_API_KEY
52+
```
53+
54+
Include it in your project configuration file:
55+
56+
```xcconfig
57+
#include? "Secrets.xcconfig"
58+
```
59+
60+
2. Reference the API key in your **Info.plist**:
61+
62+
```xml
63+
<key>MAPS_API_KEY</key>
64+
<string>$(MAPS_API_KEY)</string>
65+
```
66+
67+
3. Provide the key programmatically in **AppDelegate.swift**:
68+
69+
```swift
70+
import GoogleMaps
71+
72+
@UIApplicationMain
73+
class AppDelegate: UIResponder, UIApplicationDelegate {
74+
func application(_ application: UIApplication,
75+
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
76+
if let apiKey = Bundle.main.object(forInfoDictionaryKey: "MAPS_API_KEY") as? String {
77+
GMSServices.provideAPIKey(apiKey)
78+
}
79+
return true
80+
}
81+
}
82+
```
83+
84+
---
85+
2486
## Usage
2587

2688
Checkout the example app in the [example](./example) folder.
2789

90+
# Troubleshooting
91+
92+
## Android
93+
94+
- **API key not found**
95+
Make sure `secrets.properties` exists under `android/` and contains your `MAPS_API_KEY`.
96+
Run `./gradlew clean` and rebuild.
97+
98+
## iOS
99+
100+
- **`GMSServices must be configured before use`**
101+
Ensure your key is in `Info.plist` and/or provided via `GMSServices.provideAPIKey(...)` in `AppDelegate.swift`.
102+
103+
- **Build fails with `Node.h` import error from SVGKit**
104+
SVGKit uses a header `Node.h` which can conflict with iOS system headers.
105+
You can patch it automatically in your **Podfile** inside the `post_install` hook:
106+
107+
```ruby
108+
post_install do |installer|
109+
react_native_post_install(
110+
installer,
111+
config[:reactNativePath],
112+
:mac_catalyst_enabled => false,
113+
)
114+
# Force iOS 16+ to avoid deployment target warnings
115+
installer.pods_project.targets.each do |target|
116+
target.build_configurations.each do |config|
117+
config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '16.0'
118+
end
119+
end
120+
121+
# Patch SVGKit includes to avoid Node.h conflicts
122+
require 'fileutils'
123+
svgkit_path = File.join(installer.sandbox.pod_dir('SVGKit'), 'Source')
124+
Dir.glob(File.join(svgkit_path, '**', '*.{h,m}')).each do |file|
125+
FileUtils.chmod("u+w", file)
126+
text = File.read(file)
127+
new_contents = text.gsub('#import "Node.h"', '#import "SVGKit/Node.h"')
128+
File.open(file, 'w') { |f| f.write(new_contents) }
129+
end
130+
end
131+
```
132+
133+
After applying this, run:
134+
135+
```sh
136+
cd ios && pod install --repo-update
137+
```
138+
139+
- **Maps not rendering**
140+
- Check that your API key has **Maps SDK for Android/iOS** enabled in Google Cloud Console.
141+
- Make sure the key is not restricted to wrong bundle IDs or SHA1 fingerprints.
142+
28143
## Contributing
29144

30145
- [Development workflow](CONTRIBUTING.md#development-workflow)

‎example/README.md‎

Lines changed: 12 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,22 @@
1-
This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
1+
# React Native Google Maps Plus – Example App
22

3-
# Getting Started
3+
This is the **example application** for [`react-native-google-maps-plus`](https://github.com/yourname/react-native-google-maps-plus).
4+
It demonstrates how to set up and run the package on **Android** and **iOS**.
45

5-
> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding.
6+
---
67

7-
## Step 1: Start Metro
8+
## Prerequisites
89

9-
First, you will need to run **Metro**, the JavaScript build tool for React Native.
10+
- Make sure you have completed the [React Native environment setup](https://reactnative.dev/docs/set-up-your-environment).
11+
- You will need a valid **Google Maps API Key** from the [Google Cloud Console](https://console.cloud.google.com/).
1012

11-
To start the Metro dev server, run the following command from the root of your React Native project:
13+
---
1214

13-
```sh
14-
# Using npm
15-
npm start
16-
17-
# OR using Yarn
18-
yarn start
19-
```
20-
21-
## Step 2: Build and run your app
22-
23-
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:
15+
## Step 1: Add Google Maps API Key
2416

25-
### Android
17+
Create the required secrets files and add your API key:
2618

2719
```sh
28-
# Using npm
29-
npm run android
30-
31-
# OR using Yarn
32-
yarn android
20+
echo MAPS_API_KEY="<YOUR_MAPS_API_KEY>" >> android/secrets.properties
21+
echo MAPS_API_KEY="<YOUR_MAPS_API_KEY>" >> ios/Secrets.xcconfig
3322
```
34-
35-
### iOS
36-
37-
For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).
38-
39-
The first time you create a new project, run the Ruby bundler to install CocoaPods itself:
40-
41-
```sh
42-
bundle install
43-
```
44-
45-
Then, and every time you update your native dependencies, run:
46-
47-
```sh
48-
bundle exec pod install
49-
```
50-
51-
For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
52-
53-
```sh
54-
# Using npm
55-
npm run ios
56-
57-
# OR using Yarn
58-
yarn ios
59-
```
60-
61-
If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.
62-
63-
This is one way to run your app — you can also build it directly from Android Studio or Xcode.
64-
65-
## Step 3: Modify your app
66-
67-
Now that you have successfully run the app, let's make changes!
68-
69-
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).
70-
71-
When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:
72-
73-
- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS).
74-
- **iOS**: Press <kbd>R</kbd> in iOS Simulator.
75-
76-
## Congratulations! :tada:
77-
78-
You've successfully run and modified your React Native App. :partying_face:
79-
80-
### Now what?
81-
82-
- 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).
83-
- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).
84-
85-
# Troubleshooting
86-
87-
If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
88-
89-
# Learn More
90-
91-
To learn more about React Native, take a look at the following resources:
92-
93-
- [React Native Website](https://reactnative.dev) - learn more about React Native.
94-
- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
95-
- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
96-
- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
97-
- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.

‎example/ios/GoogleMapsPlusExample/Debug.xcconfig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
#include "Pods/Target Support Files/Pods-GoogleMapsPlusExample/Pods-GoogleMapsPlusExample.debug.xcconfig"
2-
#include "Secrets.xcconfig"
2+
#include? "Secrets.xcconfig"

‎example/ios/GoogleMapsPlusExample/Release.xcconfig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
#include "Pods/Target Support Files/Pods-GoogleMapsPlusExample/Pods-GoogleMapsPlusExample.release.xcconfig"
2-
#include "Secrets.xcconfig"
2+
#include? "Secrets.xcconfig"

‎lefthook.yml‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,28 @@
11
pre-commit:
22
parallel: false
3-
commands:
4-
lint-js:
5-
glob: '**/*.{js,ts,jsx,tsx}'
3+
jobs:
4+
- name: format
5+
run: yarn format
6+
stage_fixed: true
7+
8+
- name: lint-js
69
run: yarn lint:js
7-
lint-android:
8-
glob: 'android/**/*.{kt,java,xml,gradle}'
10+
11+
- name: lint-android
912
run: yarn lint:android
10-
lint-ios:
11-
glob: 'ios/**/*.{h,m,mm,cpp,swift}'
13+
14+
- name: lint-ios
1215
run: yarn lint:ios
13-
types:
14-
glob: '**/*.{ts,tsx}'
15-
run: npx tsc --noEmit
16+
17+
- name: final-check
18+
run: |
19+
if git diff --cached --quiet HEAD; then
20+
echo "No changes to commit"
21+
exit 1
22+
fi
1623
1724
commit-msg:
18-
parallel: true
19-
commands:
20-
commitlint:
25+
parallel: false
26+
jobs:
27+
- name: commitlint
2128
run: npx commitlint --edit {1}

0 commit comments

Comments
 (0)