Move back to using react-native-vision-camera

Author: hsjoberg

package.json

@@ -145,6 +145,7 @@
     "react-native-tor": "^0.1.8",
     "react-native-unimodules": "^0.14.10",
     "react-native-vector-icons": "9.2.0",
+    "react-native-vision-camera": "4.3.2",
     "react-native-web": "0.19.12",
     "react-native-web-linear-gradient": "^1.1.2",
     "react-native-web-maps": "^0.3.0",

src/components/Camera.tsx

@@ -1,61 +1,57 @@
-import React, { ReactNode, useState, useEffect } from "react";
+import React, { ReactNode, useEffect } from "react";
 import { StyleProp, ViewStyle, InteractionManager, StyleSheet } from "react-native";
-import { Camera, CameraType } from "react-native-camera-kit";
+import {
+  Camera,
+  useCodeScanner,
+  useCameraDevice,
+  useCameraPermission,
+} from "react-native-vision-camera";
 import Container from "./Container";
-import { PLATFORM } from "../utils/constants";
-
-let ReactNativePermissions: any;
-if (PLATFORM !== "macos") {
-  ReactNativePermissions = require("react-native-permissions");
-}
 
 export interface ICamera {
   active?: boolean;
   children?: ReactNode | JSX.Element;
-  cameraType?: keyof CameraType;
+  cameraType?: keyof CameraType; // TODO(hsjoberg)
   onRead?: (text: string) => void;
   onNotAuthorized?: () => void; // TODO(hsjoberg):
   style?: StyleProp<ViewStyle>;
 }
-export default function CameraComponent({
-  cameraType,
-  children,
-  onNotAuthorized,
-  onRead,
-  style,
-  active,
-}: ICamera) {
-  const [start, setStart] = useState(false);
+export default function CameraComponent({ children, onNotAuthorized, onRead, active }: ICamera) {
+  const device = useCameraDevice("back");
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const codeScanner = useCodeScanner({
+    codeTypes: ["qr"],
+    onCodeScanned: (codes) => {
+      if (codes.length >= 0) {
+        onRead?.(codes[0].value ?? "");
+      }
+    },
+  });
   active = active ?? true;
 
   useEffect(() => {
-    InteractionManager.runAfterInteractions(async () => {
-      const permission =
-        PLATFORM === "ios"
-          ? ReactNativePermissions.PERMISSIONS.IOS.CAMERA
-          : ReactNativePermissions.PERMISSIONS.ANDROID.CAMERA;
-      const result = await ReactNativePermissions.request(permission);
-
-      if (result === "granted" || result === "limited") {
-        console.log("Camera permission not granted");
-        setStart(true);
-      } else {
-        console.log("Camera permission granted");
+    (async () => {
+      if (hasPermission === false) {
+        console.log("Does not have camera permission");
+        if (await !requestPermission()) {
+          // TODO fix await
+          onNotAuthorized?.();
+        }
       }
-    });
-  }, []);
+    })();
+  }, [requestPermission, hasPermission]);
 
-  if (!start || !active) {
+  if (!active || !hasPermission || !device) {
     return <Container style={{ backgroundColor: "black" }}>{children ?? <></>}</Container>;
   }
 
   return (
     <>
       <Camera
-        style={[{ width: "100%", height: "100%" }, style]}
-        scanBarcode={true}
-        cameraType={cameraType}
-        onReadCode={(event: any) => onRead?.(event.nativeEvent.codeStringValue)}
+        style={StyleSheet.absoluteFill}
+        codeScanner={codeScanner}
+        device={device}
+        isActive={active}
       />
       {children}
     </>

src/components/FooterNav.tsx

@@ -20,9 +20,7 @@ export default function FooterNav() {
       <FooterTab>
         <Button
           testID="FOOTER_SEND"
-          onPress={() =>
-            navigation.navigate("Send", { screen: "SendCameraKit", params: { viaSwipe: false } })
-          }
+          onPress={() => navigation.navigate("Send", { params: { viaSwipe: false } })}
           onLongPress={() => {
             navigation.navigate("Send", { screen: "SendCameraKit", params: { viaSwipe: false } });
           }}

src/windows/Send/SendCamera.tsx

@@ -4,13 +4,13 @@ import Clipboard from "@react-native-clipboard/clipboard";
 import { Icon, Text } from "native-base";
 import { StackNavigationProp } from "@react-navigation/stack";
 import { getStatusBarHeight } from "react-native-status-bar-height";
-// import {
-//   Camera,
-//   useCodeScanner,
-//   CameraPosition,
-//   useCameraDevice,
-//   useCameraPermission,
-// } from "react-native-vision-camera";
+import {
+  Camera,
+  useCodeScanner,
+  CameraPosition,
+  useCameraDevice,
+  useCameraPermission,
+} from "react-native-vision-camera";
 
 import BarcodeMask from "../../components/BarCodeMask";
 import { SendStackParamList } from "./index";

yarn.lock

@@ -12787,6 +12787,11 @@ react-native-vector-icons@^7.0.0:
     prop-types "^15.7.2"
     yargs "^15.0.2"
 
+[email protected]:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/react-native-vision-camera/-/react-native-vision-camera-4.3.2.tgz#4acf80b62328275a69b22cd142f71a4e4aa2c12e"
+  integrity sha512-zrMWS+I5kIV9UShryRBOjV0PfOvKIH1LlvnQKw8n4D2NOuT6d3dTZ1KtwmktorwrPxRPf3FRktSn2Gv6F1kmWQ==
+
 react-native-web-linear-gradient@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/react-native-web-linear-gradient/-/react-native-web-linear-gradient-1.1.2.tgz#33f85f7085a0bb5ffa5106faf02ed105b92a9ed7"