initialRegion does not work correctly on IOS

[nes123]

Bug report

After upgrading the last version of the package initialRegion does not work correctly on IOS, it does work on Android.

Works well in "react-native-maps": "^0.29.4".

Environment info

  react-native: 0.67.0
  react: 17.0.2
  react-native-maps": ^0.30.1


Target Platform: iOS

Steps to reproduce

1. Open a page with a map

Describe what actually happens:

The map centers around the correct point but does not zoom to the correct delta

[longprao]

Confirmed this issue, the workaround that I'm using is using a setTimeout and change the region a little bit:

  useEffect(() => {
    setTimeout(() => {
      setRandom(generateRandomPoint({ latitude: position.latitude, longitude: position.longitude }, 50000))
      setShowCircle(true)
    }, 3000)
  }, [position])

<MapView
      provider={PROVIDER_GOOGLE}
      region={{
        ...random,
        latitudeDelta: 2,
        longitudeDelta: 2,
      }}
      style={styles.map}
    >
      {showCircle && (
        <Circle
          center={random}
          strokeColor={theme.transparency.blue25}
          strokeWidth={1}
          fillColor={theme.transparency.blue25}
          radius={100000}
        />
      )}
    </MapView>

The <Circle> component also does not take into account fill and stroke colors at the first render, that's why it also needs to be drawn on a timeout.

[longprao]

I'm using 0.31.1

[nes123]

Using region instead of initialregion is not a good solution as re-rendering takes you back to the state that was defined in "region"

[longprao]

initialRegion does not work with my method, because the map needs to be re-zoomed after the setTimeout.

[JestemTrzcinska]

The same problem here. However, in one component it works good, but on others it doesn't. The map is zoomed out. Didn't happend on 0.30.1, now on 0.31.0 is a problem.

[JestemTrzcinska]

Changed initialRegion to region works for me

[nialldbarber]

We are experiencing this issue as well on iOS. We went from "0.27.1" to "0.31.1".

The specific issues are:

• initialRegion is reset to 0, 0 (completely zoomed out)
• Sometimes appears in a completely random region

Here are some of our relevant dependencies:

"react": "17.0.2",
"react-native": "0.65.2",
"react-native-maps": "0.31.1",

Unfortunately changing initialRegion to region doesn't work for us, the same issues still occur. Also as mentioned, it seems to be bad practice.

[monholm]

Was able to reproduce this. Interestingly, the only thing that changed between 0.30.1 and 0.31.0 regarding this seems to be the Google Maps pod version (let me know if I missed something)?

I'm looking to release a beta version this weekend that includes my proposed fix for this. Stand by 👍

[nialldbarber]

@Simon-TechForm cheers for the quick response! It looks like updating to 0.30.2 solved the issue for us. I believe that uses Google Maps pod version 5.1.0, so that might work for other people experiencing the same thing.

[maxgenest]

setTimeout(() => {
setRandom(generateRandomPoint({ latitude: position.latitude, longitude: position.longitude }, 50000))
setShowCircle(true)
}, 3000)

it's not ideal but it seems to be the only solution for now. Thank you

[github-actions]

🎉 This issue has been resolved in version 1.0.0-beta.1 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[monholm]

As you might have guessed from the comment above, I've just published a beta release that should fix the issue. I would love to get feedback from anyone able to try it out 🤞

[tomasmozeris]

I tested beta today, issue with iOS with google maps and initialRegion is not working, can be reproduced with /examples/DefaultMarker.js
I have no objective c / swift knowledge and I can't propose "real fix". If anyone searching for temporal workaround, you could try:

const [loaded, setLoaded] = useState(false)
const onRegionChangeComplete = (region) => { 
  if (!loaded) { 
    if (region.latitude != initialRegion.latitude || region.longitude != initialRegion.longitude) {
      mapRef.animateToRegion(initialRegion, 1)
    }
    setLoaded(true)
  } 
}

[maxgenest]

same for me, I tested beta and initialRegion is still not working properly.

[monholm]

Interesting. Could you both elaborate on how you are testing the changes and what behaviour you are experiencing?

@tomasmozeris You posted a video where initialregion wasn't set until you interacted with the map, how is it behaving now?

I just ran the defaultmarker example and a triage project I have locally with the new version, and it's working as expected on my end 🤔

[tomasmozeris]

