fix(ios): replace QRCodeReader with custom implementation (#677)

Author: tido64

.clang-format

@@ -12,8 +12,6 @@ IncludeBlocks: Regroup
 IncludeCategories:
   - Regex: '"pch\.h"'
     Priority: -1
-  - Regex: '^<QRCodeReader'
-    Priority: 4
   - Regex: '^<React'
     Priority: 4
   - Regex: '^<[._a-z]+>'

example/ios/Podfile.lock

@@ -62,7 +62,6 @@ PODS:
   - glog (0.3.5)
   - libevent (2.1.12)
   - OpenSSL-Universal (1.1.180)
-  - QRCodeReader.swift (10.1.0)
   - RCT-Folly (2020.01.13.00):
     - boost-for-react-native
     - DoubleConversion
@@ -354,7 +353,6 @@ DEPENDENCIES:
   - FlipperKit/FlipperKitUserDefaultsPlugin (~> 0.75.1)
   - FlipperKit/SKIOSNetworkPlugin (~> 0.75.1)
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
-  - QRCodeReader.swift
   - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
   - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
   - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`)
@@ -398,7 +396,6 @@ SPEC REPOS:
     - FlipperKit
     - libevent
     - OpenSSL-Universal
-    - QRCodeReader.swift
     - SwiftLint
     - YogaKit
 
@@ -483,7 +480,6 @@ SPEC CHECKSUMS:
   glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
-  QRCodeReader.swift: 373a389fe9a22d513c879a32a6f647c58f4ef572
   RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c
   RCTRequired: d34bf57e17cb6e3b2681f4809b13843c021feb6c
   RCTTypeSafety: 8dab4933124ed39bb0c1d88d74d61b1eb950f28f

ios/ReactTestApp.xcodeproj/project.pbxproj

@@ -11,7 +11,7 @@
 		192DD201240FCAF5004E9CEB /* Manifest.swift in Sources */ = {isa = PBXBuildFile; fileRef = 192DD200240FCAF5004E9CEB /* Manifest.swift */; };
 		196C22622490CB7600449D3C /* React+Compatibility.m in Sources */ = {isa = PBXBuildFile; fileRef = 196C22602490CB7600449D3C /* React+Compatibility.m */; };
 		196C7215232F1788006556ED /* ReactInstance.swift in Sources */ = {isa = PBXBuildFile; fileRef = 196C7214232F1788006556ED /* ReactInstance.swift */; };
-		196C724123319A85006556ED /* QRCodeReaderDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 196C724023319A85006556ED /* QRCodeReaderDelegate.swift */; };
+		196C724123319A85006556ED /* QRCodeScannerViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 196C724023319A85006556ED /* QRCodeScannerViewController.swift */; };
 		1988284524105BEC005057FF /* UIViewController+ReactTestApp.m in Sources */ = {isa = PBXBuildFile; fileRef = 1988284424105BEC005057FF /* UIViewController+ReactTestApp.m */; };
 		19A624A4258C95F000032776 /* Session.swift in Sources */ = {isa = PBXBuildFile; fileRef = 19A624A3258C95F000032776 /* Session.swift */; };
 		19ECD0D6232ED425003D8557 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 19ECD0D5232ED425003D8557 /* AppDelegate.swift */; };
@@ -51,7 +51,7 @@
 		196C7207232EF5DC006556ED /* ReactTestApp-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "ReactTestApp-Bridging-Header.h"; sourceTree = "<group>"; };
 		196C7214232F1788006556ED /* ReactInstance.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ReactInstance.swift; sourceTree = "<group>"; };
 		196C7216232F6CD9006556ED /* ReactTestApp.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = ReactTestApp.entitlements; sourceTree = "<group>"; };
-		196C724023319A85006556ED /* QRCodeReaderDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = QRCodeReaderDelegate.swift; sourceTree = "<group>"; };
+		196C724023319A85006556ED /* QRCodeScannerViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = QRCodeScannerViewController.swift; sourceTree = "<group>"; };
 		1988282224105BCC005057FF /* UIViewController+ReactTestApp.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = "UIViewController+ReactTestApp.h"; sourceTree = "<group>"; };
 		1988284424105BEC005057FF /* UIViewController+ReactTestApp.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = "UIViewController+ReactTestApp.m"; sourceTree = "<group>"; };
 		19A624A3258C95F000032776 /* Session.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = Session.swift; sourceTree = "<group>"; };
@@ -122,7 +122,7 @@
 				19ECD0D7232ED425003D8557 /* SceneDelegate.swift */,
 				19ECD0D9232ED425003D8557 /* ContentView.swift */,
 				192DD200240FCAF5004E9CEB /* Manifest.swift */,
-				196C724023319A85006556ED /* QRCodeReaderDelegate.swift */,
+				196C724023319A85006556ED /* QRCodeScannerViewController.swift */,
 				196C7214232F1788006556ED /* ReactInstance.swift */,
 				19A624A3258C95F000032776 /* Session.swift */,
 				196C7207232EF5DC006556ED /* ReactTestApp-Bridging-Header.h */,
@@ -336,7 +336,7 @@
 				19ECD0D6232ED425003D8557 /* AppDelegate.swift in Sources */,
 				19ECD0DA232ED425003D8557 /* ContentView.swift in Sources */,
 				192DD201240FCAF5004E9CEB /* Manifest.swift in Sources */,
-				196C724123319A85006556ED /* QRCodeReaderDelegate.swift in Sources */,
+				196C724123319A85006556ED /* QRCodeScannerViewController.swift in Sources */,
 				1914199A234B2DD800D856AE /* RCTDevSupport+UIScene.m in Sources */,
 				196C22622490CB7600449D3C /* React+Compatibility.m in Sources */,
 				196C7215232F1788006556ED /* ReactInstance.swift in Sources */,

ios/ReactTestApp/ContentView.swift

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-import QRCodeReader
+import AVFoundation
 import UIKit
 
 private struct NavigationLink {
@@ -44,9 +44,6 @@ final class ContentViewController: UITableViewController {
     private let reactInstance: ReactInstance
     private var sections: [SectionData]
 
-    // swiftlint:disable:next weak_delegate
-    private lazy var qrCodeReaderDelegate = QRCodeReaderDelegate()
-
     public init() {
         reactInstance = ReactInstance()
         sections = []
@@ -256,20 +253,51 @@ final class ContentViewController: UITableViewController {
         }()
         return "React Native version: \(version)"
     }
+}
 
+extension ContentViewController {
     @objc
     private func scanForQRCode(_: Notification) {
-        let builder = QRCodeReaderViewControllerBuilder {
-            $0.reader = QRCodeReader(
-                metadataObjectTypes: [.qr],
-                captureDevicePosition: .back
+        switch AVCaptureDevice.authorizationStatus(for: .video) {
+        case .notDetermined:
+            AVCaptureDevice.requestAccess(for: .video) { [weak self] granted in
+                if granted {
+                    DispatchQueue.main.async {
+                        self?.navigationController?.present(QRCodeScannerViewController(), animated: true)
+                    }
+                }
+            }
+
+        case .restricted:
+            let alert = UIAlertController(
+                title: "Restricted Camera Access",
+                message: """
+                You've been restricted from using the camera on this device. \
+                Without camera access, this feature won't work. Please contact \
+                the device owner so they can give you access.
+                """,
+                preferredStyle: .alert
+            )
+            alert.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
+            navigationController?.present(alert, animated: true)
+
+        case .denied:
+            let alert = UIAlertController(
+                title: "Camera Access Needed",
+                message: "To scan QR codes, please enable camera access in Settings.",
+                preferredStyle: .alert
             )
-            $0.showSwitchCameraButton = false
-            $0.showOverlayView = true
-            $0.rectOfInterest = CGRect(x: 0.2, y: 0.3, width: 0.6, height: 0.4)
+            alert.addAction(UIAlertAction(title: "Open Settings", style: .default) { _ in
+                UIApplication.shared.open(URL(string: UIApplication.openSettingsURLString)!)
+            })
+            alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
+            navigationController?.present(alert, animated: true)
+
+        case .authorized:
+            navigationController?.present(QRCodeScannerViewController(), animated: true)
+
+        @unknown default:
+            fatalError()
         }
-        let viewController = QRCodeReaderViewController(builder: builder)
-        viewController.delegate = qrCodeReaderDelegate
-        present(viewController, animated: true)
     }
 }

ios/ReactTestApp/QRCodeReaderDelegate.swift

@@ -0,0 +1,148 @@
+import AVFoundation
+import Foundation
+import UIKit
+
+final class QRCodeScannerViewController: UIViewController, AVCaptureMetadataOutputObjectsDelegate {
+    private lazy var captureSession = AVCaptureSession()
+    private lazy var previewLayer = AVCaptureVideoPreviewLayer(session: captureSession)
+    private lazy var feedback = UINotificationFeedbackGenerator()
+
+    // MARK: - UIViewController overrides
+
+    override func viewWillTransition(to size: CGSize, with _: UIViewControllerTransitionCoordinator) {
+        previewLayer.frame.size = size
+
+        if let captureConnection = previewLayer.connection,
+           captureConnection.isVideoOrientationSupported
+        {
+            captureConnection.videoOrientation = UIDevice.current.videoOrientation
+        }
+    }
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        view.backgroundColor = .black
+
+        guard let videoCaptureDevice = AVCaptureDevice.default(.builtInWideAngleCamera, for: .video, position: .back),
+              let videoInput = try? AVCaptureDeviceInput(device: videoCaptureDevice),
+              captureSession.canAddInput(videoInput)
+        else {
+            return
+        }
+
+        captureSession.addInput(videoInput)
+
+        let metadataOutput = AVCaptureMetadataOutput()
+        guard captureSession.canAddOutput(metadataOutput) else {
+            fatalError()
+        }
+
+        captureSession.addOutput(metadataOutput)
+        metadataOutput.setMetadataObjectsDelegate(self, queue: DispatchQueue.main)
+        metadataOutput.metadataObjectTypes = [.qr]
+
+        previewLayer.frame = view.layer.bounds
+        previewLayer.videoGravity = .resizeAspectFill
+        view.layer.addSublayer(previewLayer)
+    }
+
+    override func viewWillAppear(_ animated: Bool) {
+        super.viewWillAppear(animated)
+
+        if captureSession.isRunnable {
+            captureSession.startRunning()
+            feedback.prepare()
+        } else {
+            let alert = UIAlertController(
+                title: "Cannot Start Scanner",
+                message: """
+                This device does not support scanning QR codes. Please use \
+                another device with a camera.
+                """,
+                preferredStyle: .alert
+            )
+            alert.addAction(UIAlertAction(title: "OK", style: .default) { [weak self] _ in
+                self?.dismiss(animated: true)
+            })
+            present(alert, animated: true)
+        }
+    }
+
+    override func viewWillDisappear(_ animated: Bool) {
+        super.viewWillDisappear(animated)
+
+        if captureSession.isRunning {
+            captureSession.stopRunning()
+        }
+    }
+
+    override var prefersStatusBarHidden: Bool {
+        true
+    }
+
+    // MARK: - AVCaptureMetadataOutputObjectsDelegate details
+
+    func metadataOutput(_: AVCaptureMetadataOutput,
+                        didOutput metadataObjects: [AVMetadataObject],
+                        from _: AVCaptureConnection)
+    {
+        captureSession.stopRunning()
+        defer {
+            dismiss(animated: true)
+        }
+
+        if let metadataObject = metadataObjects.first {
+            guard let readableObject = metadataObject as? AVMetadataMachineReadableCodeObject,
+                  let stringValue = readableObject.stringValue,
+                  let urlComponents = URLComponents(string: stringValue)
+            else {
+                feedback.notificationOccurred(.error)
+                return
+            }
+
+            feedback.notificationOccurred(.success)
+
+            NotificationCenter.default.post(
+                name: .didReceiveRemoteBundleURL,
+                object: self,
+                userInfo: ["url": urlComponents]
+            )
+        }
+    }
+}
+
+// MARK: - Extensions
+
+extension AVCaptureSession {
+    var isRunnable: Bool {
+        !inputs.isEmpty && !outputs.isEmpty && !isRunning
+    }
+}
+
+extension Notification.Name {
+    static let didReceiveRemoteBundleURL = Notification.Name("didReceiveRemoteBundleURL")
+}
+
+extension UIDevice {
+    var videoOrientation: AVCaptureVideoOrientation {
+        switch orientation {
+        case .unknown:
+            return .portrait
+        case .portrait:
+            return .portrait
+        case .portraitUpsideDown:
+            return .portraitUpsideDown
+        case .landscapeLeft:
+            // Flipped otherwise the picture is upside down
+            return .landscapeRight
+        case .landscapeRight:
+            // Flipped otherwise the picture is upside down
+            return .landscapeLeft
+        case .faceUp, .faceDown:
+            return .portrait
+        @unknown default:
+            return .portrait
+        }
+    }
+}

ios/ReactTestApp/QRCodeScannerViewController.swift

@@ -231,9 +231,7 @@ final class ReactInstance: NSObject, RCTBridgeDelegate {
 
     @objc
     private func onRemoteBundleURLReceived(_ notification: Notification) {
-        guard let value = notification.userInfo?["value"] as? String,
-              var urlComponents = URLComponents(string: value)
-        else {
+        guard var urlComponents = notification.userInfo?["url"] as? URLComponents else {
             return
         }
 

ios/ReactTestApp/ReactInstance.swift

@@ -325,7 +325,6 @@ def use_test_app_internal!(target_platform, options)
   react_native_post_install = nil
 
   target 'ReactTestApp' do
-    pod 'QRCodeReader.swift' if target_platform == :ios
     pod 'SwiftLint'
 
     react_native_post_install = use_react_native!(project_root, target_platform, options)

ios/test_app.rb

@@ -12,8 +12,6 @@ IncludeBlocks: Regroup
 IncludeCategories:
   - Regex: '"pch\.h"'
     Priority: -1
-  - Regex: '^<QRCodeReader'
-    Priority: 4
   - Regex: '^<React'
     Priority: 4
   - Regex: '^<[._a-z]+>'