ApluUalberta commented 6 months ago

Summary

This seems like a strange bug to me so it would be helpful to get some insight. I have tried to reduce the reproduceable demo as much as possible but due to the strange circumstances there is a bit of surrounding code.

I have noticed that fitToCoordinates was not working on iOS in my app but it was on Android. I am using fitToCoordinates to ensure that a circle drawn on the map fits within the map. However, on iOS the map is being centred a moderate distance away from the centre point of the circle. After a lot of investigation, I found that the problem only occurred when my MapView did not take up the full height of the Modal within which it is contained. This does not seem to be a problem if the Modal is excluded.

Breathing new life into this issue:

3882

Reproducible sample code

https://snack.expo.io/@staxy/react-native-maps-fittocoordinates-demo---does-not-work

This is reproducible if you adjust the height styling prop in the snack example, here.

Initial:
![image](https://github.com/react-native-maps/react-native-maps/assets/39037565/abe419fb-1fb8-41e1-973e-0e9c76e0131f)

This works fine as it encompasses the entire modal content. Here is the result:

![image](https://github.com/react-native-maps/react-native-maps/assets/39037565/1eb24622-1958-41f3-a8a1-ba9ce489f553)

Let's try to edit the component height:
![image](https://github.com/react-native-maps/react-native-maps/assets/39037565/f9da929e-b014-48f6-b282-d7da2192a370)

This yields this:
![image](https://github.com/react-native-maps/react-native-maps/assets/39037565/251fd118-d398-4250-83ae-2e25416907b3)

Steps to reproduce

Initial:

This works fine as it encompasses the entire modal content. Here is the result:

Let's try to edit the component height:

This yields this:

Expected result

Actual result

React Native Maps Version

"1.7.1"

What platforms are you seeing the problem on?

iOS (Google Maps)

React Native Version

"0.72.6"

What version of Expo are you using?

SDK 48

Device(s)

Iphone 7, Iphone 14

Additional information

I'm using SDK 49 but there is no option for it

ApluUalberta commented 6 months ago

For those that are facing this issue currently:

I was able to circumvent this issue by setting PROVIDER={PROVIDER_DEFAULT} which simply defaults iOS mapview to Apple maps instead of Google Maps. fitToCoordinates will work as needed here. If you're willing to make the transition of UI, then this concession will work.

I also found that in the snack example, it seems to specifically not like height: "100%". When set to thingsl ike 80% or 30%, it works as intended, though such a case is not really applicable to my application.

Let's squash this quirk!

salah-ghanim commented 6 months ago

@ApluUalberta do you want to try and submit a pull request with a fix? seeing that you managed to narrow down this ... I imagine you can compare the code handling this functionality

Albertoflj commented 3 months ago

Still experiencing this. In my case, neither height: '80%' nor height: '30%' work. What fixes it for me is changing the height in the code to whatever value, then saving it. Upon reloading the app though, the issue persists, regardless of the height.

SebaMutuku commented 3 months ago

Did you implement it as described here? fitToCoordinates	coordinates: Array, options: { edgePadding: EdgePadding, animated: Boolean }	If called in ComponentDidMount in android, it will cause an exception. It is recommended to call it from the MapView onLayout event.

How it worked for me

Create a function to fit your markers coordinates
Call your function in onLayout function of MapView

Albertoflj commented 1 month ago

Tried it, same outcome sadly.

ApluUalberta commented 1 month ago