Develop Reference

react-native-image-picker launchCamera in not working in android

I'm using "react-native-image-picker": "^3.0.1" in react native for capture image. but I got error while opening the camera in android 9.
I got error :
{"errorCode": "others", "errorMessage": "This library does not require Manifest.permission.CAMERA, if you add this permission in manifest then you have to obtain the same."}
here is my code
ImagePicker.launchCamera(
{
includeBase64: false,
mediaType: 'photo',
quality: 0.8,
},
async (response) => {
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else {
}
},
);

Before capturing image, ask camera permission to user. In Android above marshmallow version you should ask Run Time permission as well which are called dangerous permission.
const requestCameraPermission = async () => {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
title: "App Camera Permission",
message:"App needs access to your camera ",
buttonNeutral: "Ask Me Later",
buttonNegative: "Cancel",
buttonPositive: "OK"
}
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log("Camera permission given");
} else {
console.log("Camera permission denied");
}
} catch (err) {
console.warn(err);
}
};
And then if permission granted then inside if call
ImagePicker.launchCamera

We need to add run time permissions for the react-native-image-picker . We also need to add seperate permission request for camera and external storage as.please check out below code worked for me .
const grantedcamera = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
title: "App Camera Permission",
message:"App needs access to your camera ",
buttonNeutral: "Ask Me Later",
buttonNegative: "Cancel",
buttonPositive: "OK"
}
);
const grantedstorage = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
{
title: "App Camera Permission",
message:"App needs access to your camera ",
buttonNeutral: "Ask Me Later",
buttonNegative: "Cancel",
buttonPositive: "OK"
}
);
if (grantedcamera === PermissionsAndroid.RESULTS.GRANTED && grantedstorage === PermissionsAndroid.RESULTS.GRANTED) {
console.log("Camera & storage permission given");
var options = {
mediaType: 'photo', //to allow only photo to select ...no video
saveToPhotos:true, //to store captured photo via camera to photos or else it will be stored in temp folders and will get deleted on temp clear
includeBase64:false,
};
launchCamera (options, (res) => {
console.log('Response = ', res);
if (res.didCancel) {
console.log('User cancelled image picker');
} else if (res.error) {
console.log('ImagePicker Error: ', res.error);
} else if (res.customButton) {
console.log('User tapped custom button: ', res.customButton);
alert(res.customButton);
} else {
// let source = res;
// var resourcePath1 = source.assets[0].uri;
const source = { uri: res.uri };
console.log('response', JSON.stringify(res));
setImageSource(source.uri);
}
});
} else {
console.log("Camera permission denied");
}

this helps me
add option to android\app\src\main\AndroidManifest.xml -> section application
-> param android:requestLegacyExternalStorage="true"
android\app\src\main\AndroidManifest.xml
...
<application
...
android:requestLegacyExternalStorage="true"
...>

Permission always returns never_ask_again

Steps to replicate:
react-native init project
<add code below to the project(App.js component)>
react-native run-android
I called the function in onPress of a text component.
The permission request always returns never_ask_again even for the fresh app run.
async requestPermissions() {
// android 6.0 +
if (Platform.OS === 'android' && Platform.Version >= 23) {
try {
const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION, {
'title': 'Let the access location',
'message': 'locate you.'
});
console.log('granted: ', granted);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
Alert.alert("Granted access", [{ text: "ok" }])
} else {
Alert.alert(
"can't access to GPS title",
"returned " + granted,
[
{ text: "ok" }
]
);
}
} catch (err) {
}
}
}
Even when the permissions is enabled from settings, still the never_ask_again is returned.
React Native Version: 0.55.2
React Version: 16.3.1
in app/build.gradle
targetSdkVersion 23
Thanks

One thing I missed was to add <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission> in AppManifest.xml

react-native on android crash when requesting camera permissions

my phone (android 8.1.0) keeps crashing when i request the permission to use the camera in react native. I use android:targetSdkVersion="25" in my Android Manifest.
componentDidMount(){
(async () => {
await this.requestCameraPermission();
})();}
async requestCameraPermission() {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
'title': 'Cool Photo App Camera Permission',
'message': 'Cool Photo App needs access to your camera ' +
'so you can take awesome pictures.'
}
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log("You can use the camera")
} else {
console.log("Camera permission denied")
}
} catch (err) {
console.warn(err)
}
}

