-
Notifications
You must be signed in to change notification settings - Fork 4.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[iOS - Google Maps] Fix animateToCoordinate and animateToRegion #1115
[iOS - Google Maps] Fix animateToCoordinate and animateToRegion #1115
Conversation
8a9778d
to
ac26f09
Compare
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): Now if I run with your fix: Expected: Animates for 15 seconds Note: Same behaviour in both IOS Simulator (iPhone 6) and real device (iPhone 5). 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: |
ac26f09
to
a8c6a2c
Compare
Hi @peterept. Thanks for pointing out the In your example, can you change the duration to |
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: Also checked animateToRegion with Both work and smooth as silk on simulator and device. Your PR lgtm. Nice one, this will improve my app! |
@ryankask how do we get this merged? |
Can |
@grundmanise They might be able to but at the moment the only two methods on @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 |
Thanks for the answer.
You mean that now |
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. |
I'm so exited to add this to my project! Thxs guys for your time! |
@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 |
a8c6a2c
to
62f6de5
Compare
@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 I'm seeing the below but I haven't had a chance to look into it: |
any updates on this? |
@lelandrichardson just ran into this problem myself, is there anything that can be done to expedite merging this? |
Been waiting for this one to get merged for a while. |
Just chiming in that we've verified this fix on Expo and are pulling it into our next SDK version. |
Thanks @terribleben! (and of course @ryankask for the solution) 😀 |
@ryankask - Thanks!! Works great :) |
…t-native-maps#1115) * Add animateToCoordinate to Google Maps on iOS * Add animate to random coordinate button in example app * Fix animateToRegion duration for Google Maps on iOS
…t-native-maps#1115) * Add animateToCoordinate to Google Maps on iOS * Add animate to random coordinate button in example app * Fix animateToRegion duration for Google Maps on iOS
…-upstream * upstream/master: Add minZoom and maxZoom properties for android and ios (react-native-maps#1360) Reference install solution in issue react-native-maps#718 in install docs (react-native-maps#1448) updates npm cache clean command (react-native-maps#1450) v0.15.3 Added BatchedBridge Upgraded ios deps Use prop-types and add supprort for RN 0.45 Allow react 16.0.0-alpha [Android] Code cleanup step I - reformatting (react-native-maps#1415) Fixes google map null pointer exception (react-native-maps#1403) [iOS - Google Maps] Fix animateToCoordinate and animateToRegion (react-native-maps#1115) Update from View.propTypes to ViewPropTypes to match RN v0.44.0 (react-native-maps#1323) Fix import header for React Native 0.44.2 (react-native-maps#1362) Fix a couple typos (react-native-maps#1375)
* 'master' of github.com:Vizzuality/react-native-maps: fix: error syntax on AirMaps max and min zoom level not nil check Add minZoom and maxZoom properties for android and ios (react-native-maps#1360) Reference install solution in issue react-native-maps#718 in install docs (react-native-maps#1448) updates npm cache clean command (react-native-maps#1450) v0.15.3 Added BatchedBridge Upgraded ios deps Use prop-types and add supprort for RN 0.45 Allow react 16.0.0-alpha [Android] Code cleanup step I - reformatting (react-native-maps#1415) Fixes google map null pointer exception (react-native-maps#1403) [iOS - Google Maps] Fix animateToCoordinate and animateToRegion (react-native-maps#1115) Update from View.propTypes to ViewPropTypes to match RN v0.44.0 (react-native-maps#1323) Fix import header for React Native 0.44.2 (react-native-maps#1362) Fix a couple typos (react-native-maps#1375)
…t-native-maps#1115) * Add animateToCoordinate to Google Maps on iOS * Add animate to random coordinate button in example app * Fix animateToRegion duration for Google Maps on iOS
This addresses #955 and #811 by doing the following:
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 theduration
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#15663039animateToCoordinate()
. It's very similar to the existinganimateToRegion()
button but is a useful test.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
.