Embedding Native Android CameraX in React native always shows black screen

[BraveEvidence]

I am trying to embed a Native Android View in my React Native application, i am using the new architecture

So here is my sample code

class ReactMyCamera: ConstraintLayout {

    private var viewFinder: PreviewView = PreviewView(context)
    private var mCameraProvider: ProcessCameraProvider? = null
    private lateinit var cameraExecutor: ExecutorService

    private var imageCapture: ImageCapture? = null
    private var button: Button = Button(context)


    companion object {
        private const val FILENAME_FORMAT = "yyyy-MM-dd-HH-mm-ss-SSS"
    }



    constructor(context: Context) : super(context) {
        configureComponent(context)
    }

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

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

    private fun configureComponent(context: Context) {

        val constraintLayoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )
        layoutParams = constraintLayoutParams

        val constraintSet = ConstraintSet()
        constraintSet.clone(this)


        viewFinder.id = View.generateViewId()

        viewFinder.layoutParams = ConstraintLayout.LayoutParams(
            ConstraintLayout.LayoutParams.MATCH_CONSTRAINT,
            ConstraintLayout.LayoutParams.MATCH_CONSTRAINT
        )


        addView(viewFinder)
        constraintSet.constrainWidth(viewFinder.id,ConstraintSet.MATCH_CONSTRAINT)
        constraintSet.constrainHeight(viewFinder.id,ConstraintSet.MATCH_CONSTRAINT)
        constraintSet.connect(viewFinder.id,ConstraintSet.LEFT,ConstraintSet.PARENT_ID,ConstraintSet.LEFT)
        constraintSet.connect(viewFinder.id,ConstraintSet.RIGHT,ConstraintSet.PARENT_ID,ConstraintSet.RIGHT)
        constraintSet.connect(viewFinder.id,ConstraintSet.TOP,ConstraintSet.PARENT_ID,ConstraintSet.TOP)
        constraintSet.connect(viewFinder.id,ConstraintSet.BOTTOM,ConstraintSet.PARENT_ID,ConstraintSet.BOTTOM,200)

        button.id = View.generateViewId()
        button.text = "Take Photo"
        button.layoutParams = ConstraintLayout.LayoutParams(
            ConstraintLayout.LayoutParams.MATCH_CONSTRAINT,
            ConstraintLayout.LayoutParams.WRAP_CONTENT
        )
        button.setBackgroundColor(Color.YELLOW)
        button.setTextColor(Color.RED)
        addView(button)
        constraintSet.constrainWidth(button.id,ConstraintSet.MATCH_CONSTRAINT)
        constraintSet.constrainHeight(button.id,ConstraintSet.WRAP_CONTENT)
        constraintSet.connect(button.id,ConstraintSet.LEFT,ConstraintSet.PARENT_ID,ConstraintSet.LEFT)
        constraintSet.connect(button.id,ConstraintSet.RIGHT,ConstraintSet.PARENT_ID,ConstraintSet.RIGHT)
        constraintSet.connect(button.id,ConstraintSet.BOTTOM,ConstraintSet.PARENT_ID,ConstraintSet.BOTTOM,20)


        setupLayoutHack()
        manuallyLayoutChildren()

        constraintSet.applyTo(this)

        button.setOnClickListener {
            takePhoto()
        }


        setUpCamera(context)
    }

    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
        super.onLayout(changed, left, top, right, bottom)
        manuallyLayoutChildren()
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        measureChildren(widthMeasureSpec, heightMeasureSpec)
    }


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

    private 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)
        }
    }

....
}

Now the problem is i don't see the Camera, the button occupies entire width and height if the screen, Now when i use the same code in Native Android it works absolutely fine

Clone this repo

npm install

cd android

./gradlew generateCodegenArtifactsFromSchema

yarn react-native run-android --active-arch-only

Now I decided to refactor the code to remove ConstraintLayout

class ReactMyCamera: FrameLayout {

    private var viewFinder: PreviewView = PreviewView(context)
    private lateinit var button: Button

    private var mCameraProvider: ProcessCameraProvider? = null
    private lateinit var cameraExecutor: ExecutorService

    private var imageCapture: ImageCapture? = null


    companion object {
        private const val FILENAME_FORMAT = "yyyy-MM-dd-HH-mm-ss-SSS"
    }



    constructor(context: Context) : super(context) {
        configureComponent(context)
    }

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

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

