feat(android): add support for new google maps renderer (react-native…

…-maps#4055) * Maps SDK 18.0.0 * Update installation.md * Update installation.md * Update debug log * Update opt in function name * feat(android): bump play services * docs: update new renderer rollout date * docs: add warning for new renderer * fix: eslint warning Co-authored-by: Simon-TechForm <[email protected]>
GET-A-WAY · Apr 5, 2023 · aa58ddd · aa58ddd
1 parent 71d4f9f
commit aa58ddd
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)
 );