From dff8911cae1274ed3e1157f522a436b501973323 Mon Sep 17 00:00:00 2001 From: Developer Date: Thu, 22 Aug 2024 15:28:57 +0200 Subject: [PATCH] Fixed QR code scanner screen layout --- package.json | 2 +- src/camera/camera-overlay.tsx | 10 +++++----- src/screens/qr-code-scanner-screen.tsx | 18 ++++++++++++++---- 3 files changed, 20 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 9476e09..64c58ca 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@procivis/one-react-native-components", - "version": "0.1.31", + "version": "0.1.32", "description": "Common Procivis ONE UI components for react-native", "main": "lib/commonjs/index", "module": "lib/module/index", diff --git a/src/camera/camera-overlay.tsx b/src/camera/camera-overlay.tsx index ebde79c..ebaad5f 100644 --- a/src/camera/camera-overlay.tsx +++ b/src/camera/camera-overlay.tsx @@ -1,19 +1,19 @@ import React, { FunctionComponent } from 'react'; -import { Dimensions, StyleSheet, View } from 'react-native'; +import { Dimensions, StyleSheet, View, ViewProps } from 'react-native'; import Svg, { Path } from 'react-native-svg'; -export interface CameraMaskProps { +export type CameraMaskProps = ViewProps & { scannerSize?: number; -} +}; -const CameraOverlay: FunctionComponent = ({ scannerSize }) => { +const CameraOverlay: FunctionComponent = ({ scannerSize, style, ...viewProps }) => { const windowWidth = Dimensions.get('window').width; scannerSize = scannerSize ?? windowWidth * 0.6; const transformSize = scannerSize / 2; return ( - + | React.ReactElement; onQRCodeRead: QRCodeScannerProps['onQRCodeRead']; onClose: () => void; + overlayStyle?: StyleProp; noCameraView?: JSX.Element; title: ReactElement | string; } @@ -26,8 +28,9 @@ const QRCodeScannerScreen: FunctionComponent = ({ codeTypes, footer, onQRCodeRead, - noCameraView = null, onClose, + overlayStyle, + noCameraView = null, title, }) => { const t = useAccessibilityTranslation(); @@ -46,6 +49,8 @@ const QRCodeScannerScreen: FunctionComponent = ({ } }, [footer]); + const minBottomBlurViewHeight = Dimensions.get('window').height * 0.15; + const device = useCameraDevice('back'); if (!device) { return noCameraView; @@ -53,7 +58,12 @@ const QRCodeScannerScreen: FunctionComponent = ({ return ( - + } + codeTypes={codeTypes} + onQRCodeRead={onQRCodeRead} + style={StyleSheet.absoluteFill} + /> = ({ styles.bottomBlurView, { backgroundColor: colorWithAlphaComponent(colorScheme.black, 0.5), + minHeight: minBottomBlurViewHeight, paddingBottom: Math.max(insets.bottom, 32), }, ]}> @@ -88,7 +99,6 @@ const QRCodeScannerScreen: FunctionComponent = ({ const styles = StyleSheet.create({ bottomBlurView: { bottom: 0, - minHeight: '15%', position: 'absolute', width: '100%', },