Dynamic height based on content

[tslater]

All of the examples show heights expanding to fill containers. Is there any way to have the masked view expand/contract based on the size of text content?

[fukemy]

hi, did u solved this? The biggest problem of maskview is's requiring height for below component

[mym0404]

Render maskElement at children too. If you need, you have to hide and ignore touch event with opacity or pointerEvents

    <MaskedView maskElement={<>{children}</>} {...viewProps}>
      {/* layout purpose */}
      <View style={{ opacity: 0 }} pointerEvents={'none'}>
        {children}
      </View>
      <LinearGradient.../>
    </MaskedView>

[DmitrijPerejro]

nice

[fukemy]

Render maskElement at children too. If you need, you have to hide and ignore touch event with opacity or pointerEvents

    <MaskedView maskElement={<>{children}</>} {...viewProps}>
      {/* layout purpose */}
      <View style={{ opacity: 0 }} pointerEvents={'none'}>
        {children}
      </View>
      <LinearGradient.../>
    </MaskedView>

I think I will took more performance

[mym0404]

sure, so I use this only icon and texts.

[daeltondias]

Render maskElement at children too. If you need, you have to hide and ignore touch event with opacity or pointerEvents

    <MaskedView maskElement={<>{children}</>} {...viewProps}>
      {/* layout purpose */}
      <View style={{ opacity: 0 }} pointerEvents={'none'}>
        {children}
      </View>
      <LinearGradient.../>
    </MaskedView>

This really works for me! Thanks!