feat: add map padding

Author: illuminati1911

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

@@ -54,7 +54,8 @@ public enum Command {
   REMOVE_CIRCLE(35, "removeCircle"),
   REMOVE_GROUND_OVERLAY(36, "removeGroundOverlay"),
   SET_ZOOM_CONTROLS_ENABLED(37, "setZoomControlsEnabled"),
-  SET_RECENTER_BUTTON_ENABLED(38, "setRecenterButtonEnabled");
+  SET_RECENTER_BUTTON_ENABLED(38, "setRecenterButtonEnabled"),
+  SET_PADDING(39, "setPadding");
 
   private final int value;
   private final String name;

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

@@ -536,6 +536,12 @@ public void setFollowingPerspective(int jsValue) {
     mGoogleMap.followMyLocation(EnumTranslationUtil.getCameraPerspectiveFromJsValue(jsValue));
   }
 
+  public void setPadding(int top, int left, int bottom, int right) {
+    if (mGoogleMap != null) {
+      mGoogleMap.setPadding(left, top, right, bottom);
+    }
+  }
+
   private String fetchJsonFromUrl(String urlString) throws IOException {
     URL url = new URL(urlString);
     HttpURLConnection connection = (HttpURLConnection) url.openConnection();

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

@@ -506,6 +506,19 @@ public void isAutoScreenAvailable(final Promise promise) {
     promise.resolve(mMapViewController != null);
   }
 
+  @ReactMethod
+  public void setPadding(
+      final Integer top, final Integer left, final Integer bottom, final Integer right) {
+    UiThreadUtil.runOnUiThread(
+        () -> {
+          if (mMapViewController == null) {
+            return;
+          }
+
+          mMapViewController.setPadding(top, left, bottom, right);
+        });
+  }
+
   public void sendScreenState(boolean available) {
     WritableNativeArray params = new WritableNativeArray();
     params.pushBoolean(available);

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

@@ -119,6 +119,7 @@ public Map<String, Integer> getCommandsMap() {
     map.put(REMOVE_GROUND_OVERLAY.toString(), REMOVE_GROUND_OVERLAY.getValue());
     map.put(SET_HEADER_ENABLED.toString(), SET_HEADER_ENABLED.getValue());
     map.put(SET_FOOTER_ENABLED.toString(), SET_FOOTER_ENABLED.getValue());
+    map.put(SET_PADDING.toString(), SET_PADDING.getValue());
     return map;
   }
 
@@ -298,6 +299,10 @@ public void receiveCommand(
       case REMOVE_GROUND_OVERLAY:
         getFragmentForRoot(root).getMapController().removeGroundOverlay(args.getString(0));
         break;
+      case SET_PADDING:
+        getFragmentForRoot(root)
+            .getMapController()
+            .setPadding(args.getInt(0), args.getInt(1), args.getInt(2), args.getInt(3));
     }
   }
 

example/src/controls/mapsControls.tsx

@@ -41,6 +41,8 @@ const MapsControls: React.FC<MapControlsProps> = ({ mapViewController }) => {
   const [enableLocationMarker, setEnableLocationMarker] = useState(true);
   const [latitude, onLatChanged] = useState('');
   const [longitude, onLngChanged] = useState('');
+  const [horizontalPadding, setHorizontalPadding] = useState('');
+  const [verticalPadding, setVerticalPadding] = useState('');
 
   useEffect(() => {
     if (zoom !== null) {
@@ -195,6 +197,26 @@ const MapsControls: React.FC<MapControlsProps> = ({ mapViewController }) => {
     mapViewController.clearMapView();
   };
 
+  const onHorizontalPaddingChanged = (padding: string) => {
+    mapViewController.setPadding(
+      Number(verticalPadding),
+      Number(padding),
+      Number(verticalPadding),
+      Number(padding)
+    );
+    setHorizontalPadding(padding);
+  };
+
+  const onVerticalPaddingChanged = (padding: string) => {
+    mapViewController.setPadding(
+      Number(padding),
+      Number(horizontalPadding),
+      Number(padding),
+      Number(horizontalPadding)
+    );
+    setVerticalPadding(padding);
+  };
+
   return (
     <View>
       <TextInput
@@ -280,6 +302,22 @@ const MapsControls: React.FC<MapControlsProps> = ({ mapViewController }) => {
           dropdownStyle={styles.dropdownMenuStyle}
         />
       </View>
+      <TextInput
+        style={styles.input}
+        onChangeText={onHorizontalPaddingChanged}
+        value={horizontalPadding}
+        placeholder="Horizontal padding"
+        placeholderTextColor="#000"
+        keyboardType="numeric"
+      />
+      <TextInput
+        style={styles.input}
+        onChangeText={onVerticalPaddingChanged}
+        value={verticalPadding}
+        placeholder="Vertical padding"
+        placeholderTextColor="#000"
+        keyboardType="numeric"
+      />
     </View>
   );
 };

ios/react-native-navigation-sdk/NavAutoModule.m

@@ -387,6 +387,19 @@ + (void)unregisterNavAutoModuleReadyCallback {
   });
 }
 
+RCT_EXPORT_METHOD(setPadding
+                  : (nonnull NSNumber *)top left
+                  : (nonnull NSNumber *)left bottom
+                  : (nonnull NSNumber *)bottom right
+                  : (nonnull NSNumber *)right) {
+  dispatch_async(dispatch_get_main_queue(), ^{
+    if (self->_viewController) {
+      [self->_viewController setPadding:UIEdgeInsetsMake(top.floatValue, left.floatValue,
+                                                         bottom.floatValue, right.floatValue)];
+    }
+  });
+}
+
 - (void)onScreenStateChange:(BOOL)available {
   [self sendCommandToReactNative:@"onAutoScreenAvailabilityChanged"
                             args:[NSNumber numberWithBool:available]];

ios/react-native-navigation-sdk/NavViewController.h

@@ -83,6 +83,7 @@ typedef void (^OnArrayResult)(NSArray *_Nullable result);
 - (void)removeGroundOverlay:(NSString *)overlayId;
 - (BOOL)attachToNavigationSession:(GMSNavigationSession *)session;
 - (void)setTravelMode:(GMSNavigationTravelMode)travelMode;
+- (void)setPadding:(UIEdgeInsets)insets;
 //- (void)removeNavigationListeners;
 @end
 

ios/react-native-navigation-sdk/NavViewController.m

@@ -661,4 +661,8 @@ - (BOOL)compare:(nullable id)userData to:(NSString *)elementId {
   return [userData[0] isEqualToString:elementId];
 }
 
+- (void)setPadding:(UIEdgeInsets)insets {
+  _mapView.padding = insets;
+}
+
 @end

ios/react-native-navigation-sdk/RCTNavViewManager.m

@@ -426,4 +426,17 @@ - (void)unregisterViewControllerForTag:(NSNumber *)reactTag {
   });
 }
 
+RCT_EXPORT_METHOD(setPadding
+                  : (nonnull NSNumber *)reactTag top
+                  : (nonnull NSNumber *)top left
+                  : (nonnull NSNumber *)left bottom
+                  : (nonnull NSNumber *)bottom right
+                  : (nonnull NSNumber *)right) {
+  dispatch_async(dispatch_get_main_queue(), ^{
+    NavViewController *viewController = [self getViewControllerForTag:reactTag];
+    [viewController setPadding:UIEdgeInsetsMake(top.floatValue, left.floatValue, bottom.floatValue,
+                                                right.floatValue)];
+  });
+}
+
 @end

src/auto/useNavigationAuto.ts

@@ -188,6 +188,15 @@ export const useNavigationAuto = (): {
       moveCamera: (cameraPosition: CameraPosition) => {
         return NavAutoModule.moveCamera(cameraPosition);
       },
+
+      setPadding: (
+        top: number,
+        left: number,
+        bottom: number,
+        right: number
+      ) => {
+        return NavAutoModule.setPadding(top, left, bottom, right);
+      },
     }),
     [moduleListenersHandler]
   );