smooth user navigation react native maps
const AnimatedImage = Animated.createAnimatedComponent(Image)
export default (props) => {
const rotation = useRef(new Animated.Value(0)).current
const bearingDegree = rotation.interpolate({
inputRange: [0, 360],
outputRange: ['0deg', '360deg'],
});
useEffect(() => {
if(props.bearing !== null || props.bearing !== undefined) {
Animated.timing(rotation, {
toValue: props.bearing,
useNativeDriver: true,
duration: 10000,
}).start()
}
}, [props.bearing])
return (
<Marker.Animated
coordinate={markerOrigin.current.region}
ref={marker}
flat
anchor={{ x: 0.5, y: 0.5 }}
>
<AnimatedImage
source={require('../../assets/images/motor-map.png')}
style={[styles.bike, {transform: [{rotate: bearingDegree}]}]}
resizeMode="contain"
/>
</Marker.Animated>
)
}