When you first launch the app and go to the camera, a Permission modal pops up on Android or iOS with the options of allowing or not allowing access.
The react-native-camera package is used in this scenario. It includes a property called notAuthorizedView where you can customize the view that appears when access to the camera is denied. The goal here is to enable the camera or grant access within the notAuthorizedView.
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})
}
};
}