From 61cede3ea26fa4804b53e724c79239cad03a3d24 Mon Sep 17 00:00:00 2001 From: Alexander Ivchenko <47615361+TravellerOnTheRun@users.noreply.github.com> Date: Mon, 15 Apr 2024 16:26:48 +0400 Subject: [PATCH] US-2096 Unable to scan profile QR code (#906) * chore: upgrade react-native-vision-camera to the latest version * fix: AndroidQRScanner --- android/gradle.properties | 2 + package.json | 2 +- src/components/QRCodeScanner/index.tsx | 14 +-- .../walletConnect/AndroidQRScanner.tsx | 93 ------------------- src/screens/walletConnect/ScanQRScreen.tsx | 7 -- yarn.lock | 8 +- 6 files changed, 15 insertions(+), 111 deletions(-) delete mode 100644 src/screens/walletConnect/AndroidQRScanner.tsx diff --git a/android/gradle.properties b/android/gradle.properties index 7ada0c294..ccf08fdf5 100644 --- a/android/gradle.properties +++ b/android/gradle.properties @@ -42,3 +42,5 @@ newArchEnabled=false # Use this property to enable or disable the Hermes JS engine. # If set to false, you will be using JSC instead. hermesEnabled=true + +VisionCamera_enableCodeScanner=true diff --git a/package.json b/package.json index 52adbed63..061420e85 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,7 @@ "react-native-ssl-public-key-pinning": "^1.1.3", "react-native-svg": "^14.1.0", "react-native-vector-icons": "^10.0.3", - "react-native-vision-camera": "^3.9.0", + "react-native-vision-camera": "^3.9.1", "react-redux": "^8.0.5", "readable-stream": "1.0.33", "redux-persist": "^6.0.0", diff --git a/src/components/QRCodeScanner/index.tsx b/src/components/QRCodeScanner/index.tsx index 79e358f06..7de786fc4 100644 --- a/src/components/QRCodeScanner/index.tsx +++ b/src/components/QRCodeScanner/index.tsx @@ -26,6 +26,7 @@ export interface QRCodeScannerProps { } export const QRCodeScanner = ({ onClose, onCodeRead }: QRCodeScannerProps) => { + const [barcode, setBarcode] = useState(null) const codeScanner = useCodeScanner({ codeTypes: ['qr', 'ean-13'], onCodeScanned: codes => { @@ -34,10 +35,9 @@ export const QRCodeScanner = ({ onClose, onCodeRead }: QRCodeScannerProps) => { }, }) const { t } = useTranslation() - const device = useCameraDevice('back') - const [barcode, setBarcode] = useState(null) - const dispatch = useAppDispatch() const isFocused = useIsFocused() + const dispatch = useAppDispatch() + const device = useCameraDevice('back') useCheckCameraPermissions({ t, isFocused }) @@ -63,10 +63,12 @@ export const QRCodeScanner = ({ onClose, onCodeRead }: QRCodeScannerProps) => { ) : ( )} diff --git a/src/screens/walletConnect/AndroidQRScanner.tsx b/src/screens/walletConnect/AndroidQRScanner.tsx deleted file mode 100644 index a2eb11b48..000000000 --- a/src/screens/walletConnect/AndroidQRScanner.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import { Camera, useCameraDevice } from 'react-native-vision-camera' -import { Alert, StyleSheet, View } from 'react-native' -import { useRef, useState } from 'react' -import RNQR from 'rn-qr-generator' -import Icon from 'react-native-vector-icons/FontAwesome5' -import { useTranslation } from 'react-i18next' -import { useIsFocused } from '@react-navigation/native' - -import { AppSpinner, AppTouchable } from 'src/components' -import { FullScreenSpinner } from 'components/fullScreenSpinner' -import { QRCodeScannerProps } from 'components/QRCodeScanner' -import { castStyle } from 'shared/utils' -import { sharedColors, sharedStyles } from 'shared/constants' -import { useCheckCameraPermissions } from 'components/QRCodeScanner/useCheckCameraPermissions' - -export const AndroidQRScanner = ({ - onCodeRead, - onClose, -}: QRCodeScannerProps) => { - const device = useCameraDevice('back') - const camera = useRef(null) - const [isProcessingImage, setIsProcessingImage] = useState(false) - const { t } = useTranslation() - const isFocused = useIsFocused() - - useCheckCameraPermissions({ t, isFocused }) - - const onTakePicture = async () => { - try { - setIsProcessingImage(true) - if (camera.current) { - const { path } = await camera.current.takePhoto() - const { values } = await RNQR.detect({ uri: path }) - if (values.length > 0) { - onCodeRead(values[0]) - } else { - // Bad image - try again - Alert.alert(t('android_qr_alert_title'), t('android_qr_alert_desc')) - } - } - } catch (error) { - if (error instanceof Error) { - Alert.alert(t('android_qr_alert_title'), error.toString()) - } - } finally { - setIsProcessingImage(false) - } - } - - if (!device) { - return ( - - ) - } - return ( - <> - - - - - - {isProcessingImage ? ( - - ) : ( - - - - )} - - - ) -} - -const styles = StyleSheet.create({ - viewStyle: castStyle.view({ - position: 'absolute', - bottom: '5%', - alignSelf: 'center', - alignItems: 'center', - }), - closeAppTouchable: castStyle.view({ position: 'absolute', top: '5%' }), -}) diff --git a/src/screens/walletConnect/ScanQRScreen.tsx b/src/screens/walletConnect/ScanQRScreen.tsx index acc5dc091..96bfbf078 100644 --- a/src/screens/walletConnect/ScanQRScreen.tsx +++ b/src/screens/walletConnect/ScanQRScreen.tsx @@ -1,7 +1,5 @@ import { isBitcoinAddressValid } from '@rsksmart/rif-wallet-bitcoin' import { decodeString } from '@rsksmart/rif-wallet-eip681' -import { Platform } from 'react-native' -import { useIsFocused } from '@react-navigation/native' import { QRCodeScanner } from 'components/QRCodeScanner' import { getWalletSetting } from 'core/config' @@ -13,13 +11,11 @@ import { } from 'navigation/rootNavigator' import { selectChainId } from 'store/slices/settingsSlice' import { useAppSelector } from 'store/storeUtils' -import { AndroidQRScanner } from 'screens/walletConnect/AndroidQRScanner' export const ScanQRScreen = ({ navigation, }: RootTabsScreenProps) => { const chainId = useAppSelector(selectChainId) - const isFocused = useIsFocused() const onCodeRead = (data: string) => { // Metamask QR const decodedString = decodeString(data) @@ -63,8 +59,5 @@ export const ScanQRScreen = ({ } } - if (Platform.OS === 'android' && isFocused) { - return - } return } diff --git a/yarn.lock b/yarn.lock index 0fc24cc9d..cbe5f5342 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10269,10 +10269,10 @@ react-native-vector-icons@^10.0.3: prop-types "^15.7.2" yargs "^16.1.1" -react-native-vision-camera@^3.9.0: - version "3.9.0" - resolved "https://registry.yarnpkg.com/react-native-vision-camera/-/react-native-vision-camera-3.9.0.tgz#6a96a6cbad53c2db84d671c388b250327681a553" - integrity sha512-q0HejFTS56s5DXWHZhlWLLZMKn/8OXALrqET+FySPIKskwYEdJ5rOV2aDlD6hlo67qCNFGUIMZWGFFc9L2os1g== +react-native-vision-camera@^3.9.1: + version "3.9.1" + resolved "https://registry.yarnpkg.com/react-native-vision-camera/-/react-native-vision-camera-3.9.1.tgz#78eb9da9fcd1cf2ee2562ec18ab8966e0215ab1b" + integrity sha512-Pi9ikguJlN1ydVZOyRaMfUij1raUY93rVuPM92BsGnXEfxSLbvRYXW4ll1DRtVtjS0kZq4IW7Oavg8syRPc/xQ== react-native@0.73.4: version "0.73.4"