CODEWITHSUNDEEP
androidgoogle-mapsreactjsreact-nativegeolocation
pedropeixoto
pedropeixoto

Reputation: 1633

Follow user location on React Native AirBnb's MapView [Android]

I'm using airbnb's map for react-native on my app. This question is for the android app since I didn't get around the iOS app yet.

My problem:

navigator.geolocation works fine on emulator, but takes too long on real devices, to the point it sometimes times out on older devices.

What I've noticed:

if showsUserLocation prop is set to true, I can see the native "current position" marker on the map way before getCurrentPosition resolves.

What I want:

  1. I want my region to always be centered on the user's location.
  2. I want either a way to access native geolocation api (should be faster?), or maybe someone to tell me what I'm doing wrong. Below is a code sample.
  3. I want to still be able to detect the user's location even after the location services have been toggled on/off. This is the behaviour of the showsUserLocation prop, but it seems once watchPostion errors, it stops completely.

Here's what I have so far, it's very simple as it is:

  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        console.log("getCurrentPosition Success");
        this.setState({
          region: {
            ...this.state.region,
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
          }
        });
        this.props.resetNotifications();
        this.watchPosition();
      },
      (error) => {
        this.props.displayError("Error dectecting your location");
        alert(JSON.stringify(error))
      },
      {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
    );
  }

  watchPosition() {
    this.watchID = navigator.geolocation.watchPosition(
      (position) => {
        console.log("watchPosition Success");
        if(this.props.followUser){
          this.map.animateToRegion(this.newRegion(position.coords.latitude, position.coords.longitude));
        }
      },
      (error) => {
        this.props.displayError("Error dectecting your location");
      },
      {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
    );
  }

Upvotes: 12

Views: 4511

Answers (2)

gafi
gafi

Reputation: 12784

I have always found watchPosition iffy between different browsers, one thing that worked for me before is to replace with getCurrentPosition inside a setInterval so that it will get the location every few seconds, and if it fails once it will retry next interval, unlike watchPosition which stops watching if an error occurs.

Generally browser geolocation is not very reliable, you can check this thread for some issues https://github.com/facebook/react-native/issues/7495

Another alternative which will definitely be faster and maybe more reliable is to use the native geolocation API. Check this question for libraries that expose native geolocation for react native React-native Android geolocation

Upvotes: 5

Matt Aft
Matt Aft

Reputation: 8936

Not sure if this will solve your issue but try this:

navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log("getCurrentPosition Success");
    this.setState({
      region: {
        ...this.state.region,
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
      }
    }, () => {
      this.props.resetNotifications();
      this.watchPosition();
    });
  },

Upvotes: 0

Related Questions