✅ Apple maps work great, it zooms to initialRegion
⛔️ Google maps after enabling switch shows half of the world
Here is the demo of my test workflow (iOS simulator):

Simulator.Screen.Recording.-.iPhone.13.-.2022-06-13.at.09.34.08.mp4

Let me know if there is anything I could help

[longprao]

Beta version does not work for me, Circle still does not display properly, initialRegion seems to work but for some reasons it does not display anything, until I manually move or zoom the map, very weird.

[monholm]

@tomasmozeris interesting. This is not what I'm seeing at my end. Looking into this again.

@longprao the new version contains no changes regarding the circle component, so this is expected.

[maxgenest]

initialRegion does not work when I open the component the first time. But if I load the component another time it works perfectly.

And sometimes it seems like I have a conflict with initialRegion and region when they are both set as props (the app close when the component load). But not everytime.

Strange thing is I have no error message for both of those bugs.

[marcel-happyfloat]

Also tested the beta on ios with google maps and the initial region is not working most of the time.

[Guide4Ever]

Same issue occurring on my end. With MapView and Circle component.

[monholm]

I've just released a new beta that includes some changes to how initial region works. I'm not getting my hopes up, but could the people experiencing the issue try it out? And just for the sake of my sanity, please make sure that you are using the newest beta and make sure to clean your project and reinstall your pods if you updated an existing project.

I'm not able to reproduce the issue when running the beta version, so if someone who's able to consistently reproduce the bug on the beta channel is willing to try out a few things for me, please let me know.

[tomasmozeris]

initialRegion works well on iOS google maps with 1.0.0-beta.7 👍👍 appreciate your efforts

[maxgenest]

Same here, 1.0.0-beta.7 seems to fix the problem on iOS when I use initialRegion. Thank you :)

[marcel-happyfloat]

@Simon-TechForm works perfectly, thank you very much ❤️👍! It also seems to fix another bug for me on the ios simulator, where the map tiles are not aligned with the actual coordinates somehow...

[github-actions]

🎉 This issue has been resolved in version 1.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[pot2mayo]

I tried version 1.1.0 and the initial region gets set correctly on iOS for half a second but then automatically zoom-out (without any state update from my side) to go back to the same state as in previous version when the bug occurred.
Any idea why the region would update itself automatically like that?
Thanks!

[tantabares]

I'm experiencing this issue with version 1.1.0: the first time my app is charged the map is all zoomed out. After a reload or a change in the coordinates, zoom is set as defined by initialRegion.

[tantabares]

I tested beta today, issue with iOS with google maps and initialRegion is not working, can be reproduced with /examples/DefaultMarker.js I have no objective c / swift knowledge and I can't propose "real fix". If anyone searching for temporal workaround, you could try:

const [loaded, setLoaded] = useState(false)
const onRegionChangeComplete = (region) => { 
  if (!loaded) { 
    if (region.latitude != initialRegion.latitude || region.longitude != initialRegion.longitude) {
      mapRef.animateToRegion(initialRegion, 1)
    }
    setLoaded(true)
  } 
}

this helped 100%, thank you

[Badra00]

Has this patch been removed from version 1.4.0-beta.1? @Simon-TechForm

[polygbrl]

Just in case it's some of your situations, if you are passing a ref to your MapView like ref={mapRef}, initialRegion will not work on iOS (specifically, it is working on Android) because you override the internal reference. You have to assign the ref to yours like so ref={map => mapRef = map}. The difference in behavior between the both platforms may make it look like a bug with the package.

[Badra00]

Just in case it's some of your situations, if you are passing a ref to your MapView like ref={mapRef}, initialRegion will not work on iOS (specifically, it is working on Android) because you override the internal reference. You have to assign the ref to yours like so ref={map => mapRef = map}. The difference in behavior between the both platforms may make it look like a bug with the package.

Even when doing like this: ref={(ref) => (mapRef.current = ref)}
I still have the issue, any idea @polygbrl ?

[polygbrl]

Even when doing like this: ref={(ref) => (mapRef.current = ref)}

@Badra00 You are assigning a whole ref to your ref.current, that is incorrect in any case. Try ref => mapRef = ref as suggested. Did you also try without any ref at all?

[haiderali3071]

I am facing same issue with "react-native-maps": "0.29.4"

[polygbrl]

