React Native App shows incorrect starting position on map after npm update

83 Views Asked by At

I have a React Native app that displays a map with Malmö as the starting point and a button to show the user's current location on Android Emulator. After running npm update, the app shows Washington D.C. as the starting point and the button does nothing. The code is the same as before the npm update. I have verified that the location permissions are correct as I get this printed out in terminal: 'You can use the location', whenever I'm pressing on the button. What can cause the app to show an incorrect map and button functionality after npm update?

import MapboxGL from "@rnmapbox/maps"
import { PermissionsAndroid } from "react-native"
import Geolocation from "@react-native-community/geolocation"

 const [coordinates, setCoordinates] = useState([
    13.016573571131062, 55.597274504505585,
  ])
 
 const [currentLocation, setCurrentLocation] = useState(null)

const Permission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        {
          title: "Ploteye App Location Permission",
          message: "Ploteye  needs access to your location ",
          buttonNeutral: "Ask Me Later",
          buttonNegative: "Cancel",
          buttonPositive: "OK",
        }
      )
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log("You can use the location")
        getCurrentLocation()
      } else {
        console.log("Location permission denied")
      }
    } catch (error) {
      console.log("error:", error)
    }
  }

  const getCurrentLocation = () => {
    Geolocation.getCurrentPosition(
      (position) => {
        const { latitude, longitude } = position.coords
        setCurrentLocation({ latitude, longitude })
        console.log("INSIDE getCURRENTLOCATION: ", latitude, longitude)
      },
      (error) => alert("Error", error.message),
      { enableHighAccuracy: true, maximumAge: 1000 }
    )
  }

<MapboxGL.Camera
            zoomLevel={currentLocation ? 18 : zoomLevel} 
            centerCoordinate={
              currentLocation
                ? [currentLocation.longitude, currentLocation.latitude]
                : coordinates
            } 
          />

Please help me and let me know if I need to share more code!

1

There are 1 best solutions below

1
AranAli On

Apperantly the solution for me was to change this line of code in my package.json file: "@rnmapbox/maps": "^10.0.15", to this: "@rnmapbox/maps": "~10.0.15",.