    private fun configureComponent(context: Context) {

        viewFinder.layoutParams = FrameLayout.LayoutParams(
            LayoutParams.MATCH_PARENT,
            LayoutParams.MATCH_PARENT
        )
        installHierarchyFitter(viewFinder)
        addView(viewFinder)

        // Create Button
        button = Button(context).apply {
            id = View.generateViewId()
            text = "Start"
            elevation = 2f
            layoutParams = FrameLayout.LayoutParams(
                FrameLayout.LayoutParams.WRAP_CONTENT,
                FrameLayout.LayoutParams.WRAP_CONTENT
            ).apply {
                gravity = Gravity.BOTTOM or Gravity.CENTER_HORIZONTAL
                bottomMargin = 10
            }
        }
        addView(button)

    }


    private val REQUIRED_PERMISSIONS = mutableListOf(Manifest.permission.CAMERA).apply {
        if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.P) {
            add(Manifest.permission.WRITE_EXTERNAL_STORAGE)
        }
    }.toTypedArray()

    private fun allPermissionsGranted() = REQUIRED_PERMISSIONS.all {
        ContextCompat.checkSelfPermission(
            context, it) == PackageManager.PERMISSION_GRANTED
    }

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        if(allPermissionsGranted()){
            Toast.makeText(context, "Permissions already granted", Toast.LENGTH_SHORT).show()

            viewFinder.post { setUpCamera(context) }
        } else {
            Toast.makeText(context, "Permissions not granted", Toast.LENGTH_SHORT).show()
        }


    }




    // If this is not called correctly, view finder will be black/blank
    // https://github.com/facebook/react-native/issues/17968#issuecomment-633308615
    private fun installHierarchyFitter(view: ViewGroup) {
         // only react-native setup
            view.setOnHierarchyChangeListener(object : OnHierarchyChangeListener {
                override fun onChildViewRemoved(parent: View?, child: View?) = Unit
                override fun onChildViewAdded(parent: View?, child: View?) {
                    parent?.measure(
                        MeasureSpec.makeMeasureSpec(measuredWidth, MeasureSpec.EXACTLY),
                        MeasureSpec.makeMeasureSpec(measuredHeight, MeasureSpec.EXACTLY)
                    )
                    parent?.layout(0, 0, parent.measuredWidth, parent.measuredHeight)
                }
            })

    }

I tried doing following things as well

override fun requestLayout() {
super.requestLayout()
post(measureAndLayout)
}

private val measureAndLayout = Runnable {
measure(
MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
)
layout(left, top, right, bottom)
}

private val measureAndLayout = Runnable { measure( MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY) ) layout(left, top, right, bottom) }

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { var maxWidth = 0 var maxHeight = 0 for (i in 0 until childCount) { val child = getChildAt(i) if (child.visibility != GONE) { child.measure(widthMeasureSpec, MeasureSpec.UNSPECIFIED) maxWidth = maxWidth.coerceAtLeast(child.measuredWidth) maxHeight = maxHeight.coerceAtLeast(child.measuredHeight) } } val finalWidth = maxWidth.coerceAtLeast(suggestedMinimumWidth) val finalHeight = maxHeight.coerceAtLeast(suggestedMinimumHeight) setMeasuredDimension(finalWidth, finalHeight) (context as ThemedReactContext).runOnNativeModulesQueueThread { (context as ThemedReactContext).getNativeModule(UIManagerModule::class.java) ?.updateNodeSize(id, finalWidth, finalHeight) } }

 override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) { super.onLayout(changed, left, top, right, bottom) manuallyLayoutChildren() }

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { super.onMeasure(widthMeasureSpec, heightMeasureSpec) measureChildren(widthMeasureSpec, heightMeasureSpec) }

override fun requestLayout() { super.requestLayout() post(measureAndLayout) }

private val measureAndLayout = Runnable {
    measure(
        MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
        MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
    )
    layout(left, top, right, bottom)
}

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    var maxWidth = 0
    var maxHeight = 0
    for (i in 0 until childCount) {
        val child = getChildAt(i)
        if (child.visibility != GONE) {
            child.measure(widthMeasureSpec, MeasureSpec.UNSPECIFIED)
            maxWidth = maxWidth.coerceAtLeast(child.measuredWidth)
            maxHeight = maxHeight.coerceAtLeast(child.measuredHeight)
        }
    }
    val finalWidth = maxWidth.coerceAtLeast(suggestedMinimumWidth)
    val finalHeight = maxHeight.coerceAtLeast(suggestedMinimumHeight)
    setMeasuredDimension(finalWidth, finalHeight)
    (context as ThemedReactContext).runOnNativeModulesQueueThread {
        (context as ThemedReactContext).getNativeModule(UIManagerModule::class.java)
            ?.updateNodeSize(id, finalWidth, finalHeight)
    }
}

Tried using relativelayout as well but still the Preview is not available and all I see is a black screen.

The camera permission is given properly , when I try to use the same code in Native Android app it works fine