Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add mapPadding property #1750

Merged

Conversation

peterjuras
Copy link
Contributor

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:

Screenshot

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
Copy link
Contributor Author

Is there anything preventing this to be merged?

@julienR2
Copy link
Contributor

julienR2 commented Nov 21, 2017

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
Copy link

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

@julienR2
Copy link
Contributor

@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
Copy link

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

@julienR2
Copy link
Contributor

Glad it helped ! 👍

@jskidd3
Copy link

jskidd3 commented Feb 24, 2018

@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
Copy link

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

@bperlman
Copy link

bperlman commented Jul 5, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants