Rahul Mishra
Rahul Mishra

Reputation: 4573

React native geolocation service not working for iOS

I am trying to get device current position in react native. I am using below library for get the location:

react-native-geolocation-service

My code:

try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
          {
            title: 'Device current location permission',
            message:
              'Allow app to get your current location',
            buttonNeutral: 'Ask Me Later',
            buttonNegative: 'Cancel',
            buttonPositive: 'OK',
          },
        );
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          this.getCurrentLocation();
        } else {
          console.log('Location permission denied');
        }
      } catch (err) {
        console.warn(err);
      }
     }

getCurrentLocation(){
     Geolocation.requestAuthorization();
     Geolocation.getCurrentPosition(
        (position) => {
            alert(position.coords.latitude);
            this.socket.emit('position', {
               data: position,
               id: this.id,
             });
        },
        (error) => {
          alert("map error: "+error.message);
            console.log(error.code, error.message);
        },
        { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
    );
   }

Android is working fine and getting the correct location but for IOS it's not working Also, it's not asking for allow location persmission. I am getting below error:

PERMISSION_DENIED: 1
POSITION_UNAVAILABLE: 2
TIMEOUT: 3
code: 3
message: "Unable to fetch location within 15.0s."

This is my info.plist:

<key>NSLocationWhenInUseUsageDescription</key>
<string>$(PRODUCT_NAME) would like to access your location.</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>$(PRODUCT_NAME) would like to access your location.</string>

This is background modes from xcode

enter image description here

Upvotes: 10

Views: 18068

Answers (2)

Mostasim Billah
Mostasim Billah

Reputation: 4557

I have solved this issue by this

async requestPermission() {
try {
  const granted = await PermissionsAndroid.requestMultiple([
    PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
    PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION,
  ]).then((result) => {
    console.log(result);
    if (
      result['android.permission.ACCESS_COARSE_LOCATION'] &&
      result['android.permission.ACCESS_FINE_LOCATION'] === 'granted'
    ) {
      this.getLocation();
      this.setState({
        permissionsGranted: true,
      });
    }
  });
} catch (err) {
  console.warn(err);
  }
}

 getLocation() {
Geolocation.getCurrentPosition(
  (position) => {
    console.log(position);
  },
  (error) => {
    // See error code charts below.
    console.log(error.code, error.message);
  },
  {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000},
  );
}

 componentDidMount() {
if (Platform.OS === 'ios') {
  Geolocation.requestAuthorization('always').then((res) => {
    console.log(res);
  });
}
if (Platform.OS === 'android') {
  this.requestPermission();
} else {
  this.getLocation();
 }
}

make sure you called this function with parameter Geolocation.requestAuthorization('always') or Geolocation.requestAuthorization('whenInUse')

Upvotes: 3

Rahul Mishra
Rahul Mishra

Reputation: 4573

I have used the react-native-geolocation-service for getting user current location here is my code

App.js:

import Geolocation from 'react-native-geolocation-service';

async componentDidMount() {
 if(Platform.OS === 'ios'){
      this.getCurrentLocation();
    }else{
      try {
       const granted = await PermissionsAndroid.request(
         PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
         {
           title: 'Device current location permission',
           message:
             'Allow app to get your current location',
           buttonNeutral: 'Ask Me Later',
           buttonNegative: 'Cancel',
           buttonPositive: 'OK',
         },
       );
       if (granted === PermissionsAndroid.RESULTS.GRANTED) {
         this.getCurrentLocation();
       } else {
         console.log('Location permission denied');
       }
     } catch (err) {
       console.warn(err);
     }
    }
}

getCurrentLocation(){
    Geolocation.requestAuthorization();
    Geolocation.getCurrentPosition(
       (position) => {
           console.log(position);
       },
       (error) => {
         console.log("map error: ",error);
           console.log(error.code, error.message);
       },
       { enableHighAccuracy: false, timeout: 15000, maximumAge: 10000 }
   );
  }

MapScreen.js

import Geolocation from 'react-native-geolocation-service';

componentDidMount() {
  this.updateCurrentPosiiton();
}

updateCurrentPosiiton () {
    Geolocation.getCurrentPosition(
       (position) => {
          let d_lat  =  position.coords.latitude;
          let d_lng  =  position.coords.longitude;

          this.setState({
            current_lat: position.coords.latitude,
            current_lng: position.coords.longitude
          })
          // console.log('aayaaa');
          this.props.updateGps(d_lat,d_lng);

          this.getTrackData(d_lat,d_lng);

       },
       (error) => {
         console.log("map error: ",error);
           console.log(error.code, error.message);
       },
       { enableHighAccuracy: false, timeout: 15000, maximumAge: 10000 }
   );
  }

Please let me know if any issue.

Upvotes: 5

Related Questions