From 11ce4d07cb90ad9418f818b42454cce8bc0a6f16 Mon Sep 17 00:00:00 2001 From: Matthew Date: Fri, 22 Mar 2024 12:52:19 -0700 Subject: [PATCH] Replace react-native-camera with react-native-vision-camera --- CHANGELOG.md | 1 + android/gradle.properties | 2 + ios/Podfile.lock | 20 +++--- jestSetup.js | 9 +-- package.json | 2 +- patches/react-native-camera+1.13.1.patch | 78 ------------------------ src/components/modals/ScanModal.tsx | 35 +++++++---- yarn.lock | 12 ++-- 8 files changed, 40 insertions(+), 119 deletions(-) delete mode 100644 patches/react-native-camera+1.13.1.patch diff --git a/CHANGELOG.md b/CHANGELOG.md index 3c37f6548a5..fa9fcd86864 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unreleased - added: Add auto-detected tokens section in ManageTokensScene +- changed: Replaced 'react-native-camera' with 'react-native-vision-camera' - fixed: Filecoin sync issue caused by missing and necessary GLIF API key - fixed: FIO handle/domain registration error with MATIC payment - fixed: Fix duplicate transactions bug and re-enable transaction support in Filecoin FEVM diff --git a/android/gradle.properties b/android/gradle.properties index e4af465e8a1..36c04c27f78 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/ios/Podfile.lock b/ios/Podfile.lock index e875f4f5e6b..bd64b92e14f 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -493,14 +493,6 @@ PODS: - React-jsinspector (0.71.15) - React-logger (0.71.15): - glog - - react-native-camera (1.13.1): - - React - - react-native-camera/RCT (= 1.13.1) - - react-native-camera/RN (= 1.13.1) - - react-native-camera/RCT (1.13.1): - - React - - react-native-camera/RN (1.13.1): - - React - react-native-compat (2.11.0): - RCT-Folly (= 2021.07.22.00) - React-Core @@ -866,6 +858,10 @@ PODS: - SwiftNIOPosix (< 3, >= 2.32.0) - SwiftNIOTLS (< 3, >= 2.32.0) - SwiftProtobuf (1.23.0) + - VisionCamera (3.9.1): + - React + - React-callinvoker + - React-Core - Yoga (1.14.0) - YogaKit (1.18.1): - Yoga (~> 1.14) @@ -950,7 +946,6 @@ DEPENDENCIES: - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) - React-logger (from `../node_modules/react-native/ReactCommon/logger`) - - react-native-camera (from `../node_modules/react-native-camera`) - "react-native-compat (from `../node_modules/@walletconnect/react-native-compat`)" - react-native-contacts (from `../node_modules/react-native-contacts`) - react-native-flipper (from `../node_modules/react-native-flipper`) @@ -1007,6 +1002,7 @@ DEPENDENCIES: - RNStoreReview (from `../node_modules/react-native-store-review`) - RNSVG (from `../node_modules/react-native-svg`) - RNVectorIcons (from `../node_modules/react-native-vector-icons`) + - VisionCamera (from `../node_modules/react-native-vision-camera`) - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) SPEC REPOS: @@ -1157,8 +1153,6 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon/jsinspector" React-logger: :path: "../node_modules/react-native/ReactCommon/logger" - react-native-camera: - :path: "../node_modules/react-native-camera" react-native-compat: :path: "../node_modules/@walletconnect/react-native-compat" react-native-contacts: @@ -1271,6 +1265,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native-svg" RNVectorIcons: :path: "../node_modules/react-native-vector-icons" + VisionCamera: + :path: "../node_modules/react-native-vision-camera" Yoga: :path: "../node_modules/react-native/ReactCommon/yoga" @@ -1356,7 +1352,6 @@ SPEC CHECKSUMS: React-jsiexecutor: e0cde8d57cee18097b3d2b1bf6404ad25dd8d33b React-jsinspector: 4ade58a6a355d97a53f847543b14f4cb5033cb70 React-logger: 56699550750c013096a11dce3bc996e7dd583835 - react-native-camera: b322bc25f47536219473c6d00c666d221f7f2695 react-native-compat: d411b454141009ceca781cd1ca44132cace77c45 react-native-contacts: 1bff4c47816d611f26b06fa8b3eaf2db4d1b2c86 react-native-flipper: df8e2a7e5dcc857033d925ad8c7e8c52760b8e06 @@ -1431,6 +1426,7 @@ SPEC CHECKSUMS: SwiftNIOTLS: 598af547490133e9aac52aed0c23c4a90c31dcfc SwiftNIOTransportServices: 0b2b407819d82eb63af558c5396e33c945759503 SwiftProtobuf: b70d65f419fbfe61a2d58003456ca5da58e337d6 + VisionCamera: 52f98e7628f9deea3e311c3b6d4870bb44445e05 Yoga: 68c9c592c3e80ec37ff28db20eedb13d84aae5df YogaKit: f782866e155069a2cca2517aafea43200b01fd5a ZIPFoundation: b1f0de4eed33e74a676f76e12559ab6b75990197 diff --git a/jestSetup.js b/jestSetup.js index 48fd37520a2..fba8a9afe65 100644 --- a/jestSetup.js +++ b/jestSetup.js @@ -150,14 +150,7 @@ jest.mock( } ) -jest.mock('react-native-camera', () => ({ - RNCamera: { - Constants: { - FlashMode: { torch: 'torch', off: 'off' }, - Type: { back: 'back' } - } - } -})) +jest.mock('react-native-vision-camera', () => ({})) jest.mock('react-native-safari-view', () => ({ show() {} diff --git a/package.json b/package.json index 637d3e96021..d779c031351 100644 --- a/package.json +++ b/package.json @@ -159,7 +159,6 @@ "react-native": "0.71.15", "react-native-airship": "^0.2.12", "react-native-bootsplash": "^4.7.4", - "react-native-camera": "^1.13.1", "react-native-check-version": "^1.0.5", "react-native-confetti-cannon": "^1.5.2", "react-native-contacts": "^7.0.4", @@ -198,6 +197,7 @@ "react-native-store-review": "^0.4.1", "react-native-svg": "^13.9.0", "react-native-vector-icons": "^7.1.0", + "react-native-vision-camera": "^3.9.1", "react-native-webview": "^13.2.2", "react-native-zcash": "^0.6.9", "react-redux": "^8.1.1", diff --git a/patches/react-native-camera+1.13.1.patch b/patches/react-native-camera+1.13.1.patch deleted file mode 100644 index 3f2a04f2190..00000000000 --- a/patches/react-native-camera+1.13.1.patch +++ /dev/null @@ -1,78 +0,0 @@ -diff --git a/node_modules/react-native-camera/android/src/main/java/org/reactnative/camera/RNCameraView.java b/node_modules/react-native-camera/android/src/main/java/org/reactnative/camera/RNCameraView.java -index bb8f269..572d099 100644 ---- a/node_modules/react-native-camera/android/src/main/java/org/reactnative/camera/RNCameraView.java -+++ b/node_modules/react-native-camera/android/src/main/java/org/reactnative/camera/RNCameraView.java -@@ -179,33 +179,7 @@ public class RNCameraView extends CameraView implements LifecycleEventListener, - if (null == preview) { - return; - } -- float width = right - left; -- float height = bottom - top; -- float ratio = getAspectRatio().toFloat(); -- int orientation = getResources().getConfiguration().orientation; -- int correctHeight; -- int correctWidth; -- this.setBackgroundColor(Color.BLACK); -- if (orientation == android.content.res.Configuration.ORIENTATION_LANDSCAPE) { -- if (ratio * height < width) { -- correctHeight = (int) (width / ratio); -- correctWidth = (int) width; -- } else { -- correctWidth = (int) (height * ratio); -- correctHeight = (int) height; -- } -- } else { -- if (ratio * width > height) { -- correctHeight = (int) (width * ratio); -- correctWidth = (int) width; -- } else { -- correctWidth = (int) (height / ratio); -- correctHeight = (int) height; -- } -- } -- int paddingX = (int) ((width - correctWidth) / 2); -- int paddingY = (int) ((height - correctHeight) / 2); -- preview.layout(paddingX, paddingY, correctWidth + paddingX, correctHeight + paddingY); -+ preview.layout(0, 0, right - left, bottom - top); - } - - @SuppressLint("all") -diff --git a/node_modules/react-native-camera/src/Camera.js b/node_modules/react-native-camera/src/Camera.js -index 9ef36a8..fc4393c 100644 ---- a/node_modules/react-native-camera/src/Camera.js -+++ b/node_modules/react-native-camera/src/Camera.js -@@ -9,13 +9,13 @@ import { - StyleSheet, - findNodeHandle, - requireNativeComponent, -- ViewPropTypes, - ActivityIndicator, - View, - Text, - UIManager, - PermissionsAndroid, - } from 'react-native'; -+import { ViewPropTypes } from 'deprecated-react-native-prop-types'; - - const requestPermissions = async ( - hasVideoAndAudio, -diff --git a/node_modules/react-native-camera/src/RNCamera.js b/node_modules/react-native-camera/src/RNCamera.js -index b1a7d97..740b033 100644 ---- a/node_modules/react-native-camera/src/RNCamera.js -+++ b/node_modules/react-native-camera/src/RNCamera.js -@@ -5,7 +5,6 @@ import { - findNodeHandle, - Platform, - NativeModules, -- ViewPropTypes, - requireNativeComponent, - View, - ActivityIndicator, -@@ -13,6 +12,7 @@ import { - StyleSheet, - PermissionsAndroid, - } from 'react-native'; -+import { ViewPropTypes } from 'deprecated-react-native-prop-types'; - - import type { FaceFeature } from './FaceDetector'; - diff --git a/src/components/modals/ScanModal.tsx b/src/components/modals/ScanModal.tsx index f7c40021745..07dba966e2d 100644 --- a/src/components/modals/ScanModal.tsx +++ b/src/components/modals/ScanModal.tsx @@ -1,11 +1,11 @@ import * as React from 'react' import { Linking, View } from 'react-native' import { AirshipBridge, AirshipModal } from 'react-native-airship' -import { RNCamera } from 'react-native-camera' import { launchImageLibrary } from 'react-native-image-picker' import RNPermissions from 'react-native-permissions' import { useSafeAreaFrame } from 'react-native-safe-area-context' import Ionicon from 'react-native-vector-icons/Ionicons' +import { Camera, Code, useCameraDevice, useCodeScanner } from 'react-native-vision-camera' import RNQRGenerator from 'rn-qr-generator' import { useLayout } from '../../hooks/useLayout' @@ -47,6 +47,13 @@ export const ScanModal = (props: Props) => { const { width: windowWidth, height: windowHeight } = useSafeAreaFrame() const isLandscape = windowWidth > windowHeight + const device = useCameraDevice('back') + const codeScanner = useCodeScanner({ + codeTypes: ['qr'], + onCodeScanned: codes => { + handleBarCodeRead(codes) + } + }) const cameraPermission = useSelector(state => state.permissions.camera) const [torchEnabled, setTorchEnabled] = React.useState(false) const [scanEnabled, setScanEnabled] = React.useState(false) @@ -63,9 +70,10 @@ export const ScanModal = (props: Props) => { return () => setScanEnabled(false) }, []) - const handleBarCodeRead = (result: { data: string }) => { + const handleBarCodeRead = (codes: Code[]) => { + setScanEnabled(false) triggerHaptic('impactLight') - bridge.resolve(result.data) + bridge.resolve(codes[0].value) } const handleSettings = async () => { @@ -152,18 +160,19 @@ export const ScanModal = (props: Props) => { } if (cameraPermission === RNPermissions.RESULTS.GRANTED || cameraPermission === RNPermissions.RESULTS.LIMITED) { - const flashMode = torchEnabled ? RNCamera.Constants.FlashMode.torch : RNCamera.Constants.FlashMode.off - return ( <> - + {device == null ? null : ( + + )} { - + {lstrings.fragment_send_flash} diff --git a/yarn.lock b/yarn.lock index 3eb8ad7f83b..64dca6ff855 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15547,13 +15547,6 @@ react-native-bootsplash@^4.7.4: picocolors "^1.0.0" sharp "^0.32.1" -react-native-camera@^1.13.1: - version "1.13.1" - resolved "https://registry.yarnpkg.com/react-native-camera/-/react-native-camera-1.13.1.tgz#19277ccae0a49dbf1b96049da5b95c847ea7aff2" - integrity sha512-wYjMi06ygYIiHRM4dSCH914xFUay7Wplx0bAej4iBkZeh54M4AxJDcF4vVZ5vdkpuAg8zvof3l+L1VhcKziMgw== - dependencies: - prop-types "^15.6.2" - react-native-check-version@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/react-native-check-version/-/react-native-check-version-1.0.5.tgz#45c622214efbfbb106fd8cfb7cf73d520d21a691" @@ -15841,6 +15834,11 @@ react-native-vector-icons@^7.1.0: prop-types "^15.7.2" yargs "^15.0.2" +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-webview@^13.2.2: version "13.2.2" resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-13.2.2.tgz#06b04db8e1f4ed57a9dc92f4094aa0e41271b89b"