I’m trying to implement a native android component written in Kotlin and XML for react-native.
Kotlin class:

class AffirmButtonManager(
    private val callerContext: ReactApplicationContext
) : SimpleViewManager<ConstraintLayout>() {
    override fun getName() = REACT_CLASS

    companion object {
        const val REACT_CLASS = "AffirmButtonManager"
    }
    
    override fun createViewInstance(reactContext: ThemedReactContext): ConstraintLayout {
        val inflater = reactContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        val constraintLayout = inflater.inflate(R.layout.fragment_face_capture, null) as ConstraintLayout
        return constraintLayout
    }
}

XML file (fragment_face_capture.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
>
    
    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is text 1"
        android:textColor="#C0C0C0" 
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is text 2"
        android:textColor="#A9A9A9" 
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text1" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Importing this android component:

import {requireNativeComponent} from 'react-native';

const AffirmButtonManager = requireNativeComponent(
  'AffirmButtonManager',
) as any;

export default AffirmButtonManager;

and using this component in react native like this:

  return (
    <View style={{width: 100, height: 100}}>
      <AffirmButtonManager style={{width: '100%', height: '100%'}} />
    </View>
  );

And turned out that without setting width and height to a view and full screen width and height to my custom component the content of the custom component isn’t visible.

With width and height:

Without width and height for my custom component.

Can you guys explain how does it work and what should I do in order to make content from my custom component visible like a simple div and p html tags (or View and Text)