import {useState, useRef} from 'react'
import ... //same as before
const PlayScreen = (props) => {
const markerLatitude=32.5983
const markerLongitude=44.0175
//changed from useState to useRef
const mapRef = useRef (null);
const [myMarker, setMyMarker] = useState(null);
const [coordinate, setCoordinate] = useState(new AnimatedRegion({
latitude: markerLatitude,
longitude: markerLongitude,
latitudeDelta: 0.012,
longitudeDelta: 0.012,
}));
function animateMarkerAndCamera() {
let newCoordinate = {
latitude: 32.601,
longitude: 44.0172,
latitudeDelta: 0.012,
longitudeDelta: 0.012,
};
//camera will position itself to these coordinates.
const newCamera= {
center: {
latitude: 32.601,
longitude: 44.0172,
},
pitch: 0,
heading: 0,
//zoom: 17 --Use it when required
}
if (myMarker) {
myMarker.animateMarkerToCoordinate(newCoordinate, 4000);
//camera type, `newCamera`, used inside animateCamera
mapRef.current.animateCamera(newCamera, {duration: 4000})
}
}
return (
<View style={styles.container}>
<MapView
ref={ mapRef } //There is also change here
style={styles.map}
initialRegion={{
latitude: 32.5983,
longitude: 44.0175,
latitudeDelta: 0.012,
longitudeDelta: 0.012,
}}
//These are newly added
pitchEnabled ={false}
zoomEnabled ={false}
>
<MarkerAnimated
ref={marker => {
setMyMarker(marker);
}}
{/*any kind of image can be replaced here */}
image={require('../../../Assets/Images/curlingStone.png')}
coordinate={coordinate}
/>
</MapView>
<View style={styles.buttonContainer}>
<TouchableOpacity
onPress={() => animateMarkerAndCamera()}
style={[styles.bubble, styles.button]}
>
<Text>Animate</Text>
</TouchableOpacity>
</View>
</View>
);
}
export default PlayScreen
const styles = StyleSheet.create({ ... //same as before