Last active
September 15, 2022 13:44
-
-
Save shafayeatsumit/74d5cace50e54ca52f01c0947349c2ba to your computer and use it in GitHub Desktop.
Example: React Native Maps smooth animation to coordinate and region.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import {TouchableOpacity, Image,StyleSheet,Dimensions, View, Text, Animated, Easing, PanResponder, Platform } from 'react-native'; | |
import { Ionicons } from '@expo/vector-icons'; | |
import { MapView } from 'expo'; | |
import DateTimePicker from 'react-native-modal-datetime-picker'; | |
const { width, height } = Dimensions.get('window'); | |
const ASPECT_RATIO = width / height; | |
const LATITUDE_DELTA = 0.006339428281933124; | |
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; | |
console.disableYellowBox = true; | |
const iconSize = Math.round(height/10); | |
// impoart your own icon. | |
const carIcon = require('../../car1.png'); | |
const initCoordinates = { | |
latitude: 24.133765, | |
longitude: 90.198258, | |
latitudeDelta: 5, | |
longitudeDelta: 5, | |
}; | |
export default class SmoothAnimation extends Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
routeData: {}, | |
bearing: 0, | |
speed: 0, | |
time: "N/A", | |
coordinate: new MapView.AnimatedRegion({ | |
latitude: 23, | |
longitude: 90, | |
}), | |
}; | |
this.indx = 0; | |
} | |
handleAnimation = () => { | |
const data = this.data[this.indx] | |
const coord = data.loc.coordinates | |
const markerCoord = { | |
latitude: coord[1], | |
longitude: coord[0] | |
} | |
console.log("data ==>",data); | |
this.indx = this.indx + 1; | |
const duration = 100 | |
const region = { | |
...markerCoord, | |
latitudeDelta: LATITUDE_DELTA, | |
longitudeDelta: LONGITUDE_DELTA | |
}; | |
this.map.animateToRegion(region,1000*2) | |
this.state.coordinate.timing(markerCoord,1000).start(); | |
// if (Platform.OS === 'android') { | |
// if (this.marker) { | |
// this.state.coordinate.timing(markerCoord,500*2).start(); | |
// // console.log("===>",this.marker._component) | |
// // this.marker._component.animateMarkerToCoordinate( | |
// // markerCoord, | |
// // duration | |
// // ); | |
// } | |
// } else { | |
// console.log("markerCoord",markerCoord) | |
// } | |
this.setState({time: data.time, bearing: data.bearing}) | |
} | |
countDonw = () => { | |
console.log("countDonw function"); | |
} | |
componentDidMount = async () => { | |
const result = await (await fetch('https://routedata-api-moxccjjiez.now.sh/')).json() | |
this.data = result.data | |
this.handleAnimation() | |
setInterval(this.handleAnimation,3000) | |
} | |
render(){ | |
return ( | |
<View style={{flex:1}}> | |
<MapView | |
style={styles.container} | |
initialRegion = {initCoordinates} | |
ref={ref => { this.map = ref; }} | |
> | |
<MapView.Marker.Animated | |
coordinate={this.state.coordinate} | |
ref={marker => { this.marker = marker; }} | |
> | |
<Image | |
style={{ | |
width: 40, | |
height: 40, | |
resizeMode: 'contain', | |
transform: [ | |
{ rotate: `${this.state.bearing}deg` } | |
], | |
zIndex:3 | |
}} | |
source={carIcon} | |
/> | |
</MapView.Marker.Animated> | |
</MapView> | |
</View> | |
) | |
} | |
} | |
var styles = StyleSheet.create({ | |
container: { | |
// flex: 1, | |
flex: 8, | |
position: 'absolute', | |
top: 0, | |
left: 0, | |
right: 0, | |
bottom: 0, | |
//justifyContent: 'flex-end' | |
}, | |
panview: { | |
position: "absolute", | |
}, | |
box: { | |
backgroundColor: 'rgba(0,0,0,0.7)', | |
height: height, // let's make panview height is equal to screen height | |
width: width, | |
borderRadius: 10, | |
//position: 'absolute' | |
}, | |
}); |
@dilipsuthar97 did you figure out the solution to the error?
@AnetteVestvik yes I got the solution for the above error. You just have to add value for latitudeDelta
and longitudeDelta
in coordinates object inside MapView and Marker as well.
If you r using animated mapview and marker than you probably have to add this.
const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
state = {
region: new AnimatedRegion({
latitude: 0,
longitude: 0,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}),
coordinate: new AnimatedRegion({
latitude: 0,
longitude: 0,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}),
};
And If you'r updating the value of coordinates than you should add latitudeDelta
and longitudeDelta
this.state.coordinate.setValue({
latitude: lat,
longitude: long,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
});
I hope it'll help you
The Marker does not move anymore, seems like because https://routedata-api-moxccjjiez.now.sh is unavailable now
How can I do it with function Components??
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@ghost I have solved it, you need to following code:
this.state.coordinate.timing({
latitude: location.latitude,
longitude: location.longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
duration
}).start()