Add mapPadding property

[peterjuras]

This PR adds the functionality to set the padding of MapViews that use Google Maps on both Android and iOS.

Motivation:

As you can see in the screenshot below, there are use cases where the map is obscured by certain views, but the map itself is still larger than the unobstructed view area. This leads to a few problems, where the legal information (Google logo) is obscured or the map is no longer centering within the correct area, because the padding is not respected.

Setting the mapPadding property solves this, and both centering around coordinates and displaying the legal information is correct:

This feature has been long requested (see related issues and PRs below), however it never made it into the main package which is quite sad. The reason for the last unmerged PR was that the examples app did no longer launch, but the examples are in a completely broken state. I created a different example app to demonstrate the mapPadding feature, feel free to check it out.

I'm open to renaming the property if "mapPadding" is troublesome for you.

Related issues and PRs:

#1356
#1467
#1174
#1669

[peterjuras]

Is there anything preventing this to be merged?

[julienR2]

I see nothing preventing it.. I've been using your PR without any trouble (thanks by the way !)

The only thing is I had to use this trick #1033 (comment) to force the map redrawing. Otherwise on android the paddings are set but since the map doesn't redraw the google logo disappears.
I guess this is link to the #1033 issue affecting also the location button drawing.

Anyway, this doesn't concern your PR which seems correct to me 👍

[juergengunz]

@julienR2 how to redraw the map? I have the same issue, that the google logo is disappearing sometimes

[julienR2]

@juergengunz I used the trick detailed here #1033 (comment)
It consists in updating the style of the map to force a redraw.

I need to change the padding various type so I set up the following function:

updatePadding(mapPadding) {
    this._ref.map.setNativeProps({ style: {...styles.map, marginBottom: 1} });
    this._ref.map.setNativeProps({ mapPadding });
    setTimeout(() => {
      this._ref.map.setNativeProps({ style: {...styles.map, marginBottom: 0} });
    }, 100);
  }

I hope this helps !

[juergengunz]

@julienR2 thank you so much, works perfect for me.

[julienR2]

Glad it helped ! 👍

[jskidd3]

@peterjuras Not working in version 0.20.1. Have correctly assigned the prop in the same way as you have in your example but no padding is added.

[alpamys-qanybet]

@jskidd3, are you using android or iOS?, in iOS padding is set, but in android not affected on my devices.

[bperlman]

This prop doesn't seem to work on Android or iOS for Apple or Google maps.