diff --git a/android/src/main/java/com/google/android/react/navsdk/Command.java b/android/src/main/java/com/google/android/react/navsdk/Command.java index ea85c38..0b9931d 100644 --- a/android/src/main/java/com/google/android/react/navsdk/Command.java +++ b/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; diff --git a/android/src/main/java/com/google/android/react/navsdk/MapViewController.java b/android/src/main/java/com/google/android/react/navsdk/MapViewController.java index 736ac11..f88881e 100644 --- a/android/src/main/java/com/google/android/react/navsdk/MapViewController.java +++ b/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(); diff --git a/android/src/main/java/com/google/android/react/navsdk/NavAutoModule.java b/android/src/main/java/com/google/android/react/navsdk/NavAutoModule.java index dec5202..f137b34 100644 --- a/android/src/main/java/com/google/android/react/navsdk/NavAutoModule.java +++ b/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); diff --git a/android/src/main/java/com/google/android/react/navsdk/NavViewManager.java b/android/src/main/java/com/google/android/react/navsdk/NavViewManager.java index cdd7f03..03f40d7 100644 --- a/android/src/main/java/com/google/android/react/navsdk/NavViewManager.java +++ b/android/src/main/java/com/google/android/react/navsdk/NavViewManager.java @@ -119,6 +119,7 @@ public Map 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)); } } diff --git a/example/src/controls/mapsControls.tsx b/example/src/controls/mapsControls.tsx index 2f50ef1..1e77055 100644 --- a/example/src/controls/mapsControls.tsx +++ b/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,6 +42,12 @@ const MapsControls: React.FC = ({ mapViewController }) => { const [enableLocationMarker, setEnableLocationMarker] = useState(true); const [latitude, onLatChanged] = useState(''); const [longitude, onLngChanged] = useState(''); + const [padding, setPadding] = useState({ + top: 0, + bottom: 0, + left: 0, + right: 0, + }); useEffect(() => { if (zoom !== null) { @@ -195,6 +202,12 @@ const MapsControls: React.FC = ({ mapViewController }) => { mapViewController.clearMapView(); }; + const onPaddingChanged = (edge: keyof typeof padding, value: string) => { + const updatedPadding: Padding = { ...padding, [edge]: Number(value) }; + setPadding(updatedPadding); + mapViewController.setPadding(updatedPadding); + }; + return ( = ({ mapViewController }) => { dropdownStyle={styles.dropdownMenuStyle} /> + + + Top padding + onPaddingChanged('top', value)} + value={padding.top?.toFixed(0)} + keyboardType="numeric" + inputMode="numeric" + /> + + + Bottom padding + onPaddingChanged('bottom', value)} + value={padding.bottom?.toFixed(0)} + keyboardType="numeric" + inputMode="numeric" + /> + + + Left padding + onPaddingChanged('left', value)} + value={padding.left?.toFixed(0)} + keyboardType="numeric" + inputMode="numeric" + /> + + + Right padding + onPaddingChanged('right', value)} + value={padding.right?.toFixed(0)} + keyboardType="numeric" + inputMode="numeric" + /> + ); }; diff --git a/example/src/styles.ts b/example/src/styles.ts index dbee2fb..f4fadf8 100644 --- a/example/src/styles.ts +++ b/example/src/styles.ts @@ -27,28 +27,13 @@ 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, @@ -56,13 +41,9 @@ const styles = StyleSheet.create({ marginRight: 20, flexDirection: 'row', justifyContent: 'space-between', + alignItems: 'center', color: 'white', }, - rowBtnContainer: { - flexDirection: 'row', - alignSelf: 'center', - justifyContent: 'space-between', - }, controlButtons: { alignSelf: 'stretch', flexDirection: 'row', diff --git a/ios/react-native-navigation-sdk/NavAutoModule.m b/ios/react-native-navigation-sdk/NavAutoModule.m index a703635..9d51e80 100644 --- a/ios/react-native-navigation-sdk/NavAutoModule.m +++ b/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]]; diff --git a/ios/react-native-navigation-sdk/NavViewController.h b/ios/react-native-navigation-sdk/NavViewController.h index bac0a24..f72922d 100644 --- a/ios/react-native-navigation-sdk/NavViewController.h +++ b/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 diff --git a/ios/react-native-navigation-sdk/NavViewController.m b/ios/react-native-navigation-sdk/NavViewController.m index 2eea3b8..c5d5ddd 100644 --- a/ios/react-native-navigation-sdk/NavViewController.m +++ b/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 diff --git a/ios/react-native-navigation-sdk/RCTNavViewManager.m b/ios/react-native-navigation-sdk/RCTNavViewManager.m index 4a41f66..26413a9 100644 --- a/ios/react-native-navigation-sdk/RCTNavViewManager.m +++ b/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 diff --git a/src/auto/useNavigationAuto.ts b/src/auto/useNavigationAuto.ts index 1991c4c..3df6108 100644 --- a/src/auto/useNavigationAuto.ts +++ b/src/auto/useNavigationAuto.ts @@ -29,6 +29,7 @@ import type { Polygon, CameraPosition, UISettings, + Padding, } from '../maps'; import { useMemo } from 'react'; @@ -188,6 +189,11 @@ export const useNavigationAuto = (): { moveCamera: (cameraPosition: CameraPosition) => { return NavAutoModule.moveCamera(cameraPosition); }, + + setPadding: (padding: Padding) => { + const { top = 0, left = 0, bottom = 0, right = 0 } = padding; + return NavAutoModule.setPadding(top, left, bottom, right); + }, }), [moduleListenersHandler] ); diff --git a/src/maps/mapView/mapViewController.ts b/src/maps/mapView/mapViewController.ts index 4744f29..85581a1 100644 --- a/src/maps/mapView/mapViewController.ts +++ b/src/maps/mapView/mapViewController.ts @@ -30,6 +30,7 @@ import type { MapType, MapViewController, MarkerOptions, + Padding, PolygonOptions, PolylineOptions, } from './types'; @@ -164,5 +165,10 @@ export const getMapViewController = (viewId: number): MapViewController => { moveCamera: (cameraPosition: CameraPosition) => { sendCommand(viewId, commands.moveCamera, [cameraPosition]); }, + + setPadding: (padding: Padding) => { + const { top = 0, left = 0, bottom = 0, right = 0 } = padding; + sendCommand(viewId, commands.setPadding, [top, left, bottom, right]); + }, }; }; diff --git a/src/maps/mapView/types.ts b/src/maps/mapView/types.ts index 7b392a6..afd5f18 100644 --- a/src/maps/mapView/types.ts +++ b/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. */ @@ -412,4 +426,12 @@ export interface MapViewController { * @param cameraPosition - Defines the position the camera will take with the move. */ moveCamera(cameraPosition: CameraPosition): void; + + /** + * Sets padding to the map. + * + * @param padding - An object defining padding for each side. + * Example: { top: 10, left: 5, bottom: 15, right: 10 } + */ + setPadding(padding: Padding): void; }