chore: address review comments

Author: jokerttu

MIGRATING.md

@@ -16,7 +16,7 @@ Version 0.14.0 introduces React Native's **New Architecture** (Fabric & TurboMod
 
 | Category        | Change                                                                                              |
 | --------------- | --------------------------------------------------------------------------------------------------- |
-| Architecture    | New Architecture required (React Native 0.77+)                                                      |
+| Architecture    | New Architecture required (React Native 0.79+)                                                      |
 | Native SDKs     | Android Navigation SDK 7.3.0, iOS Navigation SDK 10.7.0                                             |
 | Navigation Init | Terms and Conditions dialog and session initialization are now separate methods                     |
 | Navigation Init | `init()` now returns `NavigationSessionStatus` instead of throwing errors                           |
@@ -39,7 +39,7 @@ Version 0.14.0 introduces React Native's **New Architecture** (Fabric & TurboMod
 
 ### Prerequisites
 
-- **React Native 0.77 or higher** is required
+- **React Native 0.79 or higher** is required
 - **New Architecture must be enabled** in your project
 
 ### Step 1: Enable New Architecture

README.md

@@ -33,10 +33,13 @@ This repository contains a React Native plugin that provides a [Google Navigatio
 
 The current version of this package has been tested and verified to work with the following React Native versions: 
 
-**0.81.1, 0.80.2, 0.79.6, 0.78.3, 0.77.3**
+**0.83.1, 0.82.1, 0.81.5, 0.80.3, 0.79.6**
 
 > [!IMPORTANT]
-> This package requires React Native 0.77+ with the new architecture (Fabric & TurboModules) enabled. Make sure the new architecture is enabled in your project configuration as shown in the [Installation](#installation) section.
+> This package requires React Native 0.79+ with the new architecture (Fabric & TurboModules) enabled. Make sure the new architecture is enabled in your project configuration as shown in the [Installation](#installation) section.
+
+> [!NOTE]
+> React Native 0.78.x and below are not supported due to Kotlin version incompatibility. If you need to use older React Native versions, please use version 0.13.x of this package with the old architecture.
 
 > [!NOTE]
 > For users upgrading from versions prior to 0.14.0, please refer to the [Migration Guide](./MIGRATING.md) for instructions on migrating to the new architecture and updated API.

android/src/main/java/com/google/android/react/navsdk/IMapViewControllerProperties.java

@@ -28,6 +28,8 @@ public interface IMapViewControllerProperties {
 
   void setIndoorEnabled(boolean enabled);
 
+  void setIndoorLevelPickerEnabled(boolean enabled);
+
   void setTrafficEnabled(boolean enabled);
 
   void setCompassEnabled(boolean enabled);

android/src/main/java/com/google/android/react/navsdk/MapViewController.java

@@ -843,6 +843,12 @@ public void setIndoorEnabled(boolean enabled) {
     }
   }
 
+  public void setIndoorLevelPickerEnabled(boolean enabled) {
+    if (mGoogleMap != null) {
+      mGoogleMap.getUiSettings().setIndoorLevelPickerEnabled(enabled);
+    }
+  }
+
   public void setTrafficEnabled(boolean enabled) {
     if (mGoogleMap != null) {
       mGoogleMap.setTrafficEnabled(enabled);

android/src/main/java/com/google/android/react/navsdk/NavViewManager.java

@@ -464,6 +464,11 @@ public void setIndoorEnabled(FrameLayout view, boolean enabled) {
     getMapControllerProperties(view.getId()).setIndoorEnabled(enabled);
   }
 
+  @ReactProp(name = "indoorLevelPickerEnabled", defaultBoolean = true)
+  public void setIndoorLevelPickerEnabled(FrameLayout view, boolean enabled) {
+    getMapControllerProperties(view.getId()).setIndoorLevelPickerEnabled(enabled);
+  }
+
   @ReactProp(name = "trafficEnabled", defaultBoolean = false)
   public void setTrafficEnabled(FrameLayout view, boolean enabled) {
     getMapControllerProperties(view.getId()).setTrafficEnabled(enabled);

android/src/main/java/com/google/android/react/navsdk/ViewPropertiesSink.java

@@ -35,6 +35,7 @@ public class ViewPropertiesSink
   @Nullable private String mapStyle;
   @Nullable private Boolean mapToolbarEnabled;
   @Nullable private Boolean indoorEnabled;
+  @Nullable private Boolean indoorLevelPickerEnabled;
   @Nullable private Boolean trafficEnabled;
   @Nullable private Boolean compassEnabled;
   @Nullable private Boolean buildingsEnabled;
@@ -99,6 +100,11 @@ public void setIndoorEnabled(boolean enabled) {
     this.indoorEnabled = enabled;
   }
 
+  @Override
+  public void setIndoorLevelPickerEnabled(boolean enabled) {
+    this.indoorLevelPickerEnabled = enabled;
+  }
+
   @Override
   public void setTrafficEnabled(boolean enabled) {
     this.trafficEnabled = enabled;
@@ -246,6 +252,9 @@ public void applyToController(MapViewController controller) {
     if (indoorEnabled != null) {
       controller.setIndoorEnabled(indoorEnabled);
     }
+    if (indoorLevelPickerEnabled != null) {
+      controller.setIndoorLevelPickerEnabled(indoorLevelPickerEnabled);
+    }
     if (trafficEnabled != null) {
       controller.setTrafficEnabled(trafficEnabled);
     }
@@ -364,6 +373,7 @@ public void clear() {
     mapStyle = null;
     mapToolbarEnabled = null;
     indoorEnabled = null;
+    indoorLevelPickerEnabled = null;
     trafficEnabled = null;
     compassEnabled = null;
     buildingsEnabled = null;

example/e2e/shared.js

@@ -19,7 +19,7 @@ import { device, element, waitFor, by, expect, log } from 'detox';
 const NO_ERRORS_DETECTED_LABEL = 'No errors detected';
 
 // Helper function to add delays for iOS animations (iOS default transition is ~300ms)
-const maybeDelay = ms =>
+const iOSDelay = ms =>
   device.getPlatform() === 'ios'
     ? new Promise(resolve => setTimeout(resolve, ms))
     : Promise.resolve();
@@ -88,16 +88,16 @@ export const initializeIntegrationTestsPage = async () => {
   await waitFor(element(by.id('integration_tests_button')))
     .toBeVisible()
     .withTimeout(30000);
-  await maybeDelay(350);
+  await iOSDelay(350);
   await element(by.id('integration_tests_button')).tap();
-  await maybeDelay(350);
+  await iOSDelay(350);
 };
 
 export const selectTestByName = async name => {
   await waitFor(element(by.id('tests_menu_button')))
     .toBeVisible()
     .withTimeout(10000);
-  await maybeDelay(350);
+  await iOSDelay(350);
   await element(by.id('tests_menu_button')).tap();
   // Wait for the overlay scroll view to be visible
   await waitFor(element(by.id('overlay_scroll_view')))
@@ -141,6 +141,6 @@ export const selectTestByName = async name => {
     await waitFor(targetElement).toBeVisible().withTimeout(5000);
   }
 
-  await maybeDelay(600);
+  await iOSDelay(600);
   await targetElement.tap();
 };

example/src/controls/mapsControls.tsx

@@ -46,6 +46,29 @@ export interface MapControlsProps {
     enabled: boolean,
     buttonEnabled: boolean
   ) => void;
+  // UI Settings
+  readonly compassEnabled?: boolean;
+  readonly onCompassEnabledChange?: (enabled: boolean) => void;
+  readonly mapToolbarEnabled?: boolean;
+  readonly onMapToolbarEnabledChange?: (enabled: boolean) => void;
+  readonly indoorEnabled?: boolean;
+  readonly onIndoorEnabledChange?: (enabled: boolean) => void;
+  readonly indoorLevelPickerEnabled?: boolean;
+  readonly onIndoorLevelPickerEnabledChange?: (enabled: boolean) => void;
+  readonly rotateGesturesEnabled?: boolean;
+  readonly onRotateGesturesEnabledChange?: (enabled: boolean) => void;
+  readonly scrollGesturesEnabled?: boolean;
+  readonly onScrollGesturesEnabledChange?: (enabled: boolean) => void;
+  readonly scrollGesturesDuringRotateOrZoomEnabled?: boolean;
+  readonly onScrollGesturesDuringRotateOrZoomEnabledChange?: (
+    enabled: boolean
+  ) => void;
+  readonly tiltGesturesEnabled?: boolean;
+  readonly onTiltGesturesEnabledChange?: (enabled: boolean) => void;
+  readonly zoomControlsEnabled?: boolean;
+  readonly onZoomControlsEnabledChange?: (enabled: boolean) => void;
+  readonly zoomGesturesEnabled?: boolean;
+  readonly onZoomGesturesEnabledChange?: (enabled: boolean) => void;
 }
 
 export const defaultZoom: number = 15;
@@ -59,6 +82,27 @@ const MapsControls: React.FC<MapControlsProps> = ({
   myLocationEnabled = false,
   myLocationButtonEnabled: _myLocationButtonEnabled = true,
   onMyLocationChange,
+  // UI Settings
+  compassEnabled = true,
+  onCompassEnabledChange,
+  mapToolbarEnabled = true,
+  onMapToolbarEnabledChange,
+  indoorEnabled = true,
+  onIndoorEnabledChange,
+  indoorLevelPickerEnabled = true,
+  onIndoorLevelPickerEnabledChange,
+  rotateGesturesEnabled = true,
+  onRotateGesturesEnabledChange,
+  scrollGesturesEnabled = true,
+  onScrollGesturesEnabledChange,
+  scrollGesturesDuringRotateOrZoomEnabled = true,
+  onScrollGesturesDuringRotateOrZoomEnabledChange,
+  tiltGesturesEnabled = true,
+  onTiltGesturesEnabledChange,
+  zoomControlsEnabled = true,
+  onZoomControlsEnabledChange,
+  zoomGesturesEnabled = true,
+  onZoomGesturesEnabledChange,
 }) => {
   const mapTypeOptions = ['None', 'Normal', 'Satellite', 'Terrain', 'Hybrid'];
   const colorSchemeOptions = ['Follow System', 'Light', 'Dark'];
@@ -141,7 +185,21 @@ const MapsControls: React.FC<MapControlsProps> = ({
 
   const getUiSettings = async () => {
     const result = await mapViewController.getUiSettings();
-    showSnackbar(`UI Settings: compass=${result.isCompassEnabled}`);
+    showSnackbar(
+      `UI Settings:\n` +
+        `- Compass: ${result.isCompassEnabled}\n` +
+        `- Map Toolbar: ${result.isMapToolbarEnabled}\n` +
+        `- Indoor Picker: ${result.isIndoorLevelPickerEnabled}\n` +
+        `- Rotate: ${result.isRotateGesturesEnabled}\n` +
+        `- Scroll: ${result.isScrollGesturesEnabled}\n` +
+        `- Scroll (rotate/zoom): ${result.isScrollGesturesEnabledDuringRotateOrZoom}\n` +
+        `- Tilt: ${result.isTiltGesturesEnabled}\n` +
+        `- Zoom Controls: ${result.isZoomControlsEnabled}\n` +
+        `- Zoom Gestures: ${result.isZoomGesturesEnabled}`,
+      5000,
+      true,
+      12
+    );
   };
 
   const getIsMyLocationEnabled = async () => {
@@ -246,9 +304,9 @@ const MapsControls: React.FC<MapControlsProps> = ({
   };
 
   /**
-   * Add a ground overlay using position-based positioning.
+   * Add a ground overlay using location-based positioning.
    * This uses a location with width/height in meters.
-   * Note: On iOS, zoomLevel is required for position-based overlays.
+   * Note: On iOS, zoomLevel is required for location-based overlays.
    */
   const addGroundOverlayWithPosition = async () => {
     const cameraPosition = await mapViewController.getCameraPosition();
@@ -472,13 +530,99 @@ const MapsControls: React.FC<MapControlsProps> = ({
             }}
           />
         </View>
+        <View style={ControlStyles.rowContainer}>
+          <Text style={ControlStyles.rowLabel}>Compass</Text>
+          <ExampleAppButton
+            title={compassEnabled ? 'Disable' : 'Enable'}
+            onPress={() => onCompassEnabledChange?.(!compassEnabled)}
+          />
+        </View>
+        <View style={ControlStyles.rowContainer}>
+          <Text style={ControlStyles.rowLabel}>Map Toolbar</Text>
+          <ExampleAppButton
+            title={mapToolbarEnabled ? 'Disable' : 'Enable'}
+            onPress={() => onMapToolbarEnabledChange?.(!mapToolbarEnabled)}
+          />
+        </View>
+        <View style={ControlStyles.rowContainer}>
+          <Text style={ControlStyles.rowLabel}>Indoor Maps</Text>
+          <ExampleAppButton
+            title={indoorEnabled ? 'Disable' : 'Enable'}
+            onPress={() => onIndoorEnabledChange?.(!indoorEnabled)}
+          />
+        </View>
+        <View style={ControlStyles.rowContainer}>
+          <Text style={ControlStyles.rowLabel}>Indoor Picker</Text>
+          <ExampleAppButton
+            title={indoorLevelPickerEnabled ? 'Disable' : 'Enable'}
+            onPress={() =>
+              onIndoorLevelPickerEnabledChange?.(!indoorLevelPickerEnabled)
+            }
+          />
+        </View>
         <ExampleAppButton title="Get UI Settings" onPress={getUiSettings} />
         <ExampleAppButton title="Get My location" onPress={getMyLocation} />
         <ExampleAppButton
           title="Get My location enabled"
           onPress={getIsMyLocationEnabled}
         />
       </Accordion>
+
+      {/* Gestures */}
+      <Accordion title="Gesture Settings">
+        <View style={ControlStyles.rowContainer}>
+          <Text style={ControlStyles.rowLabel}>Rotate gestures</Text>
+          <ExampleAppButton
+            title={rotateGesturesEnabled ? 'Disable' : 'Enable'}
+            onPress={() =>
+              onRotateGesturesEnabledChange?.(!rotateGesturesEnabled)
+            }
+          />
+        </View>
+        <View style={ControlStyles.rowContainer}>
+          <Text style={ControlStyles.rowLabel}>Scroll gestures</Text>
+          <ExampleAppButton
+            title={scrollGesturesEnabled ? 'Disable' : 'Enable'}
+            onPress={() =>
+              onScrollGesturesEnabledChange?.(!scrollGesturesEnabled)
+            }
+          />
+        </View>
+        <View style={ControlStyles.rowContainer}>
+          <Text style={ControlStyles.rowLabel}>Scroll during rotate/zoom</Text>
+          <ExampleAppButton
+            title={
+              scrollGesturesDuringRotateOrZoomEnabled ? 'Disable' : 'Enable'
+            }
+            onPress={() =>
+              onScrollGesturesDuringRotateOrZoomEnabledChange?.(
+                !scrollGesturesDuringRotateOrZoomEnabled
+              )
+            }
+          />
+        </View>
+        <View style={ControlStyles.rowContainer}>
+          <Text style={ControlStyles.rowLabel}>Tilt gestures</Text>
+          <ExampleAppButton
+            title={tiltGesturesEnabled ? 'Disable' : 'Enable'}
+            onPress={() => onTiltGesturesEnabledChange?.(!tiltGesturesEnabled)}
+          />
+        </View>
+        <View style={ControlStyles.rowContainer}>
+          <Text style={ControlStyles.rowLabel}>Zoom controls</Text>
+          <ExampleAppButton
+            title={zoomControlsEnabled ? 'Disable' : 'Enable'}
+            onPress={() => onZoomControlsEnabledChange?.(!zoomControlsEnabled)}
+          />
+        </View>
+        <View style={ControlStyles.rowContainer}>
+          <Text style={ControlStyles.rowLabel}>Zoom gestures</Text>
+          <ExampleAppButton
+            title={zoomGesturesEnabled ? 'Disable' : 'Enable'}
+            onPress={() => onZoomGesturesEnabledChange?.(!zoomGesturesEnabled)}
+          />
+        </View>
+      </Accordion>
     </View>
   );
 };

example/src/helpers/snackbar.ts

@@ -25,12 +25,13 @@ import Snackbar from 'react-native-snackbar';
 export const showSnackbar = (
   text: string,
   duration = Snackbar.LENGTH_SHORT,
-  dismissPrevious = false
+  dismissPrevious = false,
+  numberOfLines: number = 2
 ) => {
   if (dismissPrevious) {
     Snackbar.dismiss();
   }
-  Snackbar.show({ text, duration });
+  Snackbar.show({ text, duration, numberOfLines });
 };
 
 export { Snackbar };