79309580

Date: 2024-12-26 13:27:42
Score: 3
Natty:
Report link

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;
Reasons:
  • RegEx Blacklisted phrase (1): Im also facing same error
  • Long answer (-1):
  • Has code block (-0.5):
  • Me too answer (2.5): also facing same error
  • Low reputation (1):
Posted by: Shivanand Muddi