ADD: Camera Permission authorization view

loc/en.json

@@ -188,6 +188,7 @@
     "input_total": "Total:",
     "permission_camera_message": "We need your permission to use your camera",
     "permission_camera_title": "Permission to use camera",
+    "open_settings": "Open Settings",
     "permission_storage_later": "Ask Me Later",
     "permission_storage_message": "BlueWallet needs your permission to access your storage to save this transaction.",
     "permission_storage_title": "BlueWallet Storage Access Permission",

screen/send/ScanQRCode.js

@@ -1,14 +1,14 @@
 /* global alert */
 import React, { useState } from 'react';
-import { Image, View, TouchableOpacity, StatusBar, Platform, StyleSheet } from 'react-native';
+import { Image, View, TouchableOpacity, StatusBar, Platform, StyleSheet, Linking } from 'react-native';
 import { RNCamera } from 'react-native-camera';
 import { Icon } from 'react-native-elements';
 import ImagePicker from 'react-native-image-picker';
-import { useNavigation, useRoute, useIsFocused } from '@react-navigation/native';
+import { useNavigation, useRoute, useIsFocused, useTheme } from '@react-navigation/native';
 import DocumentPicker from 'react-native-document-picker';
 import RNFS from 'react-native-fs';
 import loc from '../../loc';
-import { BlueLoadingHook } from '../../BlueComponents';
+import { BlueLoadingHook, BlueTextHooks, BlueButtonHook, BlueSpacing40 } from '../../BlueComponents';
 const LocalQRCode = require('@remobile/react-native-qrcode-local-image');
 const createHash = require('create-hash');
 
@@ -53,6 +53,12 @@ const styles = StyleSheet.create({
     left: 96,
     bottom: 48,
   },
+  openSettingsContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center',
+  },
 });
 
 const ScanQRCode = () => {
@@ -62,8 +68,14 @@ const ScanQRCode = () => {
   const showFileImportButton = route.params.showFileImportButton || false;
   const { launchedBy, onBarScanned } = route.params;
   const scannedCache = {};
+  const { colors } = useTheme();
   const isFocused = useIsFocused();
-
+  const [cameraStatus, setCameraStatus] = useState(RNCamera.Constants.CameraStatus.PENDING_AUTHORIZATION);
+  const stylesHook = StyleSheet.create({
+    openSettingsContainer: {
+      backgroundColor: colors.brandingColor,
+    },
+  });
   const HashIt = function (s) {
     return createHash('sha256').update(s).digest().toString('hex');
   };
@@ -153,6 +165,14 @@ const ScanQRCode = () => {
     }
   };
 
+  const handleCameraStatusChange = event => {
+    setCameraStatus(event.cameraStatus);
+  };
+
+  const handleOpenSettingsTapped = () => {
+    Linking.openSettings();
+  };
+
   return isLoading ? (
     <View style={styles.root}>
       <BlueLoadingHook />
@@ -160,7 +180,7 @@ const ScanQRCode = () => {
   ) : (
     <View style={styles.root}>
       <StatusBar hidden />
-      {isFocused && (
+      {isFocused && cameraStatus !== RNCamera.Constants.CameraStatus.NOT_AUTHORIZED && (
         <RNCamera
           captureAudio={false}
           androidCameraPermissionOptions={{
@@ -172,8 +192,16 @@ const ScanQRCode = () => {
           style={styles.rnCamera}
           onBarCodeRead={onBarCodeRead}
           barCodeTypes={[RNCamera.Constants.BarCodeType.qr]}
+          onStatusChange={handleCameraStatusChange}
         />
       )}
+      {cameraStatus === RNCamera.Constants.CameraStatus.NOT_AUTHORIZED && (
+        <View style={[styles.openSettingsContainer, stylesHook.openSettingsContainer]}>
+          <BlueTextHooks>{loc.send.permission_camera_message}</BlueTextHooks>
+          <BlueSpacing40 />
+          <BlueButtonHook title={loc.send.open_settings} onPress={handleOpenSettingsTapped} />
+        </View>
+      )}
       <TouchableOpacity style={styles.closeTouch} onPress={dismiss}>
         <Image style={styles.closeImage} source={require('../../img/close-white.png')} />
       </TouchableOpacity>