Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to wrap react native's child elements in native android view?

$
0
0

I am trying to create a native android view for gradient but wrapping the child elements in native android view causes problem

My native code

class CealGradientView(context: Context): View(context)class CealGradientManager(private val reactApplicationContext: ReactApplicationContext):    SimpleViewManager<CealGradientView>() {    private val cealGradientView = "CealGradientView"    override fun getName() = cealGradientView    override fun createViewInstance(reactContext: ThemedReactContext): CealGradientView {        return CealGradientView(reactContext)    }    @ReactProp(name = "colors")    fun setColors(view: CealGradientView, color: ReadableArray) {        val colorsCollection: ArrayList<Int> = ArrayList()        for (i in 0 until color.size()) {            colorsCollection.add(Color.parseColor(color.getString(i)))        }        val colors = colorsCollection.stream().mapToInt { i -> i }.toArray()        val gradientDrawable = GradientDrawable(            GradientDrawable.Orientation.TOP_BOTTOM,            colors        )        view.background = gradientDrawable    }}

In react-native I am trying to use it as follows

<CealGradientView colors={[theme.Primary_50, theme.Information]} style={styles.linearGradient}><View style={styles.topSpacerView} /><Image resizeMode={RESIZE_MODE_CENTER} source={CealLogo} /><View style={styles.bottomSpacerView} /></CealGradientView>

I get error saying

CealGradientView cannot be cast to android.view.ViewGroup

If I try replacing View with LinearLayout on the native side

class CealGradientView(context: Context): LinearLayout(context)

I get error saying

CealGradientView cannot be cast to com.facebook.react.uimanager.ViewGroupManager

enter image description here

enter image description here

I want to allow CealGradientView to have children components from react-native side


Viewing all articles
Browse latest Browse all 6287

Trending Articles



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