chore: switch to react-native-vision-camera

Author: pwltr

android/app/build.gradle

@@ -86,7 +86,6 @@ android {
         versionCode 130
         versionName "1.0.3"
         multiDexEnabled true
-        missingDimensionStrategy 'react-native-camera', 'general'
         testBuildType System.getProperty('testBuildType', 'debug')
         testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
     }

android/gradle.properties

@@ -37,3 +37,6 @@ 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
+
+# Include MLKit model for react-native-vision-camera
+VisionCamera_enableCodeScanner=true

ios/Podfile.lock

@@ -1690,8 +1690,6 @@ PODS:
     - React-logger (= 0.75.2)
     - React-perflogger (= 0.75.2)
     - React-utils (= 0.75.2)
-  - ReactNativeCameraKit (14.0.0-beta15):
-    - React-Core
   - RNCClipboard (1.14.1):
     - React-Core
   - RNDeviceInfo (11.1.0):
@@ -1858,6 +1856,12 @@ PODS:
     - ReactCommon/turbomodule/core
     - Yoga
   - SSZipArchive (2.4.3)
+  - VisionCamera (4.5.3):
+    - VisionCamera/Core (= 4.5.3)
+    - VisionCamera/React (= 4.5.3)
+  - VisionCamera/Core (4.5.3)
+  - VisionCamera/React (4.5.3):
+    - React-Core
   - Yoga (0.0.0)
   - ZXingObjC (3.6.9):
     - ZXingObjC/All (= 3.6.9)
