From 7c39b067897e9032bc99da038dc5808e5ea7c42b Mon Sep 17 00:00:00 2001
From: Developer <info@procivis.ch>
Date: Wed, 21 Aug 2024 15:31:59 +0200
Subject: [PATCH] Added footer param to qr code scanner screen

---
 package.json                                  |  2 +-
 src/camera/qr-code-scanner.tsx                |  2 +-
 .../card/credential-details-card.tsx          |  2 +-
 src/credential/card/credential-header.tsx     |  4 +--
 src/entity/avatar.tsx                         |  2 +-
 src/screens/qr-code-scanner-screen.tsx        | 27 ++++++++++++++++---
 6 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 1289bc5..9476e09 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@procivis/one-react-native-components",
-  "version": "0.1.30",
+  "version": "0.1.31",
   "description": "Common Procivis ONE UI components for react-native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
diff --git a/src/camera/qr-code-scanner.tsx b/src/camera/qr-code-scanner.tsx
index e27d4b9..a442b7b 100644
--- a/src/camera/qr-code-scanner.tsx
+++ b/src/camera/qr-code-scanner.tsx
@@ -31,7 +31,7 @@ const QRCodeScanner: FunctionComponent<QRCodeScannerProps> = ({
     }
     if (React.isValidElement(cameraOverlay)) {
       return cameraOverlay;
-    } else if (cameraOverlay) {
+    } else {
       const CameraOverlayComponent = cameraOverlay as React.ComponentType<any>;
       return <CameraOverlayComponent />;
     }
diff --git a/src/credential/card/credential-details-card.tsx b/src/credential/card/credential-details-card.tsx
index 2c0cfe0..3eb0de5 100644
--- a/src/credential/card/credential-details-card.tsx
+++ b/src/credential/card/credential-details-card.tsx
@@ -137,7 +137,7 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
     }
     if (React.isValidElement(footer)) {
       return footer;
-    } else if (footer) {
+    } else {
       const FooterComponent = footer as React.ComponentType<any>;
       return <FooterComponent />;
     }
diff --git a/src/credential/card/credential-header.tsx b/src/credential/card/credential-header.tsx
index febafc6..b4b0e31 100644
--- a/src/credential/card/credential-header.tsx
+++ b/src/credential/card/credential-header.tsx
@@ -46,7 +46,7 @@ const CredentialHeader: FC<CredentialHeaderProps> = ({
     }
     if (React.isValidElement(statusIcon)) {
       return statusIcon;
-    } else if (statusIcon) {
+    } else {
       const StatusIconComponent = statusIcon as React.ComponentType<any>;
       return <StatusIconComponent />;
     }
@@ -58,7 +58,7 @@ const CredentialHeader: FC<CredentialHeaderProps> = ({
     }
     if (React.isValidElement(accessory)) {
       return accessory;
-    } else if (accessory) {
+    } else {
       const AccessoryComponent = accessory as React.ComponentType<any>;
       return <AccessoryComponent />;
     }
diff --git a/src/entity/avatar.tsx b/src/entity/avatar.tsx
index 602410a..db94a31 100644
--- a/src/entity/avatar.tsx
+++ b/src/entity/avatar.tsx
@@ -21,7 +21,7 @@ const Avatar: FunctionComponent<AvatarProps> = ({ avatar, placeholderText, statu
     }
     if (React.isValidElement(statusIcon)) {
       return statusIcon;
-    } else if (statusIcon) {
+    } else {
       const StatusIconComponent = statusIcon as React.ComponentType<any>;
       return <StatusIconComponent />;
     }
diff --git a/src/screens/qr-code-scanner-screen.tsx b/src/screens/qr-code-scanner-screen.tsx
index 400b735..4139f9f 100644
--- a/src/screens/qr-code-scanner-screen.tsx
+++ b/src/screens/qr-code-scanner-screen.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, memo, ReactElement } from 'react';
+import React, { FunctionComponent, memo, ReactElement, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useCameraDevice } from 'react-native-vision-camera';
@@ -15,6 +15,7 @@ import { colorWithAlphaComponent } from '../utils/color';
 
 export interface QRCodeScannerScreenProps {
   codeTypes?: QRCodeScannerProps['codeTypes'];
+  footer?: React.ComponentType<any> | React.ReactElement;
   onQRCodeRead: QRCodeScannerProps['onQRCodeRead'];
   onClose: () => void;
   noCameraView?: JSX.Element;
@@ -23,6 +24,7 @@ export interface QRCodeScannerScreenProps {
 
 const QRCodeScannerScreen: FunctionComponent<QRCodeScannerScreenProps> = ({
   codeTypes,
+  footer,
   onQRCodeRead,
   noCameraView = null,
   onClose,
@@ -32,6 +34,18 @@ const QRCodeScannerScreen: FunctionComponent<QRCodeScannerScreenProps> = ({
   const insets = useSafeAreaInsets();
   const colorScheme = useAppColorScheme();
 
+  const footerView: React.ReactElement | undefined = useMemo(() => {
+    if (!footer) {
+      return undefined;
+    }
+    if (React.isValidElement(footer)) {
+      return footer;
+    } else {
+      const FooterComponent = footer as React.ComponentType<any>;
+      return <FooterComponent />;
+    }
+  }, [footer]);
+
   const device = useCameraDevice('back');
   if (!device) {
     return noCameraView;
@@ -56,10 +70,17 @@ const QRCodeScannerScreen: FunctionComponent<QRCodeScannerScreenProps> = ({
       <BlurView
         darkMode={true}
         blurStyle="soft"
-        style={[styles.bottomBlurView, { backgroundColor: colorWithAlphaComponent(colorScheme.black, 0.5) }]}>
+        style={[
+          styles.bottomBlurView,
+          {
+            backgroundColor: colorWithAlphaComponent(colorScheme.black, 0.5),
+            paddingBottom: Math.max(insets.bottom, 32),
+          },
+        ]}>
         <Typography align="center" style={styles.title} color={colorScheme.white}>
           {title}
         </Typography>
+        {footerView}
       </BlurView>
     </View>
   );
@@ -67,7 +88,7 @@ const QRCodeScannerScreen: FunctionComponent<QRCodeScannerScreenProps> = ({
 const styles = StyleSheet.create({
   bottomBlurView: {
     bottom: 0,
-    height: '15%',
+    minHeight: '15%',
     position: 'absolute',
     width: '100%',
   },