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 🤞