From c2856eb4880b878f37931c7af27cce2ff504e831 Mon Sep 17 00:00:00 2001 From: wadeking98 Date: Wed, 13 Dec 2023 14:10:16 -0800 Subject: [PATCH] fixed error on api 29 android Signed-off-by: wadeking98 --- packages/legacy/app/package.json | 1 + .../core/App/components/misc/NewQRView.tsx | 16 +++++++++++++++- .../core/App/components/misc/QRScanner.tsx | 19 ++++++++++++++++--- packages/legacy/core/App/constants.ts | 8 ++++++++ packages/legacy/core/package.json | 2 ++ yarn.lock | 10 ++++++++++ 6 files changed, 52 insertions(+), 4 deletions(-) diff --git a/packages/legacy/app/package.json b/packages/legacy/app/package.json index 61c7c1e348..d661457d39 100644 --- a/packages/legacy/app/package.json +++ b/packages/legacy/app/package.json @@ -75,6 +75,7 @@ "react-native-scalable-image": "^1.1.0", "react-native-screens": "^3.24.0", "react-native-splash-screen": "^3.3.0", + "react-native-static-safe-area-insets": "^2.2.0", "react-native-svg": "^12.1.1", "react-native-tcp-socket": "^6.0.6", "react-native-toast-message": "^2.1.6", diff --git a/packages/legacy/core/App/components/misc/NewQRView.tsx b/packages/legacy/core/App/components/misc/NewQRView.tsx index 07ae707425..8f23438a50 100644 --- a/packages/legacy/core/App/components/misc/NewQRView.tsx +++ b/packages/legacy/core/App/components/misc/NewQRView.tsx @@ -7,7 +7,7 @@ import { Vibration, View, StyleSheet, Text, ScrollView, useWindowDimensions } fr import { TouchableOpacity } from 'react-native-gesture-handler' import { SafeAreaView } from 'react-native-safe-area-context' import Icon from 'react-native-vector-icons/MaterialIcons' -import { Camera, Code, useCameraDevice, useCodeScanner } from 'react-native-vision-camera' +import { Camera, Code, useCameraDevice, useCameraFormat, useCodeScanner } from 'react-native-vision-camera' import { useStore } from '../../contexts/store' import { useTheme } from '../../contexts/theme' @@ -21,6 +21,8 @@ import LoadingIndicator from '../animated/LoadingIndicator' import QRRenderer from './QRRenderer' import QRScannerTorch from './QRScannerTorch' import ScanTab from './ScanTab' +import { SCREEN_HEIGHT } from '../../constants' +import { SCREEN_WIDTH } from '../../constants' type ConnectProps = StackScreenProps @@ -45,6 +47,16 @@ const NewQRView: React.FC = ({ defaultToConnect, handleCodeScan, error, e const { ColorPallet, TextTheme, TabTheme } = useTheme() const { agent } = useAgent() const device = useCameraDevice('back') + + const screenAspectRatio = SCREEN_HEIGHT / SCREEN_WIDTH + const format = useCameraFormat(device, [ + { fps: 60 }, + { videoAspectRatio: screenAspectRatio }, + { videoResolution: 'max' }, + { photoAspectRatio: screenAspectRatio }, + { photoResolution: 'max' }, + ]) + const styles = StyleSheet.create({ container: { flex: 1, @@ -170,6 +182,8 @@ const NewQRView: React.FC = ({ defaultToConnect, handleCodeScan, error, e torch={torchActive ? 'on' : 'off'} isActive={cameraActive} codeScanner={codeScanner} + format={format} + orientation='portrait' /> )} diff --git a/packages/legacy/core/App/components/misc/QRScanner.tsx b/packages/legacy/core/App/components/misc/QRScanner.tsx index 05df2c7d7b..77d8ea33d5 100644 --- a/packages/legacy/core/App/components/misc/QRScanner.tsx +++ b/packages/legacy/core/App/components/misc/QRScanner.tsx @@ -1,11 +1,13 @@ import { useNavigation } from '@react-navigation/core' import React, { useCallback, useState } from 'react' import { useTranslation } from 'react-i18next' -import { View, Modal, Vibration, Pressable, StyleSheet, Text } from 'react-native' +import { View, Modal, Vibration, Pressable, StyleSheet, Text, Dimensions, Platform } from 'react-native' import Icon from 'react-native-vector-icons/MaterialCommunityIcons' -import { Camera, Code, useCameraDevice, useCodeScanner } from 'react-native-vision-camera' +import { Camera, Code, useCameraDevice, useCameraFormat, useCodeScanner } from 'react-native-vision-camera' +import StaticSafeAreaInsets from 'react-native-static-safe-area-insets' -import { hitSlop } from '../../constants' + +import { SCREEN_HEIGHT, SCREEN_WIDTH, hitSlop } from '../../constants' import { useConfiguration } from '../../contexts/configuration' import { useTheme } from '../../contexts/theme' import { QrCodeScanError } from '../../types/error' @@ -31,6 +33,15 @@ const QRScanner: React.FC = ({ handleCodeScan, error, enableCameraOnError const invalidQrCodes = new Set() const { ColorPallet, TextTheme } = useTheme() const device = useCameraDevice('back') + + const screenAspectRatio = SCREEN_HEIGHT / SCREEN_WIDTH + const format = useCameraFormat(device, [ + { fps: 60 }, + { videoAspectRatio: screenAspectRatio }, + { videoResolution: 'max' }, + { photoAspectRatio: screenAspectRatio }, + { photoResolution: 'max' }, + ]) const styles = StyleSheet.create({ container: { @@ -123,6 +134,8 @@ const QRScanner: React.FC = ({ handleCodeScan, error, enableCameraOnError torch={torchActive ? 'on' : 'off'} isActive={cameraActive} codeScanner={codeScanner} + format={format} + orientation='portrait' /> )} diff --git a/packages/legacy/core/App/constants.ts b/packages/legacy/core/App/constants.ts index 3b06618b99..e6894cd9cd 100644 --- a/packages/legacy/core/App/constants.ts +++ b/packages/legacy/core/App/constants.ts @@ -1,4 +1,12 @@ +import { Dimensions, Platform } from 'react-native' import { PINValidationRules } from './types/security' +import StaticSafeAreaInsets from 'react-native-static-safe-area-insets' + +export const SCREEN_WIDTH = Dimensions.get('window').width +export const SCREEN_HEIGHT = Platform.select({ + android: Dimensions.get('screen').height - StaticSafeAreaInsets.safeAreaInsetsBottom, + ios: Dimensions.get('window').height, +}) as number const lengthOfHiddenAttributes = 10 const unicodeForBulletCharacter = '\u2022' diff --git a/packages/legacy/core/package.json b/packages/legacy/core/package.json index c4ed495e19..bdc263a8e3 100644 --- a/packages/legacy/core/package.json +++ b/packages/legacy/core/package.json @@ -131,6 +131,7 @@ "react-native-scalable-image": "^1.1.0", "react-native-screens": "^3.24.0", "react-native-splash-screen": "^3.3.0", + "react-native-static-safe-area-insets": "^2.2.0", "react-native-svg": "^12.1.1", "react-native-svg-transformer": "^0.14.3", "react-native-tcp-socket": "^6.0.6", @@ -202,6 +203,7 @@ "react-native-safe-area-context": "^3.2.0", "react-native-screens": "^3.24.0", "react-native-splash-screen": "^3.3.0", + "react-native-static-safe-area-insets": "*", "react-native-svg": "^12.1.1", "react-native-tcp-socket": "^6.0.6", "react-native-toast-message": "^2.1.6", diff --git a/yarn.lock b/yarn.lock index 3ee29a5b26..606a6be89b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4078,6 +4078,7 @@ __metadata: react-native-scalable-image: ^1.1.0 react-native-screens: ^3.24.0 react-native-splash-screen: ^3.3.0 + react-native-static-safe-area-insets: ^2.2.0 react-native-svg: ^12.1.1 react-native-svg-transformer: ^0.14.3 react-native-tcp-socket: ^6.0.6 @@ -4148,6 +4149,7 @@ __metadata: react-native-safe-area-context: ^3.2.0 react-native-screens: ^3.24.0 react-native-splash-screen: ^3.3.0 + react-native-static-safe-area-insets: "*" react-native-svg: ^12.1.1 react-native-tcp-socket: ^6.0.6 react-native-toast-message: ^2.1.6 @@ -7525,6 +7527,7 @@ __metadata: react-native-scalable-image: ^1.1.0 react-native-screens: ^3.24.0 react-native-splash-screen: ^3.3.0 + react-native-static-safe-area-insets: ^2.2.0 react-native-svg: ^12.1.1 react-native-svg-transformer: ^0.14.3 react-native-tcp-socket: ^6.0.6 @@ -18739,6 +18742,13 @@ __metadata: languageName: node linkType: hard +"react-native-static-safe-area-insets@npm:^2.2.0": + version: 2.2.0 + resolution: "react-native-static-safe-area-insets@npm:2.2.0" + checksum: 04ceb3cabfb874dc78276c2c9f5889cf19fdb930cbcc00a8ab2aae1fb7c3eca384a1e9131a23f1bc1de2158bb81940d5175606cd7cab5371aa86049d52c82a14 + languageName: node + linkType: hard + "react-native-svg-transformer@npm:^0.14.3": version: 0.14.3 resolution: "react-native-svg-transformer@npm:0.14.3"