Add Notification when Permission does not grant

app/scan-qr.tsx

@@ -13,14 +13,22 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 //
-import { View, StyleSheet, Dimensions, TouchableOpacity } from "react-native";
+import {
+  View,
+  StyleSheet,
+  Dimensions,
+  Alert,
+  TouchableOpacity,
+} from "react-native";
 import { useNavigation, useRouter } from "expo-router";
 import { useEffect, useState } from "react";
 import { useError } from "@/hooks/useError";
-import { ThemedText } from "@/components/ThemedText";
 import type { BarcodeScanningResult } from "expo-camera";
-import { Camera, CameraView } from "expo-camera";
+import { CameraView, Camera } from "expo-camera";
 import { isAccessPromptQR, isDownloadQR } from "@/types/accessPrompt";
+import * as Linking from "expo-linking";
+import { PermissionStatus } from "expo-image-picker";
+import { ThemedText } from "@/components/ThemedText";
 
 const { width } = Dimensions.get("window");
 
@@ -34,19 +42,38 @@ export default function Logout() {
   const { goBack } = useNavigation();
   const { showErrorMsg } = useError();
   const { replace, navigate } = useRouter();
-  const [scanned, setScanned] = useState(false);
+  const [showScanned, setShowScanned] = useState(false);
+  const handleDeniedPermissions = () => {
+    Alert.alert(
+      "Permission Denied",
+      "Camera access is required. Please enable it in your device settings.",
+      [
+        { text: "Cancel", style: "cancel" },
+        {
+          text: "Open Settings",
+          onPress: () => Linking.openSettings(), // This will open the app settings page
+        },
+      ],
+      { cancelable: false }
+    );
+  };
+
   useEffect(() => {
     const getCameraPermissions = async () => {
-      await Camera.requestCameraPermissionsAsync();
+      const { status } = await Camera.requestCameraPermissionsAsync();
+      if (status !== PermissionStatus.GRANTED) {
+        handleDeniedPermissions();
+        return;
+      }
+      setShowScanned(true);
     };
-    getCameraPermissions().catch(() =>
-      // eslint-disable-next-line no-console
-      console.log("Don't have camera permission")
-    );
+    getCameraPermissions().catch(() => {
+      console.log("Don't have camera permission");
+    });
   }, []);
 
   const handleBarCodeScanned = ({ data }: BarcodeScanningResult) => {
-    setScanned(true);
+    setShowScanned(false);
     try {
       const resourceInfo = JSON.parse(data);
       if (isAccessPromptQR(resourceInfo)) {
@@ -95,15 +122,16 @@ export default function Logout() {
         </TouchableOpacity>
       </View>
       <View style={styles.cameraContainer}>
-        <CameraView
-          onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
-          barcodeScannerSettings={{
-            barcodeTypes: ["qr"],
-          }}
-          style={styles.camera}
-        />
+        {showScanned && (
+          <CameraView
+            onBarcodeScanned={handleBarCodeScanned}
+            barcodeScannerSettings={{
+              barcodeTypes: ["qr"],
+            }}
+            style={styles.camera}
+          />
+        )}
       </View>
-
       <View style={styles.footer}>
         <ThemedText style={styles.footerText}>Scan a QR code</ThemedText>
       </View>

components/PopupMenu.tsx

@@ -14,7 +14,7 @@
 // limitations under the License.
 //
 import React, { useRef } from "react";
-import { Dimensions, StyleSheet, TouchableOpacity } from "react-native";
+import { Dimensions, StyleSheet, TouchableOpacity, Alert } from "react-native";
 import * as DocumentPicker from "expo-document-picker";
 import * as ImagePicker from "expo-image-picker";
 import { PermissionStatus } from "expo-image-picker";
@@ -26,6 +26,7 @@ import { faImage } from "@fortawesome/free-solid-svg-icons/faImage";
 import { faFile } from "@fortawesome/free-solid-svg-icons/faFile";
 import { faCamera } from "@fortawesome/free-solid-svg-icons/faCamera";
 import { faQrcode } from "@fortawesome/free-solid-svg-icons/faQrcode";
+import * as Linking from "expo-linking";
 import { ThemedText } from "./ThemedText";
 
 const { width } = Dimensions.get("window");
@@ -80,9 +81,25 @@ const PopupMenu: React.FC<PopupMenuProps> = ({
       break;
   }
 
+  const handleDeniedPermissions = (note: string) => {
+    Alert.alert(
+      "Permission Denied",
+      `${note}. Please enable it in your device settings.`,
+      [
+        { text: "Cancel", style: "cancel" },
+        {
+          text: "Open Settings",
+          onPress: () => Linking.openSettings(), // This will open the app settings page
+        },
+      ],
+      { cancelable: false }
+    );
+  };
+
   const takePicture = async () => {
     const { status } = await ImagePicker.requestCameraPermissionsAsync();
     if (status !== PermissionStatus.GRANTED) {
+      handleDeniedPermissions("Camera access is required to take photos");
       return;
     }
     const result = await ImagePicker.launchCameraAsync({
@@ -111,6 +128,7 @@ const PopupMenu: React.FC<PopupMenuProps> = ({
       const { status } =
         await ImagePicker.requestMediaLibraryPermissionsAsync();
       if (status !== PermissionStatus.GRANTED) {
+        handleDeniedPermissions("Image Library access is required");
         return;
       }
       const result = await ImagePicker.launchImageLibraryAsync();