'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