1

Zooming in and out with Android is pretty easy and works totally fine; however, the result is pretty much different with IOS. I can not zoom the map in to align the map view like what I have in Android.

I set my deltas to:

const LATITUDE_DELTA = 0.000894375;
const LONGITUDE_DELTA = 0.000894375;

And I am using:

  region: new MapView.AnimatedRegion({
    latitude: 0,
    longitude: 0,
    latitudeDelta: LATITUDE_DELTA,
    longitudeDelta: LONGITUDE_DELTA,
  }),

For both IOS and Android. Though I found this answer:

how to zoom in/out in react-native-map?

But I am not sure if AnimateToRegion and AnimatedRegion are the same thing. If not, I am not sure how to implement the AnimateToRegion.

Please advise thank you.

Website Is Fun
  • 290
  • 6
  • 20

1 Answers1

1

I am not sure about AnimatedRegion, but you can use AnimateToRegion like following:

this.refs.map.animateToRegion({
      latitude: latitude, 
      longitude: longitude, 
      latitudeDelta: LATITUDE_DELTA, 
      longitudeDelta: LONGITUDE_DELTA}, 
      duration)

<MapView style={{flex: 1}}
          ref="map"
          ...
          >

I found duration of 3000 suitable for my use.

Urska Krivc
  • 815
  • 1
  • 10
  • 17
  • It did not work . . the error says **Cannot read property 'animateToRegion' of undefined** this maybe because there is not **animateToRegion** when I console log the **this.refs.map** . . I am now using **MapView.Animated**, should I remove Animated and use MapView only? – Website Is Fun May 31 '17 at 00:14
  • I am using the version 0.13.0 of react native maps – Website Is Fun May 31 '17 at 00:17
  • Did you put `ref="map"` into your MapView? – Urska Krivc May 31 '17 at 06:13
  • Oh, sorry. My mistake. You must have put `ref="map"`, otherwise you would get `undefined`. – Urska Krivc May 31 '17 at 11:20
  • Yes I added **ref="map"** on my MapView . . I am using react native maps version 0.13.0 . . Should I put the **this.refs.map.animateToRegion** inside **componentDidUpdate**? – Website Is Fun Jun 01 '17 at 02:36
  • I tried it on android and added you code inside **componentDidUpdate**, now I get a different error saying **this.refs.map.animateToRegion is not a function** :) – Website Is Fun Jun 01 '17 at 02:51
  • Thanks a lot Urska it is now working, no more errors . . I changed **MapView.Animated** to **MapView** and it is now working . . :) – Website Is Fun Jun 01 '17 at 03:09