'Centered maps while pinch to zoom like Uber in react native
How to do it like a Uber app?
<View>
<MapView
onRegionChangeComplete={(e) => {
setLocalLocation({
latitude: e.latitude,
longitude: e.longitude,
});
}}
initialRegion={{
latitude: localLocation.latitude,
longitude: localLocation.longitude,
latitudeDelta: 0.004,
longitudeDelta: 0.0021,
}}
/>
<MapMarker />
</View>
I have a marker centered on the map and I want the zoom focused on the marker, like the Uber app.
const MapMarker = ({ theme }) => {
return (
<View
pointerEvents="none"
style={{
position: 'absolute',
top: 0,
bottom: 30,
left: 0,
right: 0,
alignItems: 'center',
justifyContent: 'center',
}}
>
<IconComponent name="location" size={30} color={theme.colors.primaryIcon} />
</View>
);
};
How can I control latitudeDelta and longitudeDelta correctly to expect the same result as the Uber app?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|