Merge branch 'feature/ONE-2932-qr-code-scanner-footer' into 'main'

[ONE-2932] Added footer param to qr code scanner screen

See merge request procivis/one/one-react-native-components!132

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",

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 />;
     }

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 />;
     }

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 />;
     }

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 />;
     }

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,18 +70,25 @@ 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>
   );
 };
 const styles = StyleSheet.create({
   bottomBlurView: {
     bottom: 0,
-    height: '15%',
+    minHeight: '15%',
     position: 'absolute',
     width: '100%',
   },