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.
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)
