React NativeのNative Moduleでカメラ起動させてみた（iOS/Swift）

#import "AppDelegate.h"
#import <React/RCTBridgeModule.h>
#import <React/RCTViewManager.h>

#import <Foundation/Foundation.h>
#import <React/RCTUIManager.h>
#import <React/RCTEventEmitter.h>

#import <React/RCTBridge.h>
#import <React/RCTRootView.h>

#ifndef {project name}-_Bridging_Header_h
#define {project name}-_Bridging_Header_h

#endif

#import <Foundation/Foundation.h>

#import <React/RCTViewManager.h>
#import <React/RCTUtils.h>

// React NativeでCameraViewManagerをモジュールとして利用できるようにする
@interface RCT_EXTERN_REMAP_MODULE(CameraView, CameraViewManager, RCTViewManager)

// React NativeからNativeに渡したいデータや関数
RCT_EXPORT_VIEW_PROPERTY(onBack, RCTDirectEventBlock);

// Naiveで記述した関数をReact Nativeで利用できるようにする
RCT_EXTERN_METHOD(requestCameraPermission:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject);                                       

@end

import AVFoundation
import Foundation

@objc(CameraViewManager) // Objective-C側でこのクラスを読み込めるようにする
final class CameraViewManager: RCTViewManager { // UI Componentを利用したい場合はRCTViewManagerを継承する

  override var methodQueue: DispatchQueue! {
    return DispatchQueue.main
  }

  override static func requiresMainQueueSetup() -> Bool {
    return true
  }

  override final func view() -> UIView! {
    return CameraView()　// React Nativeでコンポーネントとして扱いたいViewを返す
  }
  
  @objc　// Objective-C側で読み込めるようにする
  final func requestCameraPermission(_ resolve: @escaping RCTPromiseResolveBlock, reject _: @escaping RCTPromiseRejectBlock) {
　　　　　　　　// カメラの権限を要求する
    AVCaptureDevice.requestAccess(for: .video) { granted in
      let result: AVAuthorizationStatus = granted ? .authorized : .denied
      resolve(result.descriptor)
    }
  }
}

import AVFoundation
import Foundation
import UIKit
import React

public final class CameraView: UIView {
  @objc var onBack: RCTDirectEventBlock?

  internal let captureSession = AVCaptureSession()
  internal let videoPreviewLayer = AVCaptureVideoPreviewLayer()
  
  internal var myDevice: AVCaptureDevice!
  internal let devices = AVCaptureDevice.devices()
  internal let screenWidh: CGFloat = UIScreen.main.bounds.size.width
  internal let screenHeight: CGFloat = UIScreen.main.bounds.size.height
  internal var flashMode: AVCaptureDevice.FlashMode = AVCaptureDevice.FlashMode.off
    
  internal let wrapperView: UIView = UIView()
  internal let cameraScreenView: UIView = UIView()
  internal let closeButton: UIButton = UIButton()
  internal let takeButton: UIButton = UIButton()
  internal let nextButton: UIButton = UIButton()

  override public init(frame: CGRect) {
    super.init(frame: frame)
    // Viewのレイアウトをセット
    setLayout()
    // videoPreviewLayerにカメラの映像を反映する
    configureCaptureSession()
  }

  @available(*, unavailable)
  required init?(coder _: NSCoder) {
    fatalError("init(coder:) is not implemented.")
  }
  
  // 背面カメラから写っている情報を取得してcaptureSessionに追加する
  private func configureCaptureSession() {
    #if targetEnvironment(simulator)
      invokeOnError(.device(.notAvailableOnSimulator))
      return
    #endif

    captureSession.beginConfiguration()
    defer {
      captureSession.commitConfiguration()
    }

    do {
      for device in devices {
        if(device.position == "back"){
          myDevice = device
          break
        }
      }
      
      guard myDevice != nil else {
        // error処理
        return
      }
      
      deviceInput = try AVCaptureDeviceInput(device: myDevice)
      guard captureSession.canAddInput(deviceInput!) else {
        // error処理
        return
      }
      captureSession.addInput(deviceInput!)
    } catch {
      invokeOnError(.device(.invalid))
      return
    }

    // 写真撮影に利用する（本記事では対象外）
    photoOutput = AVCapturePhotoOutput()

    guard captureSession.canAddOutput(photoOutput!) else {
      // error処理
      return
    }
    captureSession.addOutput(photoOutput!)
　　　　　　　　captureSession.startRunning()
  }
 
  // 本ClassのViewに対して子Viewを追加してレイアウトを整える
  private func setLayout() {
    wrapperView.frame = CGRect(x: 0, y: 50, width: screenWidh, height: screenHeight - 50)
    cameraScreenView.frame = CGRect(x: 0, y: 100, width: screenWidh, height: screenWidh * 1.33333333)
    
    // カメラから取得した情報を表示するようにする
    videoPreviewLayer.session = captureSession
    videoPreviewLayer.frame = layer.bounds
    videoPreviewLayer.videoGravity = AVLayerVideoGravity.resizeAspectFill
    
    cameraScreenView.layer.addSublayer(videoPreviewLayer)
    
    setButtons()
    wrapperView.addSubview(cameraScreenView)
    
    addSubview(wrapperView)

  }
  
  // ボタンのレイアウト
  private func setButtons() {    
    nextButton.frame = CGRect(x: screenWidh - 130, y: screenHeight - 200, width: 100, height: 50)
    nextButton.setTitle("次へ", for: .normal)
    nextButton.backgroundColor = .red
    nextButton.setTitleColor(.white, for: .normal)
    nextButton.layer.cornerRadius = 10
    nextButton.addTarget(self, action: #selector(self.goNext(_:)), for: UIControl.Event.touchUpInside)
    
    closeButton.frame = CGRect(x: 0, y: 10, width: 50, height: 50)
    closeButton.setTitle("閉じる", for: .normal)
    closeButton.setTitleColor(.white, for: .normal)
    closeButton.addTarget(self, action: #selector(self.goBack(_:)), for: UIControl.Event.touchUpInside

    takeButton.frame = CGRect(x: 0, y: screenHeight - 200, width: 100, height: 100)
　　　　　　　　takeButton.setTitle("撮影", for: .normal)
    takeButton.setTitleColor(.white, for: .normal)
    takeButton.center.x = wrapperView.center.x
    
    wrapperView.backgroundColor = UIColor.black
    wrapperView.addSubview(takeButton)
    wrapperView.addSubview(nextButton)
    wrapperView.addSubview(closeButton)
    
    addSubview(wrapperView)
  }
  
  // 閉じるボタンタップ時のイベント
  @objc
  func goBack(_ sender: UIButton){
    guard let onBack = onBack else {
      return
    }
    onBack(nil)
  }

  // 次へボタンタップ時のイベント
  // 次節で説明します  
  @objc
  func goNext(_ sender: UIButton){
    CameraEvent.shared?.onCameraEvent()
  }
}