@haiderali3071 Issue was resolved one year ago and react-natives-maps is now at 1.7.1. I would suggest that you actually read the thread and upgrade your package version.

🎉 This issue has been resolved in version 1.0.0-beta.1 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[Badra00]

Even when doing like this: ref={(ref) => (mapRef.current = ref)}

@Badra00 You are assigning a whole ref to your ref.current, that is incorrect in any case. Try ref => mapRef = ref as suggested. Did you also try without any ref at all?

How do you do this with hooks?

[polygbrl]

Even when doing like this: ref={(ref) => (mapRef.current = ref)}

@Badra00 You are assigning a whole ref to your ref.current, that is incorrect in any case. Try ref => mapRef = ref as suggested. Did you also try without any ref at all?

How do you do this with hooks?

@Badra00 Your question is out of scope of this issue. Please ask React relative questions on Q/A platforms such as stackoverflow.com or try the discussions of the react-native-maps project if it is react-native-maps relative.

[aravi365]

facing the same issue on 1.8.0. Tested maps with static coordinates as initialRegion.

[jonathaneemmett]

Also seeing same issue on 1.8.3

[TierryBr]

I had this same problem happening on the IOS emulator, when running on the physical device the problem did not occur.

[kicaal]

same

[sbrighiu]

Just FYI, for anyone still having issues with this. I still have issues on iPhone 15 Pro Max, mostly on release builds.

As a reference, if maybe it's a different bug than this one, my map would load up on the phone and not zoom in where i set it with initialRegion. Sometimes it would move and zoom in, but if i pan it would instantly jump to a point on the map, slightly lower and to the right of the coordinates I set. From that point on whatever region I set or fit coordinates call would animate to a wrong point on the map, with no way of fixing it.

Using "react-native-maps": "1.18.0"

I recommend experimenting with the following:

1. If using react navigation bottom tabs, set the tab options lazy value to true (it would be nice if someone knows why this matters so much and can fix it)
2. Read this article about refs and callback refs - the "skill issue" responses above for a simple 2 line explanation are annoying, primarily since all the examples available here use class components...
3. Add let mapRef: MapView | null = null; (I prefer the obvious null value until everything is ready) and ref={(ref)=>{if(ref) { mapRef = ref }}} bit to your code (and used it directly, without .current)
4. At this moment, you can try initialRegion again and see if everything is fixed for you
5. If it's not fixed, use isFocused from react-navigation + useEffect to trigger a region animation or a fitToCoordinates call, with no animation - in most cases this will be enough to pass the onMapReady and onMapLoaded (which is called multiple times)
6. You could try a setTimeout combined with onMapReady or with some other trigger like the result of the first onRegionChangeComplete, but i don't think its that much better than the isFocused trigger
7. If this still does not work, evaluate your memo()'s and see if you can remove them and test
8. In my case that is where the issue was finally fixed.

I hope it helps someone

[karuzo17]

@sbrighiu i am having this issue since now almost two weeks and its driving me crazy. Unfortunately your steps do not help me. For me initially everything is fine, the troubles start as soon as i logout the current demo user, and log back in again with a different user. The initialRegion seems to jumpt to Africa (even though the region is correctly set). Afterwards each animateToRegion is offset slightly to the lower right. Any idea what i could try in addition? I guess i have to create a new issue ...

[sbrighiu]

Conditionally render the map based on if you have a user or not. It's possible it may fix it, otherwise try to implement some sort of loading inside the map, and when the loading finishes conditionally render a different map component with the initialRegion of your choice. The animation to the region may work if done this way but it depends a lot on the codebase. Best regards, Stefan

…

On Sep 21, 2024 at 22:41 +0300, tmhrl ***@***.***>, wrote: @sbrighiu i am having this issue since now almost two weeks and its driving me crazy. Unfortunately your steps do not help me. For me initially everything is fine, the troubles start as soon as i logout the current demo user, and log back in again with a different user. The initialRegion seems to jumpt to Africa (even though the region is correctly set). Afterwards each animateToRegion is offset slightly to the lower right. Any idea what i could try in addition? I guess i have to create a new issue ... — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[sbrighiu]

The sad truth is it depends a lot... delaying the initial region animation by removing the initialRegion and doing it manually the first time when the screen is in focus is the first step. The only other advice i can give is to fix it somehow, then try to call it faster (relative to the mount of the component). If it breaks again, try calling it later and continue the search :) good luck :)