[iOS - Google Maps] Fix animateToCoordinate and animateToRegion

[ryankask]

This addresses #955 and #811 by doing the following:

• Add the missing animateToCoordinate() for Google Maps on iOS - I just noticed that @peterept recently create Implements animateToCoordinate to Google Maps iOS #1112 😄 but one issue I found when I was working on it was that UIView animation doesn't work. This means the duration argument is ignored. The solution was to use Core Animation, which I found here: http://stackoverflow.com/questions/15662148/controlling-animation-duration-in-google-maps-for-ios/15663039#15663039
• Add a new button to the "Tracking Position" example that uses animateToCoordinate(). It's very similar to the existing animateToRegion() button but is a useful test.
• Use Core Animation for animateToRegion(). This is backwards incompatible because the default duration of 500ms was being ignored before but now works.

Google Maps requires that the QuartzCore framework is linked against the project so I assume it's fine to use CATransaction.

[peterept]

Hi @ryankask brilliant mate - great catch on duration not working - Embarrassingly I assumed the animation code I copied from animateToRegion worked..

So I pulled this PR down and ran it with the following test page with a duration as 1500ms:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Button,
  View,
  Text
} from 'react-native';
import MapView from 'react-native-maps'
import CustomCallout from './CustomCallout';

export default class HelloMaps extends Component {
  state = {
    markers: [
      { key: "test", coordinate: {latitude: -33.852896, longitude: 151.210291}}
    ]
  }
  render() {
    return (
      <View style={styles.container} >
      <MapView ref={component => this.map = component} style={styles.map} 
          provider={MapView.PROVIDER_GOOGLE}
      >
          {this.state.markers.map(marker => (
            <MapView.Marker
              title={marker.key}
              image={require('./assets/pin-comment.png')}
              key={marker.key}
              coordinate={marker.coordinate}
            >
              <MapView.Callout tooltip style={styles.customView}>
                <CustomCallout>
                  <Text>This is a custom callout bubble view</Text>
                </CustomCallout>
              </MapView.Callout>
            </MapView.Marker>            
          ))}
      </MapView>
      <Button 
        title="Go Sydney" 
        onPress={() => { this.map.animateToCoordinate({latitude: -33.852896, longitude: 151.210291}, 1500)  }}
      />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },  
  customView: {
    width: 140,
    height: 100,
  },  
});

AppRegistry.registerComponent('HelloMaps', () => HelloMaps);

Just to confirm with my fix it animates in about 1 sec (as you discovered):

Imgur

Now if I run with your fix:

Imgur

Expected: Animates for 15 seconds
Actual: Animated for ~4 seconds. The animation is 4 times faster then expected.

Note: Same behaviour in both IOS Simulator (iPhone 6) and real device (iPhone 5).
Xcode version 8.1

On playing around if I use the duration 1500*4, then it runs at 15 seconds.

I have searched around and I can't see why this is happening! :-(

Small nit, a bit cleaner to read rather then:
[CATransaction setValue:[NSNumber numberWithFloat: duration/1000] forKey:kCATransactionAnimationDuration];
use: [CATransaction setAnimationDuration:duration/1000];

[ryankask]

Hi @peterept. Thanks for pointing out the setAnimationDuration method. It's much nicer and I've updated the PR.

In your example, can you change the duration to 15000 (note the extra 0) to check if it animates for 15 seconds? We're going from millisecond durations in the JS world to durations in seconds. The video seems like 1.5 seconds to me although it is bit tricky with tiles loading after.

[peterept]

Ahh yes that was it @ryankask ! !

I was staring at the 1500 for an hour and didn't notice it should have been 15000. Thank you for spotting that.

Confirmed, 15000 animates correctly for 15 seconds:

animateToCoordinate imgur

Also checked animateToRegion with this.map.animateToRegion({latitude: -33.852896, longitude: 151.210291, latitudeDelta: 0.0025, longitudeDelta: 0.0025}, 15000), and it correctly works:

animateToRegion imgur

Both work and smooth as silk on simulator and device.

Your PR lgtm.

Nice one, this will improve my app!

[peterept]

@ryankask how do we get this merged?

[grundmanise]

Can fitToElements, fitToSuppliedMarkers, fitToCoordinates, also have a duration prop?

[ryankask]

@grundmanise They might be able to but at the moment the only two methods on MapView that take a duration argument are the ones addressed in this PR.

@peterept I'm not sure. Perhaps next time the project maintainers comb through the PRs they can comment.

At the moment I just created a new category in AIRGoogleMapManager+Animation.m to add the animateToCoordinate method.

[grundmanise]

Thanks for the answer.

Use Core Animation for animateToRegion(). This is backwards incompatible because the default duration of 500ms was being ignored before but now works.

You mean that now animateToRegion ignores duration prop when PROVIDER_GOOGLE?

[ryankask]

If I've observed correctly, it doesn't ignore it but it tries to use it with an iOS animation method that doesn't work. The effect is that it's ignored.

[seppemarotta]

I'm so exited to add this to my project! Thxs guys for your time!

[lelandrichardson]

@ryankask i'd like to get this in... do you think you can rebase? I've changed some of the project structure around and it's causing conflicts

[ryankask]

@lelandrichardson I've rebased the branch. There weren't any conflicts but I wasn't able to run the example project.

There are some instructions for how to run the example project here: https://github.com/airbnb/react-native-maps/blob/master/docs/examples-setup.md. It looks like the npm install part needs to be tweaked because of the reorganisation but what about the Cocoapods part?

I'm seeing the below but I haven't had a chance to look into it:

[guilhermepontes]

any updates on this?

[mbroadst]

@lelandrichardson just ran into this problem myself, is there anything that can be done to expedite merging this?

[sonaye]

Been waiting for this one to get merged for a while.

[terribleben]

Just chiming in that we've verified this fix on Expo and are pulling it into our next SDK version.

[peterept]

Thanks @terribleben! (and of course @ryankask for the solution) 😀

[ngandhy]

@ryankask - Thanks!! Works great :)