How to grant access to react-native-camera after don't allow is pressed first?

Question

At first, when you run the app for the first time and go to the camera it launches the Permission modal on android or ios with the don't allow and allow options.

The package used is react-native-camera. It has a property called notAuthorizedView that you can return any view you want. What I want to do is to enable the camera or grant access to it in the notAuthorizedView which appears when not allowing the camera.

export default class MyCamera extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            uri:''
        };
    }

      render() {
        return (
          <View style={styles.container}>
        <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          style={styles.preview}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.on}
          notAuthorizedView={
            <View>
              <Text>YOU ARE NOT AUTHORIZED TO USE THE CAMERA</Text>
              <Button onPress={()=>{Alert.alert('SET CAMERA STATUS TO READY')}}/>
            </View>
          }
          permissionDialogTitle={'Permission to use camera'}
          permissionDialogMessage={'We need your permission to use your camera phone'}
          onGoogleVisionBarcodesDetected={({ barcodes }) => {
            console.log(barcodes);
          }}
        />
        <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
          <TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}>
            <Text style={{ fontSize: 14 }}> SNAP </Text>
          </TouchableOpacity>
        </View>
      </View>
        );
      }


     goToConcern = () => {
        this.props.navigation.navigate('Concern', {uriPhoto: this.state.uri})
     };

     

  takePicture = async function() {
    if (this.camera) {
      const options = { quality: 0.5, base64: true };
      const data = await this.camera.takePictureAsync(options)
      console.log(data.uri);
      console.log(data);
      this.setState({uri:data.uri})
    }
  };
}

score 4 · Accepted Answer · answered Jan 16 '19 at 20:25

4

Short answer you can't, what must apps does is invite user to change the setting and provide a button that redirect to app settings.

You can do that like this :

Linking.openURL('app-settings:')

answered Jan 16 '19 at 20:25

Mosbah

1,347
1
14
28

Yes. Imagine I have the app settings, so within those settings, how do I allow access camera access using react-native-camera? – Carlos Yanes Jan 16 '19 at 20:41
I was referring to iOS system settings and not in your app. – Mosbah Jan 16 '19 at 20:42
Yes I did it correctly and it worked great! Thanks for the help – Carlos Yanes Jan 16 '19 at 22:25
I am getting this error on using above code:- Possible Unhandled Promise Rejection (id: 0): Error: Could not open URL 'app-settings:' – Nainal Apr 03 '19 at 08:11
2

I used `Linking.openSettings()` instead. https://reactnative.dev/docs/linking#opensettings – Jonathan Morales Vélez Oct 18 '20 at 08:51

score 1 · Answer 2 · edited Jul 04 '20 at 11:29

Since there is already a reference set to the RNCamera component, you will only need to call a method from the RNCamera component instance. The method is called refreshAuthorizationStatus() which returns a Promise, and just call this function when you grant the camera permission from within the notAuthorizedView. Hope this helps.

render() {
    return (
       ...
       <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          ...
          notAuthButtonorizedView={
            <View>
              <Text>YOU ARE NOT AUTHORIZED TO USE THE CAMERA</Text>
              < onPress={async ()=>{
                 await ask_for_permission();
                 await this.camera.refreshAuthorizationStatus() <-- something like this
              }}/>
            </View>
          }
          ...
        />
        ...
    );
}

score 0 · Answer 3 · answered Jan 16 '19 at 20:35

there is a workaround for android, you use this api , and in your notAuthorizedView button onPress, you check if the camera is authorized, if not, you manually request it. However, you need to add a method to prevent the user from spamming the button, becaus it will show a "don't ask again" option, if the user presses that you will need to redirect them to the settings and show a androis toast giving them the options to enable the camera ;)

How to grant access to react-native-camera after don't allow is pressed first?

3 Answers3