@@ -1942,7 +1946,6 @@ DEPENDENCIES:
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCodegen (from `build/generated/ios`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
-  - ReactNativeCameraKit (from `../node_modules/react-native-camera-kit`)
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNFS (from `../node_modules/react-native-fs`)
@@ -1960,6 +1963,7 @@ DEPENDENCIES:
   - RNSVG (from `../node_modules/react-native-svg`)
   - RNZipArchive (from `../node_modules/react-native-zip-archive`)
   - sodium-react-native-direct (from `../node_modules/sodium-react-native-direct`)
+  - VisionCamera (from `../node_modules/react-native-vision-camera`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -2125,8 +2129,6 @@ EXTERNAL SOURCES:
     :path: build/generated/ios
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
-  ReactNativeCameraKit:
-    :path: "../node_modules/react-native-camera-kit"
   RNCClipboard:
     :path: "../node_modules/@react-native-clipboard/clipboard"
   RNDeviceInfo:
@@ -2161,6 +2163,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-zip-archive"
   sodium-react-native-direct:
     :path: "../node_modules/sodium-react-native-direct"
+  VisionCamera:
+    :path: "../node_modules/react-native-vision-camera"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -2245,7 +2249,6 @@ SPEC CHECKSUMS:
   React-utils: 81a715d9c0a2a49047e77a86f3a2247408540deb
   ReactCodegen: 60973d382704c793c605b9be0fc7f31cb279442f
   ReactCommon: 6ef348087d250257c44c0204461c03f036650e9b
-  ReactNativeCameraKit: 71343efc1256720184ce980f164c7eedb78d5c16
   RNCClipboard: 0a720adef5ec193aa0e3de24c3977222c7e52a37
   RNDeviceInfo: b899ce37a403a4dea52b7cb85e16e49c04a5b88e
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
@@ -2265,6 +2268,7 @@ SPEC CHECKSUMS:
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   sodium-react-native-direct: 8feb9a6d0d88ce65efa305d6cc774c11c62d9a15
   SSZipArchive: fe6a26b2a54d5a0890f2567b5cc6de5caa600aef
+  VisionCamera: cb84d0d8485b3e67c91b62931d3aa88f49747c92
   Yoga: a1d7895431387402a674fd0d1c04ec85e87909b8
   ZXingObjC: 8898711ab495761b2dbbdec76d90164a6d7e14c5
 

ios/bitkit.xcodeproj/project.pbxproj

@@ -83,7 +83,6 @@
     "react-native": "0.75.2",
     "react-native-address-generator": "0.3.3",
     "react-native-biometrics": "3.0.1",
-    "react-native-camera-kit": "14.0.0-beta15",
     "react-native-device-info": "11.1.0",
     "react-native-dotenv": "3.4.11",
     "react-native-draggable-flatlist": "4.0.1",
@@ -111,6 +110,7 @@
     "react-native-svg": "15.2.0",
     "react-native-tcp-socket": "6.0.6",
     "react-native-toast-message": "2.2.0",
+    "react-native-vision-camera": "4.5.3",
     "react-native-zip-archive": "6.1.0",
     "react-redux": "9.1.2",
     "readable-stream": "4.5.2",

package.json

@@ -1,14 +1,26 @@
-import React, { ReactElement, useState, useEffect } from 'react';
-import { StyleSheet, Platform, View } from 'react-native';
+import React, {
+	ReactElement,
+	useState,
+	useEffect,
+	useRef,
+	useCallback,
+} from 'react';
+import { StyleSheet } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
-import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';
-import { Camera as CameraKit, CameraType } from 'react-native-camera-kit';
-import { useTranslation } from 'react-i18next';
+import {
+	Camera as VisionCamera,
+	Point,
+	useCameraDevice,
+	useCodeScanner,
+	useCameraPermission,
+} from 'react-native-vision-camera';
 
 import CameraNoAuth from './CameraNoAuth';
 import GradientView from './GradientView';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { runOnJS } from 'react-native-reanimated';
 
-enum Status {
+enum EAuthStatus {
 	AUTHORIZED = 'AUTHORIZED',
 	NOT_AUTHORIZED = 'NOT_AUTHORIZED',
 	UNKNOWN = 'UNKNOWN',
@@ -25,72 +37,72 @@ const Camera = ({
 	bottomSheet?: boolean;
 	onBarCodeRead: (data: string) => void;
 }): ReactElement => {
-	const { t } = useTranslation('other');
+	const camera = useRef<VisionCamera>(null);
+	const scannedCode = useRef('');
 	const isFocused = useIsFocused();
-	const [_data, setData] = useState('');
-	const [cameraStatus, setCameraStatus] = useState<Status>(Status.UNKNOWN);
+	const [authStatus, setAuthStatus] = useState(EAuthStatus.UNKNOWN);
+
+	const device = useCameraDevice('back');
+	const { hasPermission, requestPermission } = useCameraPermission();
 
 	useEffect(() => {
-		(async (): Promise<void> => {
-			const cameraPermission =
-				Platform.OS === 'ios'
-					? PERMISSIONS.IOS.CAMERA
-					: PERMISSIONS.ANDROID.CAMERA;
-			const checkResponse = await check(cameraPermission);
-			switch (checkResponse) {
-				case RESULTS.UNAVAILABLE:
-				case RESULTS.BLOCKED:
-					setCameraStatus(Status.NOT_AUTHORIZED);
-					break;
-				case RESULTS.DENIED:
-					const rationale = {
-						title: t('camera_ask_title'),
-						message: t('camera_ask_msg'),
-						buttonPositive: t('ok'),
-						buttonNegative: t('cancel'),
-					};
-					const requestResponse = await request(cameraPermission, rationale);
-					setCameraStatus(
-						requestResponse === RESULTS.GRANTED
-							? Status.AUTHORIZED
-							: Status.NOT_AUTHORIZED,
-					);
-					break;
-				case RESULTS.LIMITED:
-				case RESULTS.GRANTED:
-					setCameraStatus(Status.AUTHORIZED);
-					break;
+		const checkPermission = async (): Promise<void> => {
+			if (hasPermission) {
+				setAuthStatus(EAuthStatus.AUTHORIZED);
+			} else {
+				const granted = await requestPermission();
+				if (granted) {
+					setAuthStatus(EAuthStatus.AUTHORIZED);
+				} else {
+					setAuthStatus(EAuthStatus.NOT_AUTHORIZED);
+				}
+			}
+		};
+
+		checkPermission();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	const codeScanner = useCodeScanner({
+		codeTypes: ['qr'],
+		onCodeScanned: (codes) => {
+			const code = codes.find((c) => c.value);
+			if (code?.value && scannedCode.current !== code.value) {
+				scannedCode.current = code.value;
+				onBarCodeRead(code.value);
 			}
-		})();
-	}, [t]);
+		},
+	});
 
-	const handleCodeRead = (event): void => {
-		const { codeStringValue } = event.nativeEvent;
-		if (_data !== codeStringValue) {
-			setData(codeStringValue);
-			onBarCodeRead(codeStringValue);
-		}
-	};
+	const focus = useCallback((point: Point) => {
+		camera.current?.focus(point);
+	}, []);
 
-	if (!isFocused) {
-		return <View style={styles.container} />;
-	}
+	const gesture = Gesture.Tap().onEnd(({ x, y }) => {
+		runOnJS(focus)({ x, y });
+	});
 
 	return (
 		<GradientView style={styles.container}>
-			{cameraStatus === Status.AUTHORIZED && (
+			{authStatus === EAuthStatus.AUTHORIZED && (
 				<>
-					<CameraKit
-						style={styles.camera}
-						scanBarcode={true}
-						onReadCode={handleCodeRead}
-						torchMode={torchMode ? 'on' : 'off'}
-						cameraType={CameraType.Back}
-					/>
+					{device && (
+						<GestureDetector gesture={gesture}>
+							<VisionCamera
+								style={styles.camera}
+								device={device}
+								codeScanner={codeScanner}
+								torch={torchMode ? 'on' : 'off'}
+								enableZoomGesture={true}
+								isActive={isFocused}
+								onError={(error): void => console.error(error)}
+							/>
+						</GestureDetector>
+					)}
 					{children}
 				</>
 			)}
-			{cameraStatus === Status.NOT_AUTHORIZED && (
+			{authStatus === EAuthStatus.NOT_AUTHORIZED && (
 				<CameraNoAuth bottomSheet={bottomSheet} />
 			)}
 		</GradientView>

src/components/Camera.tsx

@@ -6637,7 +6637,6 @@ __metadata:
     react-native-address-generator: 0.3.3
     react-native-biometrics: 3.0.1
     react-native-bundle-visualizer: ^3.1.3
-    react-native-camera-kit: 14.0.0-beta15
     react-native-device-info: 11.1.0
     react-native-dotenv: 3.4.11
     react-native-draggable-flatlist: 4.0.1
@@ -6667,6 +6666,7 @@ __metadata:
     react-native-svg-transformer: ^1.3.0
     react-native-tcp-socket: 6.0.6
     react-native-toast-message: 2.2.0
+    react-native-vision-camera: 4.5.3
     react-native-zip-archive: 6.1.0
     react-redux: 9.1.2
     reactotron-react-native: ^5.1.6
@@ -14083,16 +14083,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-camera-kit@npm:14.0.0-beta15":
-  version: 14.0.0-beta15
-  resolution: "react-native-camera-kit@npm:14.0.0-beta15"
-  peerDependencies:
-    react: "*"
-    react-native: "*"
-  checksum: 6867d00df53dec159c48898a657628819cd637e7083b20f1ed5b6b93aafff01899642d8a99752faf2cef7b713e0f330327d8c38ca22aabb73c80ce1b42fcead3
-  languageName: node
-  linkType: hard
-
 "react-native-device-info@npm:11.1.0":
   version: 11.1.0
   resolution: "react-native-device-info@npm:11.1.0"
@@ -14462,6 +14452,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-vision-camera@npm:4.5.3":
+  version: 4.5.3
+  resolution: "react-native-vision-camera@npm:4.5.3"
+  peerDependencies:
+    "@shopify/react-native-skia": "*"
+    react: "*"
+    react-native: "*"
+    react-native-reanimated: "*"
+    react-native-worklets-core: "*"
+  peerDependenciesMeta:
+    "@shopify/react-native-skia":
+      optional: true
+    react-native-reanimated:
+      optional: true
+    react-native-worklets-core:
+      optional: true
+  checksum: 99d57a70f93134903ae25ef798947f79804ea00e3b58cbb21131115552e6f2950d2a3be9a6a237232ca6bab7b5031aa12d9ca2df659be39dc607d75997317abc
+  languageName: node
+  linkType: hard
+
 "react-native-zip-archive@npm:6.1.0":
   version: 6.1.0
   resolution: "react-native-zip-archive@npm:6.1.0"