fixed error on api 29 android

Signed-off-by: wadeking98 <[email protected]>
openwallet-foundation · Dec 13, 2023 · c2856eb · c2856eb
1 parent 37796e4
commit c2856eb
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 4 deletions.
diff --git 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
@@ -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<ConnectStackParams>
 
@@ -45,6 +47,16 @@ const NewQRView: React.FC<Props> = ({ 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<Props> = ({ defaultToConnect, handleCodeScan, error, e
               torch={torchActive ? 'on' : 'off'}
               isActive={cameraActive}
               codeScanner={codeScanner}
+              format={format}
+              orientation='portrait'
             />
           )}
           <View style={styles.cameraViewContainer}>

diff --git 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<Props> = ({ handleCodeScan, error, enableCameraOnError
   const invalidQrCodes = new Set<string>()
   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<Props> = ({ handleCodeScan, error, enableCameraOnError
           torch={torchActive ? 'on' : 'off'}
           isActive={cameraActive}
           codeScanner={codeScanner}
+          format={format}
+          orientation='portrait'
         />
       )}
       <View style={{ flex: 1 }}>

diff --git 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<number>({
+  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
@@ -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
@@ -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"