How do I request permission for Android Device Location in React Native at run-time?

I have been trying to use React Native 's GeoLocalisation for an Android App. The poorly documentated module is found here https://facebook.github.io/react-native/docs/geolocation.html.
According to the documentation, you handle location permissions on Android using the following code in the AndroidManifest.xml file
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
However, my online research suggests that the above line of code is useless for versions of ANDROID >= 6.0
As my implementation of GeoLocation is not currently working, I have no other reason but to believe that location permissions are not correctly handled.
How do I successfully request location permission at run-time for React Native Android App?

I solved it by changing the targetSdkVersion ( same to compileSdkVersion, in my case 23) in android/app/build.gradle.
Edit AndroidManifest.xml located in android/src/main and add the
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
next :
import { PermissionsAndroid } from 'react-native';
and then add this method:
export async function requestLocationPermission()
{
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
{
'title': 'Example App',
'message': 'Example App access to your location '
}
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log("You can use the location")
alert("You can use the location");
} else {
console.log("location permission denied")
alert("Location permission denied");
}
} catch (err) {
console.warn(err)
}
}
and access the method when you request the location at run-time
async componentWillMount() {
await requestLocationPermission()
}

This did not work for me
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
}
I referred to https://facebook.github.io/react-native/docs/permissionsandroid.html#request
and check() return a boolean
const granted = await PermissionsAndroid.check( PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION );
if (granted) {
console.log( "You can use the ACCESS_FINE_LOCATION" )
}
else {
console.log( "ACCESS_FINE_LOCATION permission denied" )
}

You could use the react native PermissionsAndroid to request the permission: https://facebook.github.io/react-native/docs/permissionsandroid.html#request
Or, an easier option will be using a library that does it for you, such as https://github.com/yonahforst/react-native-permissions

I've noticed two things:
You have to change compileSdkVersion 23 in build.gradle file
You have to add your View's click listener to display to Permission dialog.
Sample code:
import React, { Component } from 'react';
import { Text, PermissionsAndroid, Alert } from 'react-native';
export default class RuntimePermissionSample extends React.Component {
constructor(props) {
super(props);
}
async requestLocationPermission() {
const chckLocationPermission = PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION);
if (chckLocationPermission === PermissionsAndroid.RESULTS.GRANTED) {
alert("You've access for the location");
} else {
try {
const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
{
'title': 'Cool Location App required Location permission',
'message': 'We required Location permission in order to get device location ' +
'Please grant us.'
}
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
alert("You've access for the location");
} else {
alert("You don't have access for the location");
}
} catch (err) {
alert(err)
}
}
};
render() {
return (
<Text
onPress={() => this.requestLocationPermission()}>
Request Location Permission
</Text>
)
}
}
Hope this would help you.

You can ask location permission using following code
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
alert("You can use the location")
} else {
alert("Location permission denied")
}
} catch (err) {
console.warn(err)
}
alert('hi');

in Manifest
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.CAMERA"/>
more details
import {PermissionsAndroid} from 'react-native';
async function requestCameraPermission() {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
title: 'Cool Photo App Camera Permission',
message:
'Cool Photo App needs access to your camera ' +
'so you can take awesome pictures.',
buttonNeutral: 'Ask Me Later',
buttonNegative: 'Cancel',
buttonPositive: 'OK',
},
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log('You can use the camera');
} else {
console.log('Camera permission denied');
}
} catch (err) {
console.warn(err);
}
}
export default class AlertDetails extends Component{
async componentDidMount() {
await request_storage_runtime_permission()
}
}

React Native - Dangerous permissions auto granted without pop-up

I am new to react-native and trying out permission model. I added following entry in AndroidManifes
<uses-permission android:name="android.permission.READ_CONTACTS" />
Added following function
async requestCameraPermission() {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
{
'title': 'Cool Photo App Camera Permission',
'message': 'Cool Photo App needs access to your camera ' +
'so you can take awesome pictures.'
}
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log("You can use the camera")
} else {
console.log("Camera permission denied")
}
} catch (err) {
console.warn(err)
}
}
And registered it in constructor as follows
this.requestCameraPermission = this.requestCameraPermission.bind(this);
And called it as
componentDidMount() {
this.requestCameraPermission();
}
I am getting permission auto granted without any pop-up to user. Please let me know if I am doing anything wrong or expecting wrong.