react-native-maps 0.30.0 → 0.31.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/README.md +4 -4
  2. package/index.d.ts +10 -7
  3. package/index.js +2 -1
  4. package/lib/android/build.gradle +4 -4
  5. package/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapModule.java +20 -0
  6. package/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapView.java +14 -4
  7. package/lib/components/AnimatedRegion.js +6 -3
  8. package/lib/components/Geojson.js +2 -2
  9. package/lib/components/MapCallout.js +3 -5
  10. package/lib/components/MapCalloutSubview.js +3 -5
  11. package/lib/components/MapCircle.js +5 -5
  12. package/lib/components/MapHeatmap.js +3 -5
  13. package/lib/components/MapLocalTile.js +2 -6
  14. package/lib/components/MapMarker.js +5 -7
  15. package/lib/components/MapOverlay.js +3 -2
  16. package/lib/components/MapPolygon.js +5 -5
  17. package/lib/components/MapPolyline.js +5 -6
  18. package/lib/components/MapUrlTile.js +2 -6
  19. package/lib/components/MapView.js +19 -12
  20. package/lib/components/MapWMSTile.js +2 -6
  21. package/lib/ios/AirMaps/AIRMapManager.m +15 -2
  22. package/lib/ios/AirMaps/AIRMapPolyline.h +1 -0
  23. package/lib/ios/AirMaps/AIRMapPolyline.m +14 -1
  24. package/lib/ios/AirMaps/AIRMapPolylineManager.m +1 -0
  25. package/package.json +42 -5
  26. package/react-native-google-maps.podspec +3 -3
  27. package/react-native-maps.podspec +1 -1
  28. package/.eslintrc +0 -3
  29. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -111
  30. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -32
  31. package/.github/ISSUE_TEMPLATE.md +0 -5
  32. package/.github/PULL_REQUEST_TEMPLATE.md +0 -53
  33. package/.github/stale.yml +0 -17
  34. package/.github/workflows/base.yml +0 -21
  35. package/.prettierrc +0 -4
  36. package/CHANGELOG.md +0 -783
  37. package/docs/callout.md +0 -38
  38. package/docs/circle.md +0 -28
  39. package/docs/examples-setup.md +0 -17
  40. package/docs/geojson.md +0 -52
  41. package/docs/heatmap.md +0 -32
  42. package/docs/installation.md +0 -347
  43. package/docs/mapview.md +0 -252
  44. package/docs/marker.md +0 -85
  45. package/docs/overlay.md +0 -27
  46. package/docs/polygon.md +0 -34
  47. package/docs/polyline.md +0 -65
  48. package/docs/tiles.md +0 -35
  49. package/enable-google-maps +0 -15
