Wrong Geolocation with React Native and iOS simula

Question

I am working with react-native-maps and using the react-native api for geolocation. When I am using location through the api what comes back on the simulator shows me in San Francisco not in Denver, CO where I am located. Is there a reason as to why my location would not show where I am at?

my function that runs the location

  // Get current users locaiton on load
  componentDidMount() {
    navigator.geolocation.getCurrentPosition((position) => {
      console.log(position);
      let newLat = parseFloat(position.coords.latitude);
      console.log("newLat", newLat);
      let newLng = parseFloat(position.coords.longitude);
      console.log("newLng", newLng);
      // set region of user to lat and long position
      // deltas set distance from marker (zoom) on map
      this.setState({
        region: {
          latitude: newLat,
          longitude: newLng,
          latitudeDelta: 0.0250,
          longitudeDelta: 0.0125
        },
        error: null
      });
      console.log(this.state);
    }, 
      // if error set state with error
      (err) => {
        console.log(err),
        // set location accuracy on
        // max time to find location in 5 sec
        // max time to use cached location for phone 5 sec
        { timeout: 5000, maximumAge: 5000 };
      }
    );

    // watch for changes and update location
    this.watchId = navigator.geolocation.watchPosition((position) => {
      console.log(position);
      let newLat = parseFloat(position.coords.latitude);
      console.log("newLat", newLat);
      let newLng = parseFloat(position.coords.longitude);
      console.log("newLng", newLng);
      // set region of user to lat and long position
      // deltas set distance from marker (zoom) on map
      this.setState({
        region: {
          latitude: newLat,
          longitude: newLng,
          latitudeDelta: 0.0250,
          longitudeDelta: 0.0125
        },
        error: null
      });
      console.log(this.state);
    },
      (err) => {
        console.log(err),
        // set location accuracy on
        // max time to find location in 5 sec
        // max time to use cached location for phone 5 sec
        // distance before location called again 10 m
        { timeout: 5000, maximumAge: 5000, distanceFilter: 10 }
      }
    );
  }

my location preset in initial state is :

this.state ={
      region: {
          latitude: 39.739236,
          longitude: -104.990251,
          latitudeDelta: 0.1000,
          longitudeDelta: 0.0500
      },

which is relatively closer than where the iOS simulator shows me at

anyone run into this problem and know how to solve it? Is it the network that react-native is running on or shouldn't it be pulling from my laptops network location?

I have looked to see if anyone else ran into this issue: Geolocation in React Native iOS and the search on stack only shows 6 results if you search for geolocation wrong react-native ios...google wasn't much help either.

Thanks for your help

Answer 1

That is the correct behavior on the iOS simulator (and the Android emulator). You can change the mocked coordinates for geolocation on each like so (paraphrased from other answers):

iOS

1. Run app in iOS simulator.
2. At the top menu bar, you'll find Debug -> Location -> Custom Location..(or you can choose to use others).
3. Set the Latitude & Longitude for the location.

Android

1. Run app in Android emulator.
2. Click on the ellipsis (...) in the toolbar.
3. Edit the coordinates in the newly opened settings under Location.

There's also a command line alternative for Android explained here using telnet and the geo fix command.

Or, you can do as ashutosh pandey suggests and test on a real device.