Hướng Dẫn Implement Tính Năng Quét QR Code Từ Ảnh Trong React Native

export function scanFromPath(path: string): Promise<string[]> {
  return QrCodeImageScan.scanFromPath(path);
}

@ReactMethod
fun scanFromPath(path: String, promise: Promise) {
   // 1
   val options = BarcodeScannerOptions.Builder()
     .setBarcodeFormats(Barcode.FORMAT_QR_CODE)
     .build()
   
   // 2
   val rPath = path.replace("file:","")
   val imgFile = File(rPath)
   if (!imgFile.exists()) {
     promise.reject("", "cannot get image from path: $path")
     return
   }

   // 3
   val bitmap = BitmapFactory.decodeFile(imgFile.absolutePath)
   val image = InputImage.fromBitmap(bitmap, 0)
   
   // 4
   val scanner = BarcodeScanning.getClient(options)
   scanner.process(image)
     .addOnSuccessListener { barcodes ->
       val codes = barcodes.map { it.displayValue }
       val arr = Arguments.fromList(codes)
       promise.resolve(arr)
     }
     .addOnFailureListener {
       promise.reject("", it.localizedMessage, it)
     }
}

@objc(scanFromPath:withResolver:withRejecter:)
func scanFromPath(path: String, resolve:@escaping RCTPromiseResolveBlock,reject:@escaping RCTPromiseRejectBlock) -> Void {
  // 1
  guard let url = URL(string: path),
        let data = try? Data(contentsOf: url),
        let image = UIImage(data: data) else {
    reject("", "Cannot get image from path: \(path)", nil)
    return
  }
  guard let cgImage = image.cgImage else {
    reject("", "Cannot get cgImage from image", nil)
    return
  }
  
  // 2
  let request = VNDetectBarcodesRequest { request, error in
    guard let results = request.results as? [VNBarcodeObservation], error == nil else {
      reject("", "Cannot get result from VNDetectBarcodesRequest", nil)
      return
    }
    
    let qrCodes = results.compactMap { $0.payloadStringValue }
    resolve(qrCodes)
  }
  request.symbologies = [.qr]
  
  // 3
#if targetEnvironment(simulator)
  request.revision = VNDetectBarcodesRequestRevision1
#endif
  
  // 4
  let handler = VNImageRequestHandler(cgImage: cgImage, options: [:])
  do {
      try handler.perform([request])
  } catch {
    reject("", "Error when perform request on VNImageRequestHandler: \(error.localizedDescription)", nil)
  }
}

import { launchImageLibrary, type ImageLibraryOptions } from "react-native-image-picker";
import { scanFromPath } from "react-native-qr-code-image-scan";

const onPress = useCallback(async () => {
  const option: ImageLibraryOptions = {
    mediaType: "photo",
  };
  const result = await launchImageLibrary(option);
  const uri = result?.assets?.[0]?.uri;
  if (!uri) {
    return;
  }

  const codes = await scanFromPath(uri);
  setQrCodes(codes);
}, []);

import { StatusBar } from "expo-status-bar";
import { Button, StyleSheet, Text, View } from "react-native";
import { useState, useCallback } from "react";
import { launchImageLibrary, type ImageLibraryOptions } from "react-native-image-picker";
import { scanFromPath } from "react-native-qr-code-image-scan";

export default function App() {
  const [qrCodes, setQrCodes] = useState<string[]>([]);

  const onPress = useCallback(async () => {
    const option: ImageLibraryOptions = {
      mediaType: "photo",
    };
    const result = await launchImageLibrary(option);
    const uri = result?.assets?.[0]?.uri;
    if (!uri) {
      return;
    }

    const codes = await scanFromPath(uri);
    setQrCodes(codes);
  }, []);

  return (
    <View style={styles.container}>
      <StatusBar style="dark" />
      <View style={styles.container}>
        <Text>Result: {qrCodes}</Text>
        <Button onPress={onPress} title="Open Picker" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});