package/docs/callout.md DELETED
@@ -1,38 +0,0 @@
1
- # `<Callout />` Component API
2
-
3
- ## Props
4
-
5
- | Prop | Type | Default | Note |
6
- |---|---|---|---|
7
- | `tooltip` | `Boolean` | `false` | If `false`, a default "tooltip" bubble window will be drawn around this callouts children. If `true`, the child views can fully customize their appearance, including any "bubble" like styles.
8
- | `alphaHitTest` | `Boolean` | `false` | If `true`, clicks on transparent areas in callout will be passed to map. **Note**: iOS only.
9
-
10
- ## Events
11
-
12
- | Event Name | Returns | Notes
13
- |---|---|---|
14
- | `onPress` | | Callback that is called when the user presses on the callout
15
-
16
-
17
-
18
- ---
19
-
20
-
21
-
22
- # `<CalloutSubview />` Component API
23
-
24
- **Note**: Supported on iOS only.
25
- Use to handle press on specific subview of callout.
26
- Put this component inside `<Callout />`.
27
-
28
- ## Events
29
-
30
- | Event Name | Returns | Notes
31
- |---|---|---|
32
- | `onPress` | | Callback that is called when the user presses on this subview inside callout
33
-
34
- ## Notes
35
- Native press event has property `action`, which is:
36
- - `callout-press` (or `marker-overlay-press` for GoogleMaps on iOS) for press on `<Callout />`
37
- - `callout-inside-press` (or `marker-inside-overlay-press` for GoogleMaps on iOS) for press on `<CalloutSubview />`
38
-
package/docs/circle.md DELETED
@@ -1,28 +0,0 @@
1
- # `<Circle />` Component API
2
-
3
- ## Props
4
-
5
- | Prop | Type | Default | Note |
6
- |---|---|---|---|
7
- | `center` | `LatLng` | (Required) | The coordinate of the center of the circle
8
- | `radius` | `Number` | (Required) | The radius of the circle to be drawn (in meters)
9
- | `strokeWidth` | `Number` | `1` | The stroke width to use for the path.
10
- | `strokeColor` | `String` | `#000`, `rgba(r,g,b,0.5)` | The stroke color to use for the path.
11
- | `fillColor` | `String` | `#000`, `rgba(r,g,b,0.5)` | The fill color to use for the path.
12
- | `zIndex` | `Number` | 0 | The order in which this tile overlay is drawn with respect to other overlays. An overlay with a larger z-index is drawn over overlays with smaller z-indices. The order of overlays with the same z-index is arbitrary. The default zIndex is 0. (Android Only)
13
- | `lineCap` | `String` | `round` | The line cap style to apply to the open ends of the path. Other values : `butt`, `square`
14
- | `lineJoin` | `String` | | The line join style to apply to corners of the path. possible value: `miter`, `round`, `bevel`
15
- | `miterLimit` | `Number` | | The limiting value that helps avoid spikes at junctions between connected line segments. The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style. If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit, the joint is converted to a bevel join. The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees.
16
- | `geodesic` | `Boolean` | | Boolean to indicate whether to draw each segment of the line as a geodesic as opposed to straight lines on the Mercator projection. A geodesic is the shortest path between two points on the Earth's surface. The geodesic curve is constructed assuming the Earth is a sphere.
17
- | `lineDashPhase` | `Number` | `0` | (iOS only) The offset (in points) at which to start drawing the dash pattern. Use this property to start drawing a dashed line partway through a segment or gap. For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap.
18
- | `lineDashPattern` | `Array<Number>` | `null` | (iOS only) An array of numbers specifying the dash pattern to use for the path. The array contains one or more numbers that indicate the lengths (measured in points) of the line segments and gaps in the pattern. The values in the array alternate, starting with the first line segment length, followed by the first gap length, followed by the second line segment length, and so on.
19
-
20
-
21
- ## Types
22
-
23
- ```
24
- type LatLng {
25
- latitude: Number,
26
- longitude: Number,
27
- }
28
- ```
@@ -1,17 +0,0 @@
1
- # Examples Setup
2
-
3
- ```
4
- cd example/
5
- npm install
6
- ```
7
-
8
- ## iOS
9
- ```
10
- npx pod-install
11
- npx react-native run-ios
12
- ```
13
-
14
- ## android
15
- ```
16
- npx react-native run-android
17
- ```
package/docs/geojson.md DELETED
@@ -1,52 +0,0 @@
1
- # `<Geojson />` Component API
2
-
3
- ## Props
4
-
5
- | Prop | Type | Default | Note |
6
- | --------- | ---- | ------------------------------------------------------ | ---- |
7
- | `geojson` | `GeoJSON` | | [Geojson](https://geojson.org/) description of object. |
8
- | `strokeColor` | `String` | `stroke` property in GeoJson if present else `#000` | The stroke color to use for polygons and polylines. |
9
- | `fillColor` | `String` | `fill` property in GeoJson | The fill color to use for polygons. |
10
- | `strokeWidth` | `Number` | `stroke-width` property in Geojson if present else `1` | The stroke width to use for polygons and polylines. |
11
- | `color` | `String` | `marker-color` property in GeoJson | The color to use for points. |
12
- | `lineDashPhase` | `Number` | | (iOS only) The offset (in points) at which to start drawing the dash pattern. Use this property to start drawing a dashed line partway through a segment or gap. For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap. |
13
- | `lineDashPattern` | `Array<Number>` | | An array of numbers specifying the dash pattern to use for the path. The array contains one or more numbers that indicate the lengths (measured in points) of the line segments and gaps in the pattern. The values in the array alternate, starting with the first line segment length, followed by the first gap length, followed by the second line segment length, and so on. |
14
- | `lineCap` | `'butt' | 'round' | 'square'` | | The line cap style to apply to the open ends of the path. Possible values are `butt`, `round` or `square`. Note: lineCap is not yet supported for GoogleMaps provider on iOS. |
15
- | `lineJoin` | `'miter'| 'round' | 'bevel'` | | The line join style to apply to corners of the path. Possible values are `miter`, `round` or `bevel`. |
16
- | `miterLimit` | `Number` | | The limiting value that helps avoid spikes at junctions between connected line segments. The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style. If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit, the joint is converted to a bevel join. The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees. |
17
- | `zIndex` | `Number` | | Layer level of the z-index value |
18
- | `onPress` | `Function` | | returns the selected overlay value with the onPress functionality |
19
- | `markerComponent` | `React Node` | | Component to render in place of the default marker when the overlay type is a `point`
20
- | `title` | `string` | | The title of the marker. This is only used if the <Marker /> component has no children that are a `<Callout />`
21
-
22
- ## Example
23
-
24
- ```
25
- import React from 'react';
26
- import MapView, {Geojson} from 'react-native-maps';
27
-
28
- const myPlace = {
29
- type: 'FeatureCollection',
30
- features: [
31
- {
32
- type: 'Feature',
33
- properties: {},
34
- geometry: {
35
- type: 'Point',
36
- coordinates: [64.165329, 48.844287],
37
- }
38
- }
39
- ]
40
- };
41
-
42
- const Map = props => (
43
- <MapView>
44
- <Geojson
45
- geojson={myPlace}
46
- strokeColor="red"
47
- fillColor="green"
48
- strokeWidth={2}
49
- />
50
- </MapView>
51
- );
52
- ```
package/docs/heatmap.md DELETED
@@ -1,32 +0,0 @@
1
- # `<Heatmap />` Component API
2
-
3
- ## Props
4
-
5
- | Prop | Type | Default | Note |
6
- |---|---|---|---|
7
- | `points` | `Array<WeightedLatLng>` | | Array of heatmap entries to apply towards density.
8
- | `radius` | `Number` | `20` | The radius of the heatmap points in pixels, between 10 and 50.
9
- | `opacity` | `Number` | `0.7` | The opacity of the heatmap.
10
- | `gradient` | `Object` | | Heatmap gradient configuration (See below for *Gradient Config*).
11
-
12
-
13
- ## Gradient Config
14
-
15
- [Android Doc](https://developers.google.com/maps/documentation/android-sdk/utility/heatmap#custom) | [iOS Doc](https://developers.google.com/maps/documentation/ios-sdk/utility/heatmap#customize)
16
-
17
- | Prop | Type | Default | Note |
18
- |---|---|---|---|
19
- | `colors` | `Array<String>` | | Colors (one or more) to use for gradient.
20
- | `startPoints` | `Array<Number>` | | Array of floating point values from 0 to 1 representing where each color starts. Array length must be equal to `colors` array length.
21
- | `colorMapSize` | `Number` | `256` | Resolution of color map -- number corresponding to the number of steps colors are interpolated into.
22
-
23
-
24
- ## Types
25
-
26
- ```
27
- type WeightedLatLng = {
28
- latitude: Number;
29
- longitude: Number;
30
- weight?: Number;
31
- }
32
- ```
@@ -1,347 +0,0 @@
1
- # Installation
2
-
3
- Install the library from npm:
4
-
5
- ```sh
6
- npm install react-native-maps --save-exact
7
- ```
8
-
9
- The library ships with platform native code that needs to be compiled together with React Native. This requires you to configure your build tools.
10
-
11
- **Since React Native 0.60 and higher**, [autolinking](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md) makes the installation process simpler.
12
-
13
- **Using React Native 0.59 or lower?** Please refer to [the old installation guide](https://github.com/react-native-maps/react-native-maps/blob/5be836e1290457c4c7cefe83246ef532859c692d/docs/installation.md).
14
-
15
- The actual map implementation depends on the platform. On Android, one has to use [Google Maps](https://developers.google.com/maps/documentation/), which in turn requires you to obtain an [API key for the Android SDK](https://developers.google.com/maps/documentation/android-sdk/signup).
16
-
17
- On iOS, one can choose between Google Maps or the native [Apple Maps](https://developer.apple.com/documentation/mapkit/) implementation.
18
-
19
- When using Google Maps on iOS, you need also to obtain an [API key for the iOS SDK](https://developers.google.com/maps/documentation/ios-sdk/get-api-key) and include the Google Maps library in your build. The native Apple Maps based implementation works out-of-the-box and is therefore simpler to use at the price of missing some of the features supported by the Google Maps backend.
20
-
21
- > **WARNING**: Before you can start using the Google Maps Platform APIs and SDKs, you must sign up and create a [billing account](https://developers.google.com/maps/gmp-get-started#create-billing-account)!
22
-
23
- ---
24
-
25
- ## Build configuration on iOS
26
-
27
- ### Using CocoaPods
28
-
29
- After installing the npm package, we need to install the pod.
30
-
31
- ```sh
32
- npx pod-install
33
- ```
34
-
35
- ### Set the usage description property
36
-
37
- The app's `Info.plist` file must contain a `NSLocationWhenInUseUsageDescription` with a user-facing purpose string explaining clearly and completely why your app needs the location, otherwise Apple will reject your app submission.
38
-
39
- ### Enabling Google Maps
40
-
41
- If you want to enable Google Maps on iOS, obtain the Google API key and edit your `AppDelegate.m` as follows:
42
-
43
- ```diff
44
- + #import <GoogleMaps/GoogleMaps.h>
45
-
46
- @implementation AppDelegate
47
- ...
48
-
49
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
50
- {
51
- + [GMSServices provideAPIKey:@"_YOUR_API_KEY_"]; // add this line using the api key obtained from Google Console
52
- ...
53
- ```
54
-
55
- The `[GMSServices provideAPIKey]` should be the **first call** of the method.
56
-
57
- Add the following to your Podfile above the `use_native_modules!` function and run `pod install` in the ios folder:
58
-
59
- ```ruby
60
- # React Native Maps dependencies
61
- rn_maps_path = '../node_modules/react-native-maps'
62
- pod 'react-native-google-maps', :path => rn_maps_path
63
- ```
64
-
65
- That's it, you made it! 👍
66
-
67
- ---
68
-
69
- ## Build configuration on Android
70
-
71
- Ensure your build files match the following requirements:
72
-
73
- 1. **Configure Google Play Services**
74
-
75
- **If you've defined _[project-wide properties](https://developer.android.com/studio/build/gradle-tips.html)_ (_recommended_) in your root `build.gradle`, this library will detect the presence of the following properties:**
76
-
77
- ```groovy
78
- buildscript {...}
79
- allprojects {...}
80
-
81
- /**
82
- + Project-wide Gradle configuration properties
83
- */
84
- ext {
85
- compileSdkVersion = xxx
86
- targetSdkVersion = xxx
87
- buildToolsVersion = "xxx"
88
- minSdkVersion = xxx
89
- supportLibVersion = "xxx"
90
- playServicesVersion = "17.0.0" // or find latest version
91
- androidMapsUtilsVersion = "xxx"
92
- }
93
- ```
94
-
95
- or do
96
-
97
- ```groovy
98
- buildscript {
99
- ext {
100
- buildToolsVersion = "xxx"
101
- minSdkVersion = xxx
102
- compileSdkVersion = xxx
103
- targetSdkVersion = xxx
104
- supportLibVersion = "xxx"
105
- playServicesVersion = "17.0.0" // or find latest version
106
- androidMapsUtilsVersion = "xxx"
107
- }
108
- }
109
- ...
110
- ```
111
-
112
- You can find the latest `playServicesVersion` by checking [https://developers.google.com/android/guides/releases](https://developers.google.com/android/guides/releases) and searching for `gms:play-services-maps:`
113
-
114
- You can find the latest `androidMapsUtilsVersion` by checking [https://mvnrepository.com/artifact/com.google.maps.android/android-maps-utils](https://mvnrepository.com/artifact/com.google.maps.android/android-maps-utils)
115
-
116
- **If you do _not_ have _project-wide properties_ defined and have a different play-services version than the one included in this library, use the following instead (switch 17.0.0 and/or 17.2.1 for the desired versions):**
117
-
118
- ```groovy
119
- ...
120
- dependencies {
121
- ...
122
- implementation(project(':react-native-maps')){
123
- exclude group: 'com.google.android.gms', module: 'play-services-base'
124
- exclude group: 'com.google.android.gms', module: 'play-services-maps'
125
- }
126
- implementation 'com.google.android.gms:play-services-base:17.2.1'
127
- implementation 'com.google.android.gms:play-services-maps:17.0.0'
128
- }
129
- ```
130
-
131
- 2. **Specify your Google Maps API key:**
132
-
133
- Add your API key to your manifest file (`android/app/src/main/AndroidManifest.xml`):
134
-
135
- ```xml
136
- <application>
137
- <!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
138
- <meta-data
139
- android:name="com.google.android.geo.API_KEY"
140
- android:value="Your Google maps API Key Here"/>
141
-
142
- <!-- You will also only need to add this uses-library tag -->
143
- <uses-library android:name="org.apache.http.legacy" android:required="false"/>
144
- </application>
145
- ```
146
-
147
- > Note: As shown above, `com.google.android.geo.API_KEY` is the
148
- > recommended metadata name for the API key. A key with this name can be
149
- > used to authenticate to multiple Google Maps-based APIs on the Android
150
- > platform, including the Google Maps Android API. For backwards
151
- > compatibility, the API also supports the name
152
- > `com.google.android.maps.v2.API_KEY`. This legacy name allows
153
- > authentication to the Android Maps API v2 only. An application can
154
- > specify only one of the API key metadata names. If both are specified,
155
- > the API throws an exception.
156
-
157
- Source: https://developers.google.com/maps/documentation/android-api/signup
158
-
159
- 3. **Ensure that you have Google Play Services installed:**
160
-
161
- - For the Genymotion emulator, you can follow [these instructions](https://www.genymotion.com/help/desktop/faq/#google-play-services).
162
- - For a physical device you need to search on Google for 'Google Play
163
- Services'. There will be a link that takes you to the Play Store and
164
- from there you will see a button to update it (do not search within the
165
- Play Store).
166
-
167
- That's it, you made it! :+1:
168
-
169
- ---
170
-
171
- ## Troubleshooting
172
-
173
- ### The map background is blank (Google Maps)
174
-
175
- If google logo/markers/polylines etc are displayed but the map
176
- background is otherwise blank, this is likely an API key issue. Verify
177
- your API keys and their restrictions. Ensure the native `provideAPIKey`
178
- call is the first line of `didFinishLaunchingWithOptions`.
179
-
180
- Ensure also that the relevant Google APIs have been enabled for your
181
- project from the URLs below:
182
-
183
- - [Google Maps SDK Android](https://console.developers.google.com/apis/library/maps-android-backend.googleapis.com/)
184
- - [Google Maps SDK iOS (if required)](https://console.developers.google.com/apis/library/maps-ios-backend.googleapis.com)
185
-
186
- For reference, you may read the relevant issue reports: ([#118](https://github.com/react-native-maps/react-native-maps/issues/118), [#176](https://github.com/react-native-maps/react-native-maps/issues/176), [#684](https://github.com/react-native-maps/react-native-maps/issues/684)).
187
-
188
- ### The map background is gray (Google Maps)
189
-
190
- If you get grey screen on android device create google_maps_api.xml in android/app/src/main/res/values.
191
-
192
- ```xml
193
- <resources>
194
- <string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">(api key here)</string>
195
- </resources>
196
- ```
197
-
198
- ### No map whatsoever
199
-
200
- Ensure the map component and its container have viewport dimensions. An
201
- example is below:
202
-
203
- ```jsx
204
- import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'; // remove PROVIDER_GOOGLE import if not using Google Maps
205
- ...
206
- const styles = StyleSheet.create({
207
- container: {
208
- ...StyleSheet.absoluteFillObject,
209
- height: 400,
210
- width: 400,
211
- justifyContent: 'flex-end',
212
- alignItems: 'center',
213
- },
214
- map: {
215
- ...StyleSheet.absoluteFillObject,
216
- },
217
- });
218
-
219
- export default () => (
220
- <View style={styles.container}>
221
- <MapView
222
- provider={PROVIDER_GOOGLE} // remove if not using Google Maps
223
- style={styles.map}
224
- region={{
225
- latitude: 37.78825,
226
- longitude: -122.4324,
227
- latitudeDelta: 0.015,
228
- longitudeDelta: 0.0121,
229
- }}
230
- >
231
- </MapView>
232
- </View>
233
- );
234
- ```
235
-
236
- ### Build issues with Google Maps iOS Utils (iOS)
237
-
238
- If your XCode project uses dynamic frameworks (e.g. you also have Swift
239
- code in your project), you cannot install `Google-Maps-iOS-Utils` with
240
- CocoaPods. The issue and a workaround for it has been documented
241
- [here](https://github.com/googlemaps/google-maps-ios-utils/blob/b721e95a500d0c9a4fd93738e83fc86c2a57ac89/Swift.md).
242
-
243
- ### Runtime errors on iOS (Apple Maps)
244
-
245
- If you are trying to mount the map with the `GOOGLE_PROVIDER` during
246
- runtime, but your build has been configured for the Apple Maps backend,
247
- a runtime exception will be raised.
248
-
249
- In addition, when using Apple Maps, some Google-only functionalities
250
- have been disabled via runtime errors.
251
-
252
- An exception will be raised if you try to use advanced features that
253
- depend on the [Google Maps SDK for
254
- iOS](https://github.com/googlemaps/google-maps-ios-utils). These include
255
-
256
- - Making markers from KML files
257
- - Heatmap rendering
258
- - Marker clustering
259
- - etc.
260
-
261
- ### Clearing caches
262
-
263
- Run these commands to clean caches
264
-
265
- ```sh
266
- watchman watch-del-all
267
- npm cache clean
268
-
269
- # Android, if you encounter `com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim`, then clear build folder.
270
- cd android
271
- ./gradlew clean
272
- cd ..
273
- ```
274
-
275
- ### When using Android studio
276
-
277
- Make sure your Android studio is up to date and set up following the [React Native docs](https://reactnative.dev/docs/environment-setup).
278
-
279
- In particular, the following packages have to be installed:
280
-
281
- - Extras / Google Play services
282
- - Extras / Google Repository
283
- - Android 6.0 (API 23) / Google APIs Intel x86 Atom System Image Rev. 19
284
- - Android SDK Build-tools 23.0.3
285
-
286
- ### No native module found exception on Android
287
-
288
- Be sure to have `new MapsPackage()` in your `MainApplication.java` :
289
-
290
- ```java
291
- import com.airbnb.android.react.maps.MapsPackage;
292
- ...
293
- @Override
294
- protected List<ReactPackage> getPackages() {
295
- return Arrays.<ReactPackage>asList(
296
- new MainReactPackage(),
297
- new MapsPackage()
298
- );
299
- }
300
- ```
301
-
302
- ### Android emulator issues
303
-
304
- - When starting Android emulator, make sure you have enabled `Wipe user data`.
305
- - If you are using Android Virtual Devices (AVD), ensure that `Use Host GPU` is checked in the settings for your virtual device.
306
- - If using an emulator and the only thing that shows up on the screen is
307
- the message: `[APPNAME] won't run without Google Play services which are not supported by your device.`, you need to change the emulator
308
- CPU/ABI setting to a system image that includes Google APIs. These may
309
- need to be downloaded from the Android SDK Manager first.
310
-
311
- ### Google Play Services conflicting issues with other modules
312
-
313
- In case you have multiple modules using Google Play Services such as `react-native-onesignal`, Make sure to exclude all the Google Play Services dependencies from the modules and import all the Google Play Services dependencies for all the modules in the project-wide `build.gradle` file like the following example:
314
-
315
- ```groovy
316
- implementation(project(':react-native-onesignal')){
317
- exclude group: 'com.google.android.gms'
318
- }
319
-
320
- implementation(project(':react-native-maps')){
321
- exclude group: 'com.google.android.gms'
322
- }
323
- implementation 'com.google.android.gms:play-services-base:12.0.1'
324
- implementation 'com.google.android.gms:play-services-basement:12.0.1'
325
- implementation 'com.google.android.gms:play-services-location:12.0.1'
326
- implementation 'com.google.android.gms:play-services-tasks:12.0.1'
327
- implementation 'com.google.android.gms:play-services-maps:12.0.1'
328
- ```
329
-
330
- ### Trouble with Google Play services
331
-
332
- - Make sure that your emulator has Google Play (Go to Android studio -> Virtual Devices -> Check that you have icon in "Play Store" column)
333
- - Click to bottom dots icon in the emulator
334
- - Go to Google Play Tab and click Update
335
-
336
- ### Android build error: "Program type already present"
337
-
338
- If you **don't** use project-wide properties as per instructions above (not making changes to global android/build.gradle) and encounter at build time "Program type already present" error - add those lines to your android/app/build.gradle in the dependencies section:
339
-
340
- ```groovy
341
- dependencies {
342
- ...
343
- implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
344
- implementation "com.android.support:design:${rootProject.ext.supportLibVersion}"
345
- implementation "com.android.support:support-v4:${rootProject.ext.supportLibVersion}"
346
- }
347
- ```