Integrating Native code with CameraX to Custom React Native Component Fails

Question

Hello I have an app that used now deprecated Camera module in android for displaying the camera view and drawing filters onto it using mlkit face detection. Recently we've decided to upgrade it to CameraX, I did all the necessary steps to make it work as a separate android app and it works. When I want to incorporate it to our existing Custom React Native module no matter what I do, it doesn't show anything on the screen. I've checked the view sizes and they seem to be ok. Below is the code I use to start the camera module.

package com.myProject.speech.components

import android.annotation.SuppressLint
import android.content.Context
import android.content.pm.PackageManager
import android.graphics.Bitmap
import android.graphics.Canvas
import android.hardware.camera2.CameraManager
import android.os.Bundle
import android.util.AttributeSet
import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.RelativeLayout
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.appcompat.app.AppCompatActivity
import androidx.camera.core.*
import androidx.camera.lifecycle.ProcessCameraProvider
import androidx.camera.view.PreviewView
import androidx.core.app.ActivityCompat
import androidx.core.content.ContextCompat
import androidx.core.view.size
import androidx.lifecycle.ViewModelProvider
import androidx.lifecycle.ViewModelStoreOwner
import com.facebook.react.uimanager.ThemedReactContext
import com.google.mlkit.common.MlKitException
import com.google.mlkit.vision.face.FaceDetectorOptions
import com.myProject.grpc.speech.StickerDatabase
import com.myProject.speech.R
import com.myProject.speech.utils.PreferenceUtils
import java.util.*
import androidx.databinding.DataBindingUtil
import com.myProject.camera_test.mlkit.facedetection.FaceContourDetectionProcessor
import com.myProject.speech.mlkit.GraphicOverlay
import java.util.concurrent.ExecutorService


class myProjectCameraView : RelativeLayout {
    private var previewView: PreviewView? = null
    private var graphicOverlay: GraphicOverlay? = null
    private var context: ThemedReactContext? = null
    private lateinit var cameraExecutor: ExecutorService
    var faceRecognitionEnabled = false
    var cameraSelector: CameraSelector? = null
    private var cameraProvider: ProcessCameraProvider? = null
    var cameraLifecycleObserver: CameraLifecycleObserver? = null
    private var lensFacing = CameraSelector.LENS_FACING_FRONT
    private lateinit var cameraManager: CameraManager
    private var imageCapture: ImageCapture? = null
    val TAG = "myProjectCameraView"

