Initial Postion bases on geolocation about react-native-maps

[42void]

Problem is solved if you remove enableHighAccuracy: true

[qrobin]

Could we guys somehow get the blue dot coords? It would be a perfect solution for tons of user location tracking problems. Because navigator.geolocation is not cool at all, and it's coords differ from the blue dot's ones..

[npomfret]

Do navigator.geolocation.getCurrentPosition work and navigator.geolocation.watchPosition work on android? I'm just getting a timeout error. I've got <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />in my manifest file, and I can see the users current position (the blue dot) on a map, but I can't programatically get the position.

[ockka]

I’m having a similar issue. I can’t receive the initial position on Android via navigator.geolocation.getCurrentPosition because it will timeout. But I can receive the position from navigator.geolocation.watchPosition with Android. Currently I need to wait for the position before my component can be launched.

[tab1293]

Can confirm that I get a Location request timed out error on a S6 with this code:

componentWillMount() {
    this._setPosition();
}

_setPosition() {
    navigator.geolocation.getCurrentPosition((position) => {
        this.setState({
            position: position
        });
    }, (error) => {
        alert(error)
    }, {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000});
}

Android manifest has proper permission:
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Is this an error with navigator.geolocation? Is there another library I can use for geolocation on Android devices?

[graywolf336]

Sounds like that's async on android and sync on ios, but I could be wrong. Might be best to use region instead of initialRegion? That's just a guess though..

[lelandrichardson]

@SHIEER I suspect this is an issue where onMapReady has not been called yet when you're setting state. This would only end up being an issue on android.

When I get a sec I can try and get this code working on my machine...

[ty-sang]

@lelandrichardson Yes, it's only happen on Android. Thanks for your reply, I appreciate

[christopherdro]

@SHIEER Are you receiving coordinates at all?
Also, have you added <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> to AndroidManifest.xml already?

[christopherdro]

@SHIEER Things are working fine for me.
Closing this for now since we haven't heard back in a while.
Feel free to re-open it again if the problem persists. Thanks!

[npomfret]

I've debugged the java code and found that my device is not updating its GPS location very often. The last update was over 12 hours ago. So if I change my js code to allow navigator.geolocation.getCurrentPosition to return a very old value it at least returns something now.

I've no idea why the device is not updating the location. I can see a blue dot on a MapView so I'm sure the GPS is working. It's a new device, maybe I need to do something to it in order to make it work.

[jrichardlai]

@npomfret this is more a react-native question in the comments it says

 /**
   * Get the current position. This can return almost immediately if the location is cached or
   * request an update, which might take a while.
   *
   * @param options map containing optional arguments: timeout (millis), maximumAge (millis) and
   *        highAccuracy (boolean)
   */

Its possible you have to move around to update the location.

[npomfret]

Thanks. Looks like there's something wrong with the device, its only updating the gps very rarely, so yes a very large value for max age works around the issue.

[christopherdro]

Use distance filter option on the watchPosition method.

[xvalentino]

Just a note, if you're on an emulator make sure you always have set your location.

[AugustoAleGonZhipCode]

@tab1293 Probably a newbie question. But how can I get access to the position? I am just starting on React Native enviroment. I hope you can answer me.

[koz]

@AugustoAleGonZhipCode Check this section of the React Native docs https://facebook.github.io/react-native/docs/geolocation.html

[petrovakd]

really, it would be great! it's quite strange that we can see this dot but don't have access to its coords

[lone-cloud]

Not sure what ppl's problem is with 42void's solution of removing enableHighAccuracy: true. It seems very counter-intuitive, but somehow it's been the only solution to get my map to center on the blue dot coords. Surprisingly my geolocation is much more precise without it (just luck?).

[qrobin]

@hoboman313 oh really??
Need to be checked : )

[joelGarcia93]

this code work perfectly in the cellphone (Im not using emulator)

import React, { Component } from 'react';
import {
Text,
View
} from 'react-native';

export default class App extends Component<{}> {

constructor(props) {
super(props);
this.state = {
initialPosition: 'unknown'
};
}

componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
var positionCoordinates = JSON.stringify(position);
this.setState({initialPosition: positionCoordinates});
},
(error) => alert(error.message),
{enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
);

}

render() {
return (

initial: { this.state.initialPosition }

);
}
}

[amit13091992]

  state = {
    focusedLocation: {
      latitude: 18.7934829,
      longitude: 98.9867401,
      latitudeDelta: 0.0122,
      longitudeDelta: Dimensions.get("window").width / Dimensions.get("window").height * 0.0122,
      locationChosen: false
    }
  }  

getLocationHandler = () => {
    Geolocation.getCurrentPosition(pos => {
      console.log('lat', pos.coords.latitude);
      console.log('lng', pos.coords.longitude);
      const coordsEvent = {
        nativeEvent: {
          coordinate: {
            latitude: pos.coords.latitude,
            longitude: pos.coords.longitude
          }
        }
      };
      console.log(" co-ordinates " + JSON.stringify(coordsEvent));
      this.pickLocationHandler(coordsEvent);
    },
      err => {
        console.log(err);
        alert("Fetching the Position failed, please pick one manually!");
      })
  }
  pickLocationHandler = event => {
    const coords = event.nativeEvent.coordinate;
    console.log("pickLocationHandler Co-Ordinates: " + JSON.stringify(event.nativeEvent.coordinate));
    this.map.animateToRegion({
      ...this.state.focusedLocation,
      latitude: coords.latitude,
      longitude: coords.longitude
    });
    this.setState(prevState => {
      return {
        focusedLocation: {
          ...prevState.focusedLocation,
          latitude: coords.latitude,
          longitude: coords.longitude
        },
        locationChosen: true
      };
    });
  };

render() {
    return (
<MapView
          initialRegion={this.state.focusedLocation}
          onMapReady={this.getLocationHandler}
</MapView>
);
}

by using onMapReady() method of MapView, you can set the map region automatically based on your current region and location.