Use zxing qr scanner

android/app/build.gradle

@@ -175,6 +175,9 @@ dependencies {
     } else {
         implementation jscFlavor
     }
+    implementation (project(':react-native-device-info')) {
+        exclude group: 'com.google.android.gms'
+    }
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

android/app/proguard-rules.pro

@@ -17,4 +17,7 @@
 }
 -keep enum org.greenrobot.eventbus.ThreadMode { *; }
 -keep class com.facebook.hermes.unicode.** { *; }
--keep class com.facebook.jni.** { *; }
+-keep class com.facebook.jni.** { *; }
+-keep class com.google.android.gms.common.** {*;}
+
+-dontwarn com.google.errorprone.annotations.Immutable

android/app/src/main/AndroidManifest.xml

@@ -38,9 +38,5 @@
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
       </activity>
-
-      <meta-data
-          android:name="com.google.mlkit.vision.DEPENDENCIES"
-          android:value="barcode" />
     </application>
 </manifest>

android/build.gradle

@@ -14,6 +14,7 @@ buildscript {
         google()
         mavenCentral()
     }
+
     dependencies {
         classpath("com.android.tools.build:gradle")
         classpath("com.facebook.react:react-native-gradle-plugin")

android/gradle.properties

@@ -40,4 +40,5 @@ newArchEnabled=false
 # If set to false, you will be using JSC instead.
 hermesEnabled=true
 
+VisionCamera_enableCodeScanner=true
 VisionCamera_disableFrameProcessors=true

package.json

@@ -63,6 +63,7 @@
     "react-i18next": "14.0.0",
     "react-native": "0.73.3",
     "react-native-animated-linear-gradient": "1.3.0",
+    "react-native-barcode-zxing-scan": "1.0.2",
     "react-native-bars": "2.3.0",
     "react-native-biometrics": "3.0.1",
     "react-native-blur-effect": "1.1.3",
@@ -88,7 +89,7 @@
     "react-native-svg": "14.1.0",
     "react-native-toast-notifications": "3.4.0",
     "react-native-use-keyboard": "1.0.0",
-    "react-native-vision-camera": "3.6.16",
+    "react-native-vision-camera": "4.0.1",
     "react-native-web": "0.19.9",
     "react-native-web-linear-gradient": "1.1.2",
     "react-native-webview": "13.6.4",
@@ -99,6 +100,7 @@
     "react-use-websocket": "4.5.0",
     "stream-browserify": "3.0.0",
     "styled-components": "6.0.9",
+    "vm-browserify": "1.1.2",
     "xpub-converter": "1.0.2"
   },
   "browserslist": {

patches/react-native-barcode-zxing-scan+1.0.2.patch

@@ -0,0 +1,40 @@
+diff --git a/node_modules/react-native-barcode-zxing-scan/android/src/main/java/com/reactlibrary/BarcodeZxingScanModule.java b/node_modules/react-native-barcode-zxing-scan/android/src/main/java/com/reactlibrary/BarcodeZxingScanModule.java
+index 5e570e7..e83690f 100644
+--- a/node_modules/react-native-barcode-zxing-scan/android/src/main/java/com/reactlibrary/BarcodeZxingScanModule.java
++++ b/node_modules/react-native-barcode-zxing-scan/android/src/main/java/com/reactlibrary/BarcodeZxingScanModule.java
+@@ -12,10 +12,12 @@ import com.facebook.react.bridge.ReactContextBaseJavaModule;
+ import com.facebook.react.bridge.ReactMethod;
+ import com.facebook.react.bridge.Callback;
+ import com.google.zxing.integration.android.IntentIntegrator;
++import com.google.zxing.integration.android.IntentResult;
+
+ public class BarcodeZxingScanModule extends ReactContextBaseJavaModule implements ActivityEventListener {
+
+     private final ReactApplicationContext reactContext;
++    private Callback mcallback;
+
+     public BarcodeZxingScanModule(ReactApplicationContext reactContext) {
+         super(reactContext);
+@@ -41,9 +43,10 @@ public class BarcodeZxingScanModule extends ReactContextBaseJavaModule implement
+
+     @ReactMethod
+     public void showQrReader(Callback callback) {
+-        Callback mCallback = callback;
++        mcallback = callback;
+         IntentIntegrator integrator = new IntentIntegrator(getCurrentActivity());
+         integrator.setOrientationLocked(true);
++        integrator.setBeepEnabled(false);
+         integrator.setCaptureActivity(ContinuousCaptureActivity.class);
+         integrator.initiateScan();
+         reactContext.addActivityEventListener(this);
+@@ -52,7 +55,9 @@ public class BarcodeZxingScanModule extends ReactContextBaseJavaModule implement
+
+     @Override
+     public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent data) {
+-
++        IntentResult result = IntentIntegrator.parseActivityResult(requestCode,resultCode, data);
++        mcallback.invoke(result.getContents(),result.getBarcodeImagePath());
++        reactContext.removeActivityEventListener(this);
+     }
+
+     @Override

scripts/build-android.sh

@@ -5,6 +5,8 @@ cd ..
 
 source .env
 
+npm remove react-native-vision-camera
+
 npx react-native bundle --minify --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/merged/release/
 
 cd android

src/components/QRCamera/QRCamera.android.tsx

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { QRScannerProps } from "./QRCamera";
+// @ts-ignore
+import BarcodeZxingScan from "react-native-barcode-zxing-scan";
+
+export const QRCamera = ({ onScan }: QRScannerProps) => {
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    BarcodeZxingScan.showQrReader(onScan);
+  }, []);
+};

src/components/QrScanWindow/QrScanWindow.tsx

@@ -0,0 +1,72 @@
+import { useCallback, useState } from "react";
+import { CamerasConfig } from "@components/QRCamera/types";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import * as S from "./styled";
+
+type QrScanWindowProps = {
+  isOpen: boolean;
+  onScan: (value: string) => void;
+  onClose: () => void;
+};
+
+export const QrScanWindow = ({
+  onScan,
+  onClose,
+  isOpen
+}: QrScanWindowProps) => {
+  const [config, setConfig] = useState<CamerasConfig>();
+  const [isCameraActive, setIsCameraActive] = useState(true);
+  const [deviceIndex, setDeviceIndex] = useState<number>();
+
+  const _setConfig = useCallback(
+    (newConfig: Partial<CamerasConfig>) => {
+      if (deviceIndex === undefined) {
+        setDeviceIndex(newConfig?.defaultIndex || 0);
+      }
+      setIsCameraActive(true);
+      setConfig({
+        ...(config || {
+          hasTorch: false,
+          devicesNumber: 0,
+          defaultIndex: -1
+        }),
+        ...newConfig
+      });
+    },
+    [config, deviceIndex]
+  );
+
+  const _onClose = useCallback(() => {
+    setIsCameraActive(false);
+    setTimeout(() => {
+      onClose();
+    }, 0);
+  }, [onClose]);
+
+  const _onScan = useCallback(
+    (value: string) => {
+      onScan(value);
+      setIsCameraActive(false);
+      onClose();
+    },
+    [onClose, onScan]
+  );
+
+  return (
+    isOpen && (
+      <S.WindowContainer>
+        <S.Camera
+          isActive={isCameraActive}
+          deviceIndex={deviceIndex}
+          isTorchOn
+          style={{}}
+          setConfig={_setConfig}
+          onScan={_onScan}
+          videoHeight={300}
+          resizeMode="contain"
+        />
+        <S.CloseButton icon={faTimes} onPress={_onClose} />
+      </S.WindowContainer>
+    )
+  );
+};

src/components/QrScanWindow/index.ts

@@ -0,0 +1 @@
+export { QrScanWindow } from "./QrScanWindow";

src/components/QrScanModal/styled.ts → src/components/QrScanWindow/styled.ts

@@ -1,12 +1,21 @@
 import styled from "styled-components";
 import { QRCamera, View, Button, Text, ComponentStack } from "@components";
+import { Platform } from "react-native";
 
-export const ContainerContent = styled(View)`
-  height: 100%;
-  width: 100%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
+const WINDOW_SIZE = 300;
+const BORDER_SIZE = 4;
+
+export const WindowContainer = styled(View)`
+  height: ${WINDOW_SIZE}px;
+  width: ${WINDOW_SIZE}px;
+  position: absolute;
+  overflow: hidden;
+
+  bottom: 110%;
+  border-radius: 20px;
+  right: 16px;
+  border: ${BORDER_SIZE}px solid white;
+  ${Platform.OS === "android" ? "opacity: 0;" : ""}
 `;
 
 export const VerticialPart = styled(View)<{ isItemsBottom?: boolean }>`
@@ -30,19 +39,15 @@ export const BottomButtons = styled(ComponentStack)`
 
 export const Camera = styled(QRCamera)`
   position: relative;
+  height: ${WINDOW_SIZE}px;
+  width: ${WINDOW_SIZE - BORDER_SIZE * 2}px;
   overflow: hidden;
-  border-radius: 20px;
 `;
 
-export const BottomButton = styled(Button)<{ position?: "left" | "right" }>`
-  ${({ position }) => {
-    if (!position) return "";
-
-    const distance = 74 + 18;
+const CLOSE_BUTTON_PADDING = 12;
 
-    return `
-        position: absolute;
-        ${position === "left" ? "right" : "left"}: ${distance}px;
-    `;
-  }}
+export const CloseButton = styled(Button)`
+  position: absolute;
+  top: ${CLOSE_BUTTON_PADDING}px;
+  right: ${CLOSE_BUTTON_PADDING}px;
 `;

src/components/TextField/TextField.tsx

@@ -6,7 +6,7 @@ import {
   useState
 } from "react";
 import { TextInput } from "react-native";
-import { BaseField, QrScanModal, QrModal, Text } from "@components";
+import { BaseField, QrScanWindow, QrModal, Text } from "@components";
 import { BaseFieldProps } from "@components/BaseField";
 import { StyledComponentComponentProps } from "@types";
 import { Clipboard, tupulize } from "@utils";
@@ -144,8 +144,7 @@ export const TextField = forwardRef<TextInput, TextFieldProps>(
     return (
       <S.TextFieldContainer style={style}>
         {isCameraAvailable && qrScannable && (
-          <QrScanModal
-            title={label}
+          <QrScanWindow
             isOpen={isScanModalOpen}
             onClose={onToggleScanQrModal}
             onScan={onScanQr}

src/components/index.ts

@@ -27,7 +27,7 @@ export { Modal } from "./Modal";
 export { QRCamera } from "./QRCamera";
 export { QR } from "./QR";
 export { QrModal } from "./QrModal";
-export { QrScanModal } from "./QrScanModal";
+export { QrScanWindow } from "./QrScanWindow";
 export { BaseField } from "./BaseField";
 export { TextInput } from "./TextInput";
 export { TextField } from "./TextField";