React native app : Not authorized to use location services

Question

I'm currently working on a project that uses the geolocation service of my phone. I currently have a prolem with this service, it says that geolocation is not authorized.

I've tried to look on the internet and a few people had the same problem but I didn't manage to fix it...

  componentDidMount() {
    const { coordinate } = this.state;

    this.requestCameraPermission();

    this.watchID = navigator.geolocation.watchPosition(
      position => {
        const { routeCoordinates, distanceTravelled } = this.state;
        const { latitude, longitude } = position.coords;

        const newCoordinate = {
          latitude,
          longitude
        };
        console.log({ newCoordinate });

        coordinate.timing(newCoordinate).start();

        this.setState({
          latitude,
          longitude,
          routeCoordinates: routeCoordinates.concat([newCoordinate]),
          distanceTravelled:
            distanceTravelled + this.calcDistance(newCoordinate),
          prevLatLng: newCoordinate
        });
      },
      error => console.log(error),
      {
        enableHighAccuracy: true,
        timeout: 20000,
        maximumAge: 1000,
        distanceFilter: 10
      }
    );
  }

Instead of appearing on my current spot, i'm in San Fransisco (which is the default location on maps). The function navigator.geolocation.watchPosition gets the error : "code": "E_LOCATION_UNAUTHORIZED", "message": "Not authorized to use location services", "watchId": 1,

My phone is a Samsung S9 and the location service is enabled... So I'm really curious about the problem I have right now.

Shadchan

Answer 1

Thank you for your answer, I managed to fix my problem, apparently expo wasn't allowed to use my location for some reason, so I just forced it with :

  Location.requestPermissionsAsync();

Shadchan

Answer 2

import * as Permissions from 'expo-permissions';

await Permissions.askAsync(Permissions.LOCATION);

Alternative method if requestPermissionsAsync(); is unable to work.

Classify

This answer is just 2 days old but seems you didn't checked the docs, as both of the things have been changed. Permissions are being added to their respective packages and also in Location we have now seperate permissions for foreGround location and backGround location. Please check. BTW i am here to find some answer for this problem. For me it is device specific also because on snack.expo.io and on one of my devices, it works fine but on another device it shows error and also blocks the location access without even prompting me. – Quijano

I'm using expo 36 if I remember correctly – Classify

Answer 3

I've had the case when iOS worked fine without asking explicitly in the .ts code for any permissions. However, Android showed that warning Not authorized to use location services. The Permissions have slightly different syntax now, here is an example with Location.

if (Platform.OS !== "web") {
  const { status } = await Location.requestForegroundPermissionsAsync();
  
  if (status !== "granted") {
    Alert.alert(
      "Insufficient permissions!",
      "Sorry, we need location permissions to make this work!",
      [{ text: "Okay" }]
    );
    return;
  }
}

(in general) Don't mess up anything in the AndroidManifest.xml, like <uses-permission android:name=..., because whatever Expo needs will generate automatically there. That's the case for Location, citing official docs:

"Some Expo and React Native modules include permissions by default. If you use expo-location, for example, both the ACCESS_COARSE_LOCATION and ACCESS_FINE_LOCATION are implied and added to your app's permissions automatically."

Decay

Answer 4

Silly mistake on my part, but don't forget to await the method requestForegroundPermissionsAsync. Only then use Location's methods

import * as Location from 'expo-location';

const result = await Location.requestForegroundPermissionsAsync();

Metrics

Answer 5

If you are using Expo client on your mobile then please make sure you have enabled the location permission.

If you already given the permission, then check your AndroidManifest.xml for <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> for these locations.

Bogusz

When testing this, do I add it in the debug/AndroidManifest.xml or main/AndroidManifest.xml? Does it need to be in both? – Overbite

Answer 6

If you are using react native you may need to add following in your AndroidManifest.xml file,

   <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
   <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

Chewink