Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1675

Native android component in React Native doesn't have his own space like height

$
0
0

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:enter image description here

Without width and height for my custom component.enter image description here

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)


Viewing all articles
Browse latest Browse all 1675

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>