What im trying to do is to ask the user for location permission, and if the user doesn't allow the permission, cannot navigate to other screens.
I have used expo-location for this, and when I test the app locally, it asks me to allow or not allow the permission for the location, but when I generate an APK, to test it on android, it shows me the alert that I dont have the location permission, and when I go to the app setting to allow it manually, it says No permission requested
function requestLocationPermission() {
return Location.requestForegroundPermissionsAsync().then((handleResponse) => {
if (handleResponse.status === 'granted') {
setLocationPermission(handleResponse.status);
} else if (handleResponse.status !== 'granted') {
alert('Map/Gps needs the appropriate permissions.');
return Location.requestForegroundPermissionsAsync();
}
});
}
useEffect(() => {
requestLocationPermission();
buttonText();
}, [locationPermission]);
const confirm = () => {
if (locationPermission === "granted") {
navigation.navigate('CreateProfile',
} else {
requestLocationPermission();
}
};
So, in the APK it returns me: alert('Map/Gps needs the appropriate permissions.');
How can I fix this?
Related
I want to get current location when the user has the "get current location" checkbox checked.
I have a form for user inputs and one of them is a checkbox that gets the users current location when the checkbox is checked and the form is submitted.
My Code:
const getLocation = () => {
console.log("Testing getLocation");
(async () => {
console.log("Ask Location Permission");
let { status } = await Location.requestForegroundPermissionsAsync();
console.log("Permission Asked");
if (status !== "granted") {
setErrorMsg("Location access denied!");
console.log(errorMsg);
return;
}
let currentLocation = await Location.getCurrentPositionAsync({});
setLatitude(currentLocation.coords.latitude);
setLongitude(currentLocation.coords.longitude);
console.log("Start of Print Coords");
console.log(currentLatitude);
console.log(currentLongitude);
console.log("End of Print Coords");
})();
};
const onSubmit = (data: { distance: number; coordinates: string }) => {
if (checkbox) {
console.log("Checkbox Selected");
getLocation();
console.log("getLocation Tested");
coords.push(currentLatitude);
coords.push(currentLongitude);
console.log(coords);
}
When i submit the form, I have multiple console logs to check where my issue is as it never asks to get location permissions. In the getLocation, it exits after printing "Ask Location Permission" and somehow comes back to print "Permission Asked" when the app does not ask for permission for location.console logs
I am using expo location to get current location and i dont use useEffect as i only need the current coordinates once and it does not need to be updated. https://docs.expo.dev/versions/latest/sdk/location/
In your case, async funcation is merely declared in getLocation(). You need to call that function like below.
const getLocation = () => {
console.log("Testing getLocation");
async () => {
console.log("Ask Location Permission");
let { status } = await Location.requestForegroundPermissionsAsync();
if (status !== "granted") {
setErrorMsg("Location access denied!");
console.log(errorMsg);
return;
}
let currentLocation = await Location.getCurrentPositionAsync({});
setLatitude(currentLocation.coords.latitude);
setLongitude(currentLocation.coords.longitude);
console.log(currentLatitude);
console.log(currentLongitude);
}(); // here you need to call it using parenthesis
};
There's a situation when previously the user choose not this app ask permission anymore. Next time the app asks this permission, silently device return status: "denied" without permission popup modal.
Always check whether the app eligible to ask that permission again.
let { status,canAskAgain } = await Location.requestForegroundPermissionsAsync();
console.log("Permission Asked");
if(canAskAgain === false){
// User has previously blocked app to ask this permission
// Force user to grant permission manually
await Linking.openSettings();
}
if (status !== "granted") {
setErrorMsg("Location access denied!");
console.log(errorMsg);
return;
}
im building a music player and I need to acces to the music files, so the first thing is ask for permissions to acces to the files:
componentDidMount() {
this.requestPermission();
}
requestPermission = async () => {
try {
const userResponse = await PermissionsAndroid.requestMultiple([
PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
]);
if (userResponse === PermissionsAndroid.RESULTS.GRANTED) {
alert("nice");
}else {
alert("no nice");
}
}catch (error) {
alert(error)
}
};
even when I already clicked in allow, and reload the project it wil say no nice, i open the config of the app and the permission to storage is fine, so dont why is this happening
According to documentation requestMultiple will return an object with the permissions as keys and strings as values (see result strings above) indicating whether the user allowed or denied the request or does not want to be asked again.
try this
if (userResponse[PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE] === PermissionsAndroid.RESULTS.GRANTED && userResponse[PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE] ===
PermissionsAndroid.RESULTS.GRANTED
) {
alert('nice');
} else {
alert('no nice');
}
After allowing permission to access GPS in react native App. If the user rejected to turn on the gps. It will show errors like
Unhandled promise rejection: Error: Location request failed due to unsatisfied device settings."
I want to avoid if the user rejects the Gps turn on option It will return something. so I need If condition for the location whether it is On or Off. (I'm using expo-location)
You're seeing this error because the Location.getCurrentPositionAsync is async method and it returns a promise and if it fails it throws an error (the error you're seeing).
You could wrap your code inside a try and catch block to catch the error and do something about it.
Example:
_getLocationAsync = async () => {
let { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== 'granted') {
alert('The request was denied');
}else{
try{
let location = await Location.getCurrentPositionAsync({});
// do something with location
}catch(e){
alert('We could not find your position. Please make sure your location service provider is on');
console.log('Error while trying to get location: ', e);
}
}
}
// call this._getLocationAsync();
you will need to check the status from expo-location and redirect user to settings to allow the permission for that you can use android intents for android and for ios you can use Linking to redirect the user to device settings and give permissions
requestLocationPermission = async () => {
const { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status === 'granted) {
navigation.navigate('screen_name');
} else {
// Alert Message if user does not allow permissions
Alert.alert("alert Message", "Instructions based on OS", [
{
text: 'Open Settings',
onPress: () => goToSettings(),
style: 'cancel',
},
{ text: Languages.DENY, onPress: () => navigation.goback()},
]);
}
};
go to settings
goToSettings = () => {
if (Platform.OS == 'ios') {
// Linking for iOS
Linking.openURL('app-settings:');
} else {
// IntentLauncher for Android
IntentLauncher.startActivityAsync(
IntentLauncher.ACTION_MANAGE_ALL_APPLICATIONS_SETTINGS
);
}
};
NOTE Intent launcher is a separate package for android
use this to turn gps on:
Location.enableNetworkProviderAsync()
It's a simple popup. (without redirection to a setting)
In ReactNative app, we are using Storage permission to view/save pictures. So we're getting runtime permission where its required. But the strange thing is, it was asking permission in Splash screen itself, where we didn't ask permission. Then I came across the following fix:
https://facebook.github.io/react-native/docs/removing-default-permissions
Removing Permission using 'remove':
<uses-permission tools:node="remove" android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
But the problem is, If I do like this, I can't get those permissions where its needed.
So ideally, I would like to remove permission dialog in SplashScreen and add only where its required. Please advise.
This answer might seems bit odd to you, but I was in same situation, where I need to use Storage Permission of zip extraction in my current application.
The way I manage things are as follows:
I asked permission in Android Code using React Native Bridging
concept.
I add delay to show permission dialog on next screen (i.e
after splash screen)
When user grant me permission I started extraction and overlay loader to full screen.
When user denied the storage permission I closed the application.
Check the code below
NextScreen After Splash
this.onZipExtracted = this.onZipExtracted.bind(this)
componentDidMount() {
setTimeout(() => {
Splash.hide()
}, Platform.OS == 'ios' ? 1000 : 500);
if (Platform.OS === 'android') {
AsyncStorage.getItem("Extraction",(error,result)=>{
if(result != 'done'){
this.setState({
animating:true
})
setTimeout(() => {
expandPath.callReactMethod(this.onZipExtracted, (error) => {
console.log("Activation Inside Callback"+JSON.stringify(error))
//Do your stuff
})
}, 500)
}
})
}
}
onZipExtracted(success){
console.log("Activation Callback Extract Success -> "+JSON.stringify(success))
this.setState({
set loader flag
})
AsyncStorage.setItem("Extraction","done")
Actions.replace('Screen to replace')
}
Java Code for Permission
I used Dexter Android Permission Library
#ReactMethod
public void callReactMethod(Callback successCallback, Callback errorCallback){
callUserPermission(getCurrentActivity(), successCallback,errorCallback);
}
private void callUserPermission(Activity currentActivity, Callback successCallback, Callback errorCallback) {
Dexter.withActivity(getCurrentActivity())
.withPermissions(
Manifest.permission.READ_EXTERNAL_STORAGE,
Manifest.permission.WRITE_EXTERNAL_STORAGE)
.withListener(new MultiplePermissionsListener() {
#Override
public void onPermissionsChecked(MultiplePermissionsReport report) {
// check if all permissions are granted
if (report.areAllPermissionsGranted()) {
Log.i(TAG, "onPermissionsChecked: -> Granted");
// Do your stuff here
}
} else {
currentActivity.finishAffinity();
System.exit(0);
}
// check for permanent denial of any permission
if (report.isAnyPermissionPermanentlyDenied()) {
// permission is denied permenantly, navigate user to app setting
}
}
#Override
public void onPermissionRationaleShouldBeShown(List<PermissionRequest> permissions,
PermissionToken token) {
token.continuePermissionRequest();
}
})
.onSameThread()
.check();
}
I'd like to request permissions on one page instead of waiting for each particular situation. However, I do not want multiple popups. Is there a way to ask for permissions with a single popup/modal.
On the android side I found this post and this, which look promising, but I have yet to find something for iOS.
In Android
First add permissions in to the AndroidManifest.xml file and then
if (Platform.OS === 'android') {
PermissionsAndroid.requestMultiple(
[PermissionsAndroid.PERMISSIONS.CAMERA,
PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION,
PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE]
).then((result) => {
if (result['android.permission.ACCESS_COARSE_LOCATION']
&& result['android.permission.CAMERA']
&& result['android.permission.READ_CONTACTS']
&& result['android.permission.ACCESS_FINE_LOCATION']
&& result['android.permission.READ_EXTERNAL_STORAGE']
&& result['android.permission.WRITE_EXTERNAL_STORAGE'] === 'granted') {
this.setState({
permissionsGranted: true
});
} else if (result['android.permission.ACCESS_COARSE_LOCATION']
|| result['android.permission.CAMERA']
|| result['android.permission.READ_CONTACTS']
|| result['android.permission.ACCESS_FINE_LOCATION']
|| result['android.permission.READ_EXTERNAL_STORAGE']
|| result['android.permission.WRITE_EXTERNAL_STORAGE'] === 'never_ask_again') {
this.refs.toast.show('Please Go into Settings -> Applications -> APP_NAME -> Permissions and Allow permissions to continue');
}
});
}
In iOS
In the info section of your project on XCode
Add the permissions and the description
say - ex: Privacy - Contacts Usage Description
then,
Permissions.request('photo').then(response => {
if (response === 'authorized') {
iPhotoPermission = true;
}
Permissions.request('contact').then(response => {
if (response === 'authorized') {
iPhotoPermission = true;
}
});
});
Makes sure you also add respective permissions in manifest file as well.
export async function GetAllPermissions() {
try {
if (Platform.OS === "android") {
const userResponse = await PermissionsAndroid.requestMultiple([
PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
PermissionsAndroid.PERMISSIONS.CALL_PHONE
]);
return userResponse;
}
} catch (err) {
Warning(err);
}
return null;
}
To request multiple permissions I will suggest you to use npm module as its saves time and easy to setup and most important you don't have to worry about the platforms :)
Installation
npm install --save react-native-permissions
Usage
import Permissions from 'react-native-permissions'
// Check the status of multiple permissions
_checkCameraAndPhotos = () => {
Permissions.checkMultiple(['camera', 'photo']).then(response => {
//response is an object mapping type to permission
this.setState({
cameraPermission: response.camera,
photoPermission: response.photo,
})
})
}
Don't forget to add permissions to AndroidManifest.xml for android and Info.plist for iOS (Xcode >= 8).
First add your permissions to "android/app/src/main/AndroidManifest.xml" file. You can use npm module in order to achieve your goal.
npm install --save react-native-permissions
After installation, you can use checkMultiple function to ask multiple permissions. Following code illustrates how to ask permission for ANDROID.CAMERA and ANDROID.READ_EXTERNAL_STORAGE :
checkMultiple([
PERMISSIONS.ANDROID.CAMERA,
PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE,
]).then(result => {
console.log(result);
});
The result will be an object like this
{"android.permission.CAMERA": "denied", "android.permission.READ_EXTERNAL_STORAGE": "denied"}
To handle this result, you can use this basic code example
checkPermissions = () => {
if (Platform.OS !== 'android') {
return;
}
checkMultiple([
PERMISSIONS.ANDROID.CAMERA,
PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE,
]).then(result => {
if (
!result ||
!result[PERMISSIONS.ANDROID.CAMERA] ||
!result[PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE]
) {
console.log('could not get any result. Please try later.');
}
if (
result[PERMISSIONS.ANDROID.CAMERA] === RESULTS.GRANTED &&
result[PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE] === RESULTS.GRANTED
) {
console.log('granted for both permissions');
// do smthing here
}
});
};
There is also a way to request multiple permissions at once using react-native-permissions package.
you can also implement your own conditions according to need, i am just writing a simple solution
requestMultiple will not ask again if permissions are already granted.
import { checkMultiple, requestMultiple, PERMISSIONS } from 'react-native-permissions';
const verifyPermissions = async () => {
let perm = [ PERMISSIONS.IOS.CAMERA, PERMISSIONS.IOS.PHOTO_LIBRARY ];
if (Platform.OS == 'android') {
perm = [ PERMISSIONS.ANDROID.CAMERA, PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE ];
}
let permissionStatuses = await requestMultiple(perm);
console.log('obj', permissionStatuses);
console.log('Camera', permissionStatuses[perm[0]]);
console.log('photo', permissionStatuses[[ perm[1] ]]);
const result = permissionStatuses[perm[0]];
if (result !== 'granted') {
Alert.alert('Insufficient permissions!', 'You need to grant camera and library access permissions to use this app.', [
{ text: 'Okay' }
]);
return false;
}
return true;
};