Im also facing same error. This error occurs because of the map's layout (width and height) is not yet ready when the newLatLngBounds method is called. Code for display the map and selecting the location
import { View, StyleSheet, Alert, Dimensions } from "react-native";
import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps";
import * as Location from "expo-location";
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import Button from "../../../../components/Button";
const MapScreen = ({ setLocation, closeMap }) => {
const [region, setRegion] = useState(null);
const [selectedLocation, setSelectedLocation] = useState(null);
const [mapReady, setMapReady] = useState(false);
const { height } = Dimensions.get("window");
useEffect(() => {
(async () => {
const { status } = await Location.requestForegroundPermissionsAsync();
if (status !== "granted") {
Alert.alert(
"Permission denied",
"Enable location permissions to use this feature"
);
return;
}
const currentLocation = await Location.getCurrentPositionAsync({});
setRegion({
latitude: currentLocation.coords.latitude,
longitude: currentLocation.coords.longitude,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
});
})();
}, []);
const handleMapMarker = (coordinate) => {
setSelectedLocation(coordinate);
};
const handleConfirmLocation = async () => {
if (selectedLocation) {
const [address] = await Location.reverseGeocodeAsync(selectedLocation);
if (address) {
const formattedAddress = `${address.name || ""}, ${
address.street || ""
}, ${address.city || ""}, ${address.region || ""}, ${
address.country || ""
}`.trim();
setLocation(formattedAddress);
} else {
Alert.alert("Address not found", "Unable to get the full address.");
}
closeMap();
} else {
Alert.alert(
"No location selected",
"Please select a location on the map."
);
}
};
return (
<View style={{ height: hp("100%"), width: wp("100%") }}>
{region && (
<MapView
provider={PROVIDER_GOOGLE}
style={{ flex: 1, minHeight: height * 0.8 }}
initialRegion={region}
onPress={(e) => handleMapMarker(e.nativeEvent.coordinate)}
showsUserLocation={true}
onMapReady={() => setMapReady(true)}
>
{mapReady && selectedLocation && (
<Marker coordinate={selectedLocation} draggable />
)}
</MapView>
)}
<View
style={{ position: "absolute", bottom: hp("10%"), left: 10, right: 10 }}
>
<Button
text={"Confirm Location"}
onPress={handleConfirmLocation}
fontSize={16}
height={hp("5.5%")}
/>
</View>
</View>
);
};
export default MapScreen;