feat: update setPadding interface

Author: jokerttu

example/src/controls/mapsControls.tsx

@@ -27,6 +27,7 @@ import {
   type Circle,
   type Polyline,
   type Polygon,
+  type Padding,
 } from '@googlemaps/react-native-navigation-sdk';
 
 export interface MapControlsProps {
@@ -41,11 +42,11 @@ const MapsControls: React.FC<MapControlsProps> = ({ mapViewController }) => {
   const [enableLocationMarker, setEnableLocationMarker] = useState(true);
   const [latitude, onLatChanged] = useState('');
   const [longitude, onLngChanged] = useState('');
-  const [padding, setPadding] = useState({
-    top: '',
-    bottom: '',
-    left: '',
-    right: '',
+  const [padding, setPadding] = useState<Padding>({
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
   });
 
   useEffect(() => {
@@ -202,14 +203,9 @@ const MapsControls: React.FC<MapControlsProps> = ({ mapViewController }) => {
   };
 
   const onPaddingChanged = (edge: keyof typeof padding, value: string) => {
-    const updatedPadding = { ...padding, [edge]: value };
+    const updatedPadding: Padding = { ...padding, [edge]: Number(value) };
     setPadding(updatedPadding);
-    mapViewController.setPadding(
-      Number(updatedPadding.top),
-      Number(updatedPadding.left),
-      Number(updatedPadding.bottom),
-      Number(updatedPadding.right)
-    );
+    mapViewController.setPadding(updatedPadding);
   };
 
   return (
@@ -297,38 +293,47 @@ const MapsControls: React.FC<MapControlsProps> = ({ mapViewController }) => {
           dropdownStyle={styles.dropdownMenuStyle}
         />
       </View>
-      <TextInput
-        style={styles.input}
-        onChangeText={value => onPaddingChanged('top', value)}
-        value={padding.top}
-        placeholder="Top padding"
-        placeholderTextColor="#000"
-        keyboardType="numeric"
-      />
-      <TextInput
-        style={styles.input}
-        onChangeText={value => onPaddingChanged('bottom', value)}
-        value={padding.bottom}
-        placeholder="Bottom padding"
-        placeholderTextColor="#000"
-        keyboardType="numeric"
-      />
-      <TextInput
-        style={styles.input}
-        onChangeText={value => onPaddingChanged('left', value)}
-        value={padding.left}
-        placeholder="Left padding"
-        placeholderTextColor="#000"
-        keyboardType="numeric"
-      />
-      <TextInput
-        style={styles.input}
-        onChangeText={value => onPaddingChanged('right', value)}
-        value={padding.right}
-        placeholder="Right padding"
-        placeholderTextColor="#000"
-        keyboardType="numeric"
-      />
+      <View style={styles.controlButtonGap} />
+      <View style={styles.rowContainer}>
+        <Text>Top padding</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={value => onPaddingChanged('top', value)}
+          value={padding.top?.toFixed(0)}
+          keyboardType="numeric"
+          inputMode="numeric"
+        />
+      </View>
+      <View style={styles.rowContainer}>
+        <Text>Bottom padding</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={value => onPaddingChanged('bottom', value)}
+          value={padding.bottom?.toFixed(0)}
+          keyboardType="numeric"
+          inputMode="numeric"
+        />
+      </View>
+      <View style={styles.rowContainer}>
+        <Text>Left padding</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={value => onPaddingChanged('left', value)}
+          value={padding.left?.toFixed(0)}
+          keyboardType="numeric"
+          inputMode="numeric"
+        />
+      </View>
+      <View style={styles.rowContainer}>
+        <Text>Right padding</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={value => onPaddingChanged('right', value)}
+          value={padding.right?.toFixed(0)}
+          keyboardType="numeric"
+          inputMode="numeric"
+        />
+      </View>
     </View>
   );
 };

example/src/styles.ts

@@ -27,42 +27,23 @@ const styles = StyleSheet.create({
   button: {
     backgroundColor: '#2196f3',
   },
-  center: {
-    alignItems: 'center',
-  },
-  toggleControl: {
-    backgroundColor: '#9ee2ff',
-    flexDirection: 'row',
-    alignItems: 'center',
-    alignSelf: 'baseline',
-    position: 'absolute',
-    right: 0,
-    padding: 6,
-    marginTop: 150,
-  },
   input: {
     backgroundColor: '#ffffff',
     height: 40,
     margin: 12,
     borderWidth: 1,
     padding: 10,
-  },
-  zoomBtn: {
-    color: '#fff',
+    flexGrow: 1,
   },
   rowContainer: {
     margin: 5,
     marginLeft: 20,
     marginRight: 20,
     flexDirection: 'row',
     justifyContent: 'space-between',
+    alignItems: 'center',
     color: 'white',
   },
-  rowBtnContainer: {
-    flexDirection: 'row',
-    alignSelf: 'center',
-    justifyContent: 'space-between',
-  },
   controlButtons: {
     alignSelf: 'stretch',
     flexDirection: 'row',

src/auto/useNavigationAuto.ts

@@ -29,6 +29,7 @@ import type {
   Polygon,
   CameraPosition,
   UISettings,
+  Padding,
 } from '../maps';
 import { useMemo } from 'react';
 
@@ -189,12 +190,8 @@ export const useNavigationAuto = (): {
         return NavAutoModule.moveCamera(cameraPosition);
       },
 
-      setPadding: (
-        top: number,
-        left: number,
-        bottom: number,
-        right: number
-      ) => {
+      setPadding: (padding: Padding) => {
+        const { top = 0, left = 0, bottom = 0, right = 0 } = padding;
         return NavAutoModule.setPadding(top, left, bottom, right);
       },
     }),

src/maps/mapView/mapViewController.ts

@@ -30,6 +30,7 @@ import type {
   MapType,
   MapViewController,
   MarkerOptions,
+  Padding,
   PolygonOptions,
   PolylineOptions,
 } from './types';
@@ -165,7 +166,8 @@ export const getMapViewController = (viewId: number): MapViewController => {
       sendCommand(viewId, commands.moveCamera, [cameraPosition]);
     },
 
-    setPadding: (top: number, left: number, bottom: number, right: number) => {
+    setPadding: (padding: Padding) => {
+      const { top = 0, left = 0, bottom = 0, right = 0 } = padding;
       sendCommand(viewId, commands.setPadding, [top, left, bottom, right]);
     },
   };

src/maps/mapView/types.ts

@@ -123,6 +123,20 @@ export enum MapType {
   HYBRID,
 }
 
+/**
+ * Defines the padding options for a map.
+ */
+export interface Padding {
+  /** Top padding in pixels. */
+  top?: number;
+  /** Left padding in pixels. */
+  left?: number;
+  /** Bottom padding in pixels. */
+  bottom?: number;
+  /** Right padding in pixels. */
+  right?: number;
+}
+
 /**
  * Defines the type of the map fragment.
  */
@@ -416,10 +430,8 @@ export interface MapViewController {
   /**
    * Sets padding to the map.
    *
-   * @param top - Top padding.
-   * @param left - Left padding.
-   * @param bottom - Bottom padding.
-   * @param right - Right padding.
+   * @param padding - An object defining padding for each side.
+   *                  Example: { top: 10, left: 5, bottom: 15, right: 10 }
    */
-  setPadding(top: number, left: number, bottom: number, right: number): void;
+  setPadding(padding: Padding): void;
 }