feat!: unify map padding to use density-independent pixels (#628)

Author: illuminati1911

README.md

@@ -504,7 +504,7 @@ Both `NavigationView` and `MapView` support the following props. Props marked wi
 | `mapId`                         | `string`                        | -               |       | Cloud-based map styling ID from Google Cloud Console        |
 | `mapColorScheme`                | `MapColorScheme`                | `FOLLOW_SYSTEM` |       | Color scheme for map tiles (FOLLOW_SYSTEM, LIGHT, DARK)     |
 | `mapStyle`                      | `string`                        | -               |       | Custom map styling via JSON                                 |
-| `mapPadding`                    | `Padding`                       | -               |       | Padding applied to the map in pixels                        |
+| `mapPadding`                    | `Padding`                       | -               |       | Padding applied to the map in density-independent pixels    |
 | `initialCameraPosition`         | `CameraPosition`                | -               |       | Initial camera position when map loads                      |
 | `minZoomLevel`                  | `number`                        | -               |       | Minimum allowed zoom level                                  |
 | `maxZoomLevel`                  | `number`                        | -               |       | Maximum allowed zoom level                                  |

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

@@ -25,6 +25,7 @@
 import com.facebook.react.bridge.UiThreadUtil;
 import com.facebook.react.bridge.WritableArray;
 import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.PixelUtil;
 import com.google.android.gms.maps.UiSettings;
 import com.google.android.gms.maps.model.CameraPosition;
 import com.google.android.gms.maps.model.Circle;
@@ -619,10 +620,10 @@ public void isAutoScreenAvailable(final Promise promise) {
 
   @Override
   public void setMapPadding(double top, double left, double bottom, double right) {
-    int topInt = (int) top;
-    int leftInt = (int) left;
-    int bottomInt = (int) bottom;
-    int rightInt = (int) right;
+    int topInt = Math.round(PixelUtil.toPixelFromDIP(top));
+    int leftInt = Math.round(PixelUtil.toPixelFromDIP(left));
+    int bottomInt = Math.round(PixelUtil.toPixelFromDIP(bottom));
+    int rightInt = Math.round(PixelUtil.toPixelFromDIP(right));
     UiThreadUtil.runOnUiThread(
         () -> {
           if (mMapViewController == null) {

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

@@ -25,6 +25,7 @@
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.common.MapBuilder;
 import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.ViewManagerDelegate;
@@ -462,14 +463,19 @@ public void setNavigationNightMode(FrameLayout view, int nightMode) {
   @ReactProp(name = "mapPadding")
   public void setMapPadding(FrameLayout view, @Nullable ReadableMap padding) {
     if (padding != null) {
-      int top = padding.hasKey("top") ? padding.getInt("top") : 0;
-      int left = padding.hasKey("left") ? padding.getInt("left") : 0;
-      int bottom = padding.hasKey("bottom") ? padding.getInt("bottom") : 0;
-      int right = padding.hasKey("right") ? padding.getInt("right") : 0;
-      getMapControllerProperties(view.getId()).setPadding(top, left, bottom, right);
+      getMapControllerProperties(view.getId())
+          .setPadding(
+              getPaddingInPixels(padding, "top"),
+              getPaddingInPixels(padding, "left"),
+              getPaddingInPixels(padding, "bottom"),
+              getPaddingInPixels(padding, "right"));
     }
   }
 
+  private int getPaddingInPixels(ReadableMap padding, String edge) {
+    return padding.hasKey(edge) ? Math.round(PixelUtil.toPixelFromDIP(padding.getDouble(edge))) : 0;
+  }
+
   @ReactProp(name = "mapStyle")
   public void setMapStyle(FrameLayout view, @Nullable String mapStyle) {
     if (mapStyle != null) {

src/maps/mapView/types.ts

@@ -213,13 +213,13 @@ export enum MapType {
  * Defines the padding options for a map.
  */
 export interface Padding {
-  /** Top padding in pixels. */
+  /** Top padding in density-independent pixels. */
   top?: number;
-  /** Left padding in pixels. */
+  /** Left padding in density-independent pixels. */
   left?: number;
-  /** Bottom padding in pixels. */
+  /** Bottom padding in density-independent pixels. */
   bottom?: number;
-  /** Right padding in pixels. */
+  /** Right padding in density-independent pixels. */
   right?: number;
 }
 
@@ -381,7 +381,7 @@ export interface MapViewController {
   moveCamera(cameraPosition: CameraPosition): void;
 
   /**
-   * Sets padding to the map.
+   * Sets padding on the map in density-independent pixels.
    *
    * @param padding - An object defining padding for each side.
    *                  Example: { top: 10, left: 5, bottom: 15, right: 10 }

src/maps/types.ts

@@ -263,7 +263,7 @@ export interface MapViewProps {
   readonly mapType?: MapViewType;
 
   /**
-   * Sets padding on the map in pixels.
+   * Sets padding on the map in density-independent pixels.
    */
   readonly mapPadding?: Padding;