    constructor(context: ThemedReactContext,
                cameraLifecycleObserver: CameraLifecycleObserver?) : super(context) {
        this.context = context
        this.cameraLifecycleObserver = cameraLifecycleObserver;

        Log.d(TAG, "constructor Called")

        val inflater = context.getSystemService(
                Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        inflater.inflate(R.layout.live_preview, this, true)
        previewView = findViewById(R.id.firePreview)
        graphicOverlay = findViewById(R.id.fireFaceOverlay)
        if (allPermissionsGranted()) {
            startCamera()
            if (cameraLifecycleObserver != null) {
                cameraLifecycleObserver.registerActionHandler(this);
            }


        } else {
            Log.d(TAG, "Not all Permissions Granted")
        }
        this.cameraLifecycleObserver!!.registerActionHandler(this)


    }


    private fun startCamera() {
        val cameraProviderFuture = ProcessCameraProvider.getInstance(this.context as Context)

        cameraProviderFuture.addListener(Runnable {
            // Used to bind the lifecycle of cameras to the lifecycle owner
            val cameraProvider: ProcessCameraProvider = cameraProviderFuture.get()

            // Preview
            val preview = Preview.Builder()
                    .build()
                    .also {
                        it.setSurfaceProvider(previewView!!.createSurfaceProvider())
                    }

            imageCapture = ImageCapture.Builder()
                    .build()


            val imageAnalyzer = ImageAnalysis.Builder().setBackpressureStrategy(ImageAnalysis.STRATEGY_KEEP_ONLY_LATEST)
                    .build()
                    .also {
                        it.setAnalyzer(cameraExecutor, FaceContourDetectionProcessor(graphicOverlay!!))
                    }

            // Select back camera as a default
            val cameraSelector = CameraSelector.Builder()
                    .requireLensFacing(CameraSelector.LENS_FACING_FRONT)
                    .build()

            try {
                // Unbind use cases before rebinding
                cameraProvider.unbindAll()

                // Bind use cases to camera
                cameraProvider.bindToLifecycle(
                        this.context!!.currentActivity!! as AppCompatActivity, cameraSelector, preview, imageCapture, imageAnalyzer)
            } catch (exc: Exception) {
                Log.e(TAG, "Use case binding failed", exc)
            }

        }, ContextCompat.getMainExecutor(this.context as Context))
    }


    fun enableFaceRecognition(enabled: Boolean) {
        Log.d(TAG, "enableFaceRecognition Called")
        if (enabled) {
            Log.d(TAG, "With FaceRecognition")
            Log.d(TAG, "Parent size: ${this!!.measuredWidth}x${this!!.measuredHeight}")
            Log.d(TAG, "previewView sizes: ${previewView!!.measuredWidth}x${previewView!!.measuredHeight}")
            Log.d(TAG, "graphicOverlay sizes: ${graphicOverlay!!.measuredWidth}x${graphicOverlay!!.measuredHeight}")
        } else {
            Log.d(TAG, "Without FaceRecognition")
        }
    }


    fun onActivityStopped() {

        Log.d(TAG, "onActivityStopped")

    }

    fun onActivityResumed() {
        Log.d(TAG, "onActivityResumed")

    }

    fun onActivityPaused() {

        Log.d(TAG, "onActivityPaused")

    }

    fun onActivityDestroyed() {
        Log.d(TAG, "onActivityDestroyed")


    }


    private fun allPermissionsGranted(): Boolean {
        for (permission in requiredPermissions) {
            if (!isPermissionGranted(getContext(), permission)) {
                return false
            }
        }
        return true
    }


    private val requiredPermissions: Array<String?>
        private get() = try {
            val info = getContext().packageManager.getPackageInfo(
                    getContext().packageName, PackageManager.GET_PERMISSIONS)
            val ps = info.requestedPermissions
            if (ps != null && ps.size > 0) {
                ps
            } else {
                arrayOfNulls(0)
            }
        } catch (e: Exception) {
            arrayOfNulls(0)
        }


    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) {}
    constructor(context: Context?, attrs: AttributeSet?,
                defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
    }

    val viewBitmap: Bitmap
        get() {
            val v = rootView
            val b = Bitmap.createBitmap(v.layoutParams.width,
                    v.layoutParams.height,
                    Bitmap.Config.ARGB_8888)
            val c = Canvas(b)
            v.layout(v.left, v.top, v.right, v.bottom)
            v.draw(c)
            return b
        }

    private fun isPermissionGranted(context: Context,
                                    permission: String?): Boolean {
        if (ContextCompat.checkSelfPermission(context, permission!!) ==
                PackageManager.PERMISSION_GRANTED) {
            Log.i(this.TAG, "Permission granted: $permission")
            return true
        }
        Log.i(TAG, "Permission NOT granted: $permission")
        return false
    }


    companion object {
        private const val FACE_DETECTION = "Face Detection"
        private const val CLASSIFICATION = "Classification"
        private const val PERMISSION_REQUESTS = 1
        private const val lastDBPath = ""
        private var context: ThemedReactContext? = null
        val lastDB: StickerDatabase? = null
    }
}

Any insights would be very appreciated. Thanks

Answer 1

The issue happens because the relative layout is not resized after being added to the scene. The workaround is not mine, but I could not find where it was from right now so I'll just leave it here in case someone else is having the similar issue. I solved the issue by calling the layoutHack in the constructor of my RelativeLayout

 fun setupLayoutHack() {
    Choreographer.getInstance().postFrameCallback(object : Choreographer.FrameCallback {
        override fun doFrame(frameTimeNanos: Long) {
            manuallyLayoutChildren()
            viewTreeObserver.dispatchOnGlobalLayout()
            Choreographer.getInstance().postFrameCallback(this)
        }
    })
}

fun manuallyLayoutChildren() {
    for (i in 0 until childCount) {
        val child = getChildAt(i)
        child.measure(MeasureSpec.makeMeasureSpec(measuredWidth, MeasureSpec.EXACTLY),
                MeasureSpec.makeMeasureSpec(measuredHeight, MeasureSpec.EXACTLY))
        child.layout(0, 0, child.measuredWidth, child.measuredHeight)
    }
}