ONE-3155: remove camera permission request from camera screens

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procivis/one-react-native-components",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "description": "Common Procivis ONE UI components for react-native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/camera/qr-code-scanner.tsx

@@ -1,36 +1,23 @@
 import React, { FunctionComponent, useMemo } from 'react';
 import { StyleSheet, View, ViewProps } from 'react-native';
-import {
-  Camera,
-  Code,
-  CodeType,
-  useCameraDevice,
-  useCameraPermission,
-  useCodeScanner,
-} from 'react-native-vision-camera';
+import { Camera, Code, CodeType, useCameraDevice, useCodeScanner } from 'react-native-vision-camera';
 
 import CameraOverlay from './camera-overlay';
 
 export type QRCodeScannerProps = ViewProps & {
   cameraOverlay?: React.ComponentType<any> | React.ReactElement;
   codeTypes?: CodeType[];
-  notAuthorizedView?: JSX.Element;
+  noCameraView?: JSX.Element;
   onQRCodeRead: (code: Code[]) => void;
 };
 
 const QRCodeScanner: FunctionComponent<QRCodeScannerProps> = ({
   cameraOverlay,
   codeTypes = ['qr'],
   onQRCodeRead,
-  notAuthorizedView,
+  noCameraView = null,
   ...viewProps
 }) => {
-  const { hasPermission, requestPermission } = useCameraPermission();
-
-  if (!hasPermission) {
-    requestPermission();
-  }
-
   const qrCodeScanner = useCodeScanner({
     codeTypes,
     onCodeScanned: onQRCodeRead,
@@ -50,8 +37,8 @@ const QRCodeScanner: FunctionComponent<QRCodeScannerProps> = ({
     }
   }, [cameraOverlay]);
 
-  if (!hasPermission || !device) {
-    return notAuthorizedView ?? null;
+  if (!device) {
+    return noCameraView;
   }
 
   return (

src/screens/qr-code-scanner-screen.stories.tsx

@@ -1,9 +1,17 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useCameraPermission } from 'react-native-vision-camera';
 
 import QRCodeScannerScreen from './qr-code-scanner-screen';
 
 const Basic: ComponentStory<typeof QRCodeScannerScreen> = (args) => {
+  const { hasPermission, requestPermission } = useCameraPermission();
+  useEffect(() => {
+    if (!hasPermission) {
+      requestPermission();
+    }
+  }, [hasPermission, requestPermission]);
+
   return <QRCodeScannerScreen {...args} />;
 };
 
@@ -24,6 +32,6 @@ export default {
     },
   },
   argTypes: {
-    onBarCodeRead: { action: 'onBarCodeRead' },
+    onQRCodeRead: { action: 'onQRCodeRead' },
   },
 } as ComponentMeta<typeof QRCodeScannerScreen>;

src/screens/qr-code-scanner-screen.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, memo, ReactElement } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useCameraDevice, useCameraPermission } from 'react-native-vision-camera';
+import { useCameraDevice } from 'react-native-vision-camera';
 
 import { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';
 import BlurView from '../blur/blur-view';
@@ -17,31 +17,24 @@ export interface QRCodeScannerScreenProps {
   codeTypes?: QRCodeScannerProps['codeTypes'];
   onQRCodeRead: QRCodeScannerProps['onQRCodeRead'];
   onClose: () => void;
-  notAuthorizedView?: JSX.Element;
+  noCameraView?: JSX.Element;
   title: ReactElement | string;
 }
 
 const QRCodeScannerScreen: FunctionComponent<QRCodeScannerScreenProps> = ({
   codeTypes,
   onQRCodeRead,
-  notAuthorizedView,
+  noCameraView = null,
   onClose,
   title,
 }) => {
   const t = useAccessibilityTranslation();
   const insets = useSafeAreaInsets();
   const colorScheme = useAppColorScheme();
 
-  const { hasPermission, requestPermission } = useCameraPermission();
-
-  if (!hasPermission) {
-    requestPermission();
-  }
-
   const device = useCameraDevice('back');
-
-  if (!hasPermission || !device) {
-    return notAuthorizedView ?? null;
+  if (!device) {
+    return noCameraView;
   }
 
   return (