diff --git a/docs/installation.md b/docs/installation.md index bf7941d99f..c387edb544 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -166,6 +166,22 @@ Source: https://developers.google.com/maps/documentation/android-api/signup That's it, you made it! :+1: +## Using the new Google Maps Renderer + +As of version 18.0.0 of the Maps SDK for Android an upgraded map renderer is available. All of its improvements can be found [here](https://developers.google.com/maps/documentation/android-sdk/renderer). The new renderer will become the default through a progressive rollout starting in June 2022 at the earliest. + +To opt in to the new renderer add the following code in your entry file (e.g. App.js): + +```javascript +import { enableLatestRenderer } from 'react-native-maps'; + +enableLatestRenderer(); +``` + +`enableLatestRenderer` returns a promise (on android) specifying the map renderer being used, either `'LATEST' | 'LEGACY'`. It can be called at any point to get the renderer being used, but it won't change after the first map has been rendered. + +Make sure to test your app thoroughly after enabling the new renderer, as it seems to cause some behavioural changes, e.g. [this](https://github.com/react-native-maps/react-native-maps/pull/4055#issuecomment-1063358886). + --- ## Troubleshooting diff --git a/index.d.ts b/index.d.ts index 7645993200..b8ecef6d28 100644 --- a/index.d.ts +++ b/index.d.ts @@ -629,6 +629,8 @@ declare module 'react-native-maps' { MUTEDSTANDARD: MapTypes; }; + export const enableLatestRenderer: () => Promise<'LATEST' | 'LEGACY'> | void; + export const PROVIDER_DEFAULT: null; export const PROVIDER_GOOGLE: 'google'; } diff --git a/index.js b/index.js index 8e16e1a675..852c50aa5a 100644 --- a/index.js +++ b/index.js @@ -2,6 +2,7 @@ import MapView, { Animated, MAP_TYPES, ProviderPropType, + enableLatestRenderer, } from './lib/components/MapView'; import Marker from './lib/components/MapMarker.js'; import Overlay from './lib/components/MapOverlay.js'; @@ -19,7 +20,7 @@ export { default as AnimatedRegion } from './lib/components/AnimatedRegion.js'; export { default as Geojson } from './lib/components/Geojson.js'; export { Marker, Overlay }; -export { Animated, MAP_TYPES, ProviderPropType }; +export { Animated, MAP_TYPES, ProviderPropType, enableLatestRenderer }; export const PROVIDER_GOOGLE = MapView.PROVIDER_GOOGLE; export const PROVIDER_DEFAULT = MapView.PROVIDER_DEFAULT; diff --git a/lib/android/build.gradle b/lib/android/build.gradle index a71642f401..836a2eb070 100644 --- a/lib/android/build.gradle +++ b/lib/android/build.gradle @@ -25,9 +25,9 @@ dependencies { implementation('com.facebook.react:react-native:+') { exclude group: 'com.android.support' } - implementation "com.google.android.gms:play-services-base:${safeExtGet('playServicesVersion', '17.0.0')}" - implementation "com.google.android.gms:play-services-maps:${safeExtGet('playServicesVersion', '17.0.0')}" - implementation "com.google.android.gms:play-services-location:17.0.0" + implementation "com.google.android.gms:play-services-base:${safeExtGet('playServicesVersion', '18.0.1')}" + implementation "com.google.android.gms:play-services-maps:${safeExtGet('playServicesVersion', '18.0.2')}" + implementation "com.google.android.gms:play-services-location:19.0.1" implementation 'com.google.maps.android:android-maps-utils:0.5' implementation "androidx.work:work-runtime:$work_version" } diff --git a/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapModule.java b/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapModule.java index a85c7bcedb..fdc0ac7103 100644 --- a/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapModule.java +++ b/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapModule.java @@ -8,6 +8,7 @@ import android.net.Uri; import android.util.Base64; import android.util.DisplayMetrics; +import android.util.Log; import com.facebook.react.bridge.Promise; import com.facebook.react.bridge.ReactApplicationContext; @@ -21,6 +22,7 @@ import com.facebook.react.uimanager.UIBlock; import com.facebook.react.uimanager.UIManagerModule; import com.google.android.gms.maps.GoogleMap; +import com.google.android.gms.maps.MapsInitializer; import com.google.android.gms.maps.model.CameraPosition; import com.google.android.gms.maps.model.LatLng; @@ -352,4 +354,22 @@ public void execute(NativeViewHierarchyManager nvhm) } }); } + + @ReactMethod + public void enableLatestRenderer(final Promise promise) { + final ReactApplicationContext context = getReactApplicationContext(); + + UIManagerModule uiManager = context.getNativeModule(UIManagerModule.class); + uiManager.addUIBlock(new UIBlock() + { + @Override + public void execute(NativeViewHierarchyManager nvhm) + { + MapsInitializer.initialize(context, MapsInitializer.Renderer.LATEST, (MapsInitializer.Renderer renderer) -> { + Log.d("AirMapRenderer", renderer.toString()); + promise.resolve(renderer.toString()); + }); + } + }); + } } diff --git a/lib/components/MapView.js b/lib/components/MapView.js index c802e9cd1a..ed8c60ebaa 100644 --- a/lib/components/MapView.js +++ b/lib/components/MapView.js @@ -1119,6 +1119,13 @@ if (!NativeModules.UIManager.getViewManagerConfig) { export const Animated = RNAnimated.createAnimatedComponent(MapView); +export const enableLatestRenderer = () => { + if (Platform.OS !== 'android') { + return; + } + return NativeModules.AirMapModule.enableLatestRenderer(); +}; + export const ProviderPropType = PropTypes.oneOf( Object.values(ProviderConstants) );