Reputation: 4573
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
Upvotes: 10
Views: 18068
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
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