Add camera permission handling and PIN

functionality

apps/mobile/app/index.tsx

@@ -2,10 +2,11 @@
 // import { HomeIcon, HomeScreen } from '@acme/feature-home';
 import { BarCodeScanner } from 'expo-barcode-scanner';
 import { useEffect, useState } from 'react';
-import { StyleSheet, View, Text, Image, Button } from 'react-native';
+import { StyleSheet, View, Text, Image, Button, Linking, Alert } from 'react-native';
 export default function App() {
   const [hasPermission, setHasPermission] = useState(null);
   const [scanned, setScanned] = useState(false);
+  const [message, setMessage] = useState('No PIN entered.');
 
   useEffect(() => {
     const getBarCodeScannerPermissions = async () => {
@@ -16,18 +17,53 @@ export default function App() {
     getBarCodeScannerPermissions();
   }, []);
 
-  const handleBarCodeScanned = ({ type, data }) => {
-    setScanned(true);
-    alert(`Bar code with type ${type} and data ${data} has been scanned!`);
-  };
-
   if (hasPermission === null) {
-    return <Text>Requesting for camera permission</Text>;
+    return (
+      <>
+        <View style={styles.container}>
+          <Text>Requesting for camera permission</Text>
+          <Button
+            title={'Enter Override PIN'}
+            onPress={() => {
+              Alert.alert('Not implemented.', "This feature hasn't been implemented yet.");
+            }}
+          />
+
+          <Text>{message}</Text>
+        </View>
+      </>
+    );
   }
   if (hasPermission === false) {
-    return <Text>No access to camera</Text>;
+    return (
+      <>
+        <View style={styles.container}>
+          <Text>No access to camera</Text>
+          <Button
+            title={'Open Settings'}
+            onPress={() => {
+              // Launch settings for the app
+              Linking.openSettings();
+            }}
+          />
+          <Button title={'Try Again'} onPress={() => setHasPermission(null)} />
+          <Button
+            title={'Enter Override PIN'}
+            onPress={() => {
+              Alert.alert('Not implemented.', "This feature hasn't been implemented yet.");
+            }}
+          />
+          <Text>{message}</Text>
+        </View>
+      </>
+    );
   }
 
+  const handleBarCodeScanned = ({ type, data }) => {
+    setScanned(true);
+    alert(`Bar code with type ${type} and data ${data} has been scanned!`);
+  };
+
   return (
     <View style={styles.container}>
       <Text>Attendance!</Text>
@@ -46,6 +82,8 @@ export default function App() {
         onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
         style={StyleSheet.absoluteFillObject}
       />
+      <Text>Has permission: {hasPermission.toString()}</Text>
+
       {scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />}
     </View>
   );

apps/mobile/package.json

@@ -31,6 +31,7 @@
     "react-dom": "18.2.0",
     "react-native": "0.72.4",
     "react-native-gesture-handler": "~2.12.0",
+    "react-native-prompt": "^1.0.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
     "react-native-svg": "^14.0.0",