Replace react-native-camera with react-native-vision-camera

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

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

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

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() {}

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",

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 (
         <>
           <View style={styles.cameraContainer} onLayout={handleLayoutCameraContainer}>
-            <RNCamera
-              style={styles.cameraArea}
-              captureAudio={false}
-              flashMode={flashMode}
-              onBarCodeRead={handleBarCodeRead}
-              type={RNCamera.Constants.Type.back}
-            />
+            {device == null ? null : (
+              <Camera
+                style={styles.cameraArea}
+                audio={false}
+                torch={torchEnabled ? 'on' : 'off'}
+                codeScanner={codeScanner}
+                device={device}
+                isActive={scanEnabled}
+              />
+            )}
           </View>
 
           <QrPeephole
@@ -183,7 +192,7 @@ export const ScanModal = (props: Props) => {
               <View style={styles.peepholeSpace} onLayout={handleLayoutPeepholeSpace} />
               <View style={[styles.buttonsContainer, { flexDirection: isLandscape ? 'column-reverse' : 'row' }]}>
                 <EdgeTouchableOpacity style={styles.iconButton} onPress={handleFlash}>
-                  <Ionicon style={styles.icon} name={flashMode ? 'flash' : 'flash-outline'} />
+                  <Ionicon style={styles.icon} name={torchEnabled ? 'flash' : 'flash-outline'} />
                   <EdgeText>{lstrings.fragment_send_flash}</EdgeText>
                 </EdgeTouchableOpacity>
                 <EdgeTouchableOpacity style={styles.iconButton} onPress={handleAlbum}>

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"