CODEWITHSUNDEEP
androidreact-nativegeolocationreact-redux
ronsun03
ronsun03

Reputation: 61

React Native Geolocation Watchposition Won't Real-Time Update

I am using navigator.geolocation.getCurrentPosition() and navigator.geolocation.watchPosition() to get the current location of the phone and then to keep getting that position in real time as it moves, along with the speed. After making these calls, I use redux to set the state with the current location and speed.

When I test this in the genymotion emulator, it works as planned when I change the gps coordinates. The state updates with the current location and that information is rendered on the screen.

However, when I build the app to test on my phone, it's not working as expected. When I first open the app, the location shows correctly. When the car starts moving though, the location and speed are only updating every so often.

On the screen, I have the current position and current speed, which is pulling its data from the state that I have populated with redux. These numbers are only updating probably every 5-10 seconds.

I have a map open on the app which shows/updates with my current location (pulling its coordinates from the same state as the "current position" and "current speed" I indicated above). The current location on the map shows me moving, almost in real time, updating every half second or so.

Sorry for all the text, but the biggest question here is: If my map and screen are pulling their data from the same state, why is the map updating in real-time, but not elsewhere? The intent I'd expect is to the see the current location and speed numbers changing almost every second.

Here is my navigator geolocation code below for reference:

navigator.geolocation.getCurrentPosition()

navigator.geolocation.getCurrentPosition((position) => {
  const lat = parseFloat(position.coords.latitude);
  const long = parseFloat(position.coords.longitude);

  const initialRegion = {
    latitude: lat,
    longitude: long,
    latitudeDelta: LATITUDE_DELTA,
    longitudeDelta: LONGITUDE_DELTA
  };

  this.props.setCurrentPosition(initialRegion);
  },
  error => console.log('getCurrentPosition error', JSON.stringify(error)),
  { enableHighAccuracy: true, maximumAge: 0 }
);

navigator.geolocation.watchPosition()

this.watchId = navigator.geolocation.watchPosition(position => {
    console.log('watchposition: ', position);

    const lat = parseFloat(position.coords.latitude);
    const long = parseFloat(position.coords.longitude);

    const lastRegion = {
      latitude: lat,
      longitude: long,
      longitudeDelta: LONGITUDE_DELTA,
      latitudeDelta: LATITUDE_DELTA
    };

    // convert speed from m/s to mph
    const speed = position.coords.speed * 2.23694;

    this.props.setCurrentPosition(lastRegion);
    this.props.setCurrentSpeed(speed);
  },
  error => console.log('watchposition error', error),
  { enableHighAccuracy: true, maximumAge: 0 }
);

Upvotes: 2

Views: 4302

Answers (1)

ronsun03
ronsun03

Reputation: 61

I wasn't able to get watchPosition() to consistently work but ended up setting a timer to run getCurrentPosition() every couple seconds which works just as well for my app.

Upvotes: 1

Related Questions