React-native-camera flash permission view when camera status is ready

Question

I am using react native camera with child functions as shown or the docs (https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md). When I try first try to use the camera it shows the permission view which works as it is. But after the first use every time I want to use the camera, the app flashes quickly the permission view even though the status is 'READY'. I figured it out the issue is that RNCamera brings camera and status information but the status value is updated after the component is mounted.

The value jumps from 'PENDIN AUTHORIZATION' to 'READY' and that's why it flashes the authorization view. Is there any workaround this so that the first time I use the camera works as expected and then in another use the camera doesn't show the authorization view but the camera itself? Thanks in advance

<RNCamera>
  {({ camera, status }) => {
     if (status === 'READY'){
        return ( <View>.....Camera.... </View>
        )
     }
     else if (status !== 'READY'){
        return (<CameraPermission/>)
     }
  }}
</RNCamera>

score 0 · Answer 1 · answered Apr 28 '19 at 05:42

You don't have to handle permission gaining yourself, RNCamera will handle it automatically. Define your camera like this:

'use strict';
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { RNCamera } from 'react-native-camera';

class BadInstagramCloneApp extends Component {
  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}
          androidCameraPermissionOptions={{
            title: 'Permission to use camera',
            message: 'We need your permission to use your camera',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel',
          }}
          androidRecordAudioPermissionOptions={{
            title: 'Permission to use audio recording',
            message: 'We need your permission to use your audio',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel',
          }}
          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>
    );
  }

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20,
  },
});

AppRegistry.registerComponent('BadInstagramCloneApp', () => BadInstagramCloneApp);

Read the docs! I am using RNCamera with function childs because I made my custom camera view inside RNCamera tags as the docs explain. Nevertheless, with the solution you made, which I used first, still flashes the permission view because the component waits for the 'READY' value to continue to the camera itself — Carlos Yanes, Apr 28 '19 at 14:13
Can you only prompt for permissions on Android? I can't find an equivalent iOS function — jtb, Jan 22 '21 at 18:42

React-native-camera flash permission view when camera status is ready

1 Answers1