After updating from 0.28.0 to 1.3.2, map doesn't re-center around new coordinates, only on Android

[gabriellend]

Summary

Not sure this is a bug but thought there was enough information that it might be.

I've been using version 0.28.0 for years and it works great. After updating to 1.3.2, when you give the map a new location, it doesn't re-center around the new coordinates until you interact with the UI (refer to the videos below to see what I mean).

I didn't see any changes to core functionality in the docs/readme and, as it works as expected on iOS, I'm hesitant to change anything in my code. While trying to debug I noticed that when you change the coordinates, onMapLayout is not called again. That was the only difference I could find between the old coordinates and new. But the same thing happens with version 0.28.0 so not really sure that matters. fitToCoordinates is called in onMapLayout and when you input a new location.

Reproducible sample code

This is pretty tough to supply as my codebase is huge and intertwined. I get if you can't help without it but just thought I'd try in case anyone has any thoughts off the bat of why this might happen.

Steps to reproduce

The only thing that might be possible is using the test app. See if different coordinates cause the map to re-center with 0.28.0, then upgrade to 1.3.2 and try the same thing.

Expected result

Here you can see I start with the user in Hawaii and the different points to choose from on the East Coast and the map is zoomed out to accommodate everything. When I change the user to where the points are, the map correctly zooms in.

Working-0.28.0.mp4

Actual result

Here you can see I start with the user in Hawaii and the different points to choose from on the East Coast and the map is zoomed out to accommodate everything. When I change the user to where the points are, you can see that the user's location has indeed changed but the map stays zoomed out, as if it thinks the user is still in Hawaii, until I click on one of the cards representing one of the points.

Not.working-1.3.2.mp4

React Native Maps Version

1.3.2

What platforms are you seeing the problem on?

Android, iOS (Google Maps)

React Native Version

0.67.4

What version of Expo are you using?

Not using Expo

Device(s)

Android physical devices and emulators

Additional information

Side notes, you can also see the markers flashing a bit in version 1.3.2, the font for the word "Widener" is suddenly very bold, and the app started constantly refreshing as well. Any insight on why these might've changed is appreciated too. Thank you!

[Fersy1998]

Some progress? Im trying to fix this problem since yesterday and updated my rn since was older than the specified (0.64.3) but the problem persist. My app is rerendiring and the marker as well, but the zoom is going into the ocean.

[gabriellend]

@Fersy1998 Not yet, will post here if I discover anything.

[polygbrl]

Hi @gabriellend, I can't find any onMapLayout method in 1.3.2 nor 0.28.0, did you mean the onLayout event? Also, it doesn't look like fitToCoordinates should trigger without using onLayout, check its reference in the MapView docs for 1.3.2. Might the misuse of onMapLayout instead of onLayout be why you encouter this issue in your project? If it is the case, you might also investigate why it is working in 0.28.0, you might rerender something where there is no use for it.

Such a big upgrade 0.28.0 -> 1.3.2 might introduce breaking changes so you'll probably have to scout for deprecated methods that you use in your code and change it accordingly if there are any. You can also check fitToCoordinates in 0.28.0 and in 1.3.2 for reference.

[gabriellend]

@polygbrl Thank you for your response! You are 100% right, my mistake onMapLayout is not a thing in the package. That was my own function that is called when onMapReady is called. So replace onMapReady anywhere I wrote onMapLayout. I do see what you mean by fitToCoordinates being recommended in onLayout, I will play around with that as well as look at the differences between both versions of fitToCoordinates.

[polygbrl]

So @gabriellend, onMapReady is a callback that "is called once the map is fully loaded" according to the docs. So I think something, probably your state, triggers a rerender of the map and therefore triggers as a side effect fitToCoordinates. So, you should check if something in the methods, events or callbacks you use on your map had changes that might explain why it is not re-triggered in 1.3.2. I hope this is leading you to the right direction!

[gabriellend]

@polygbrl I kind of forgot a big thing that I mentioned in my original post – it's working fine on iOS. It seems to me if that's the case, it's probably not something to do with my code. Do you agree, or think your comments may still apply and I might have to do something along the lines of if (config === "android")...? That doesn't seem right to me but I'm open to it.

[polygbrl]

@gabriellend I agree there shouldn't be any difference between iOS and Android, so equivalently, I'd consider there shouldn't be any difference in your method calling fitToCoordinates. Therefore the if (config === "android") part shouldn't handle that part of the logic performing the desired behavior.

I just tried the fitToCoordinates method in various situations both on an iOS physical device and an Android physical device & an Android emulator with 1.3.2 and I can't reproduce your issue.

While double checking your video, I can see that the fitToCoordinates method seems to be fired only when selecting a Meeting point (like in the not working example). In your working example, no Meeting point is selected and it looks to me that it is just zoomed into your location marker. Are you sure the effect you describe in your working example is indeed triggered by fitToCoordinates and not just a side effect of some rerendering that could have been confused with a fitToCoordinates result?

I'm sorry that I insist you double check your code but I don't have much to look into and therefore might also be wrong on how you handle your logic.

[gabriellend]

@polygbrl No worries, I totally appreciate you taking the time to help me! I'll will definitely look into it, might take me a week as I'm also working on some other things. Thanks for your help!

[gabriellend]

@polygbrl and anyone else that stumbles on this. I fixed the zoom issue by adding a call to fitToCoordinates to the onLayout method of the ScrollView which wraps the meeting point cards. I still am unsure why it worked on iOS but not on Android. I've also updated to 1.4.0(but that didn't help the behavior). The icons still blink more than I'd like/certain words are bolder than before on Android but I will continue updating to the latest react native/react version and see if that helps. Thank you for your help! I will close this now.

[consuelo-sanna]

I've updated from version 0.31.1 to 1.4.0, all good on IOS but on Android the markers keep flickering and the map is overall very slow to render or when the user tries to interact with it.

At the moment I've removed the new google maps Renderer and everything works fine, will take a closer look when/if I have the chance but if someone needs a "quick" fix this might help or point in the right direction - not sure this is the best solution and probably it's not on the long run

here are the [docs] about it(https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md#using-the-new-google-maps-renderer) section

here are some known behavioural changes Github