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' | |
}, | |
}); |
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
The Marker does not move anymore, seems like because https://routedata-api-moxccjjiez.now.sh is unavailable now