maskElement not show

[fukemy]

Hi, please help my problem, the maskview and text not show in simulator:

import React from "react";
import {
    View,
    Image,
    Dimensions,
    TouchableHighlight,
    TouchableOpacity,
    Text
} from "react-native";
import FastImage from "react-native-fast-image";
import { ThemeContext } from "../../context/ThemeContext";
import gradientParser from 'gradient-parser'
import LinearGradient from "react-native-linear-gradient";
import MaskedView from '@react-native-masked-view/masked-view';

export const RecentlyUserHeader = (props) => {
    const {theme} = React.useContext(ThemeContext)
    
    const generateUserName = (props) => {
        console.log('generateUserName', props.user.name)
        try {
            const gradient = gradientParser.parse(props.user.typeInfo.color)
            console.log('regex', gradient)
            const colors = gradient[0].colorStops.map((c) => {
                const t = c.value
                return `rgba(${t[0]}, ${t[1]}, ${t[2]}, ${[3]})`
            })
            const locations = gradient[0].colorStops.map((c) => {
                const l = c.length.value
                return l/100
            })
            // console.log('color', colors)
            return (
                <MaskedView
                    style={{ flex: 1 }}
                    maskElement={
                        <Text
                            numberOfLines={1}
                            ellipsizeMode='tail'
                            style={{
                                backgroundColor: 'red',
                                maxWidth: 120,
                                fontSize: 12,
                                fontWeight: '600',
                                color: 'black'
                        }}>cacasc</Text>
                    }>
                    <LinearGradient colors={colors} locations={locations} />
                    <View style={{backgroundColor: 'green'}}/>
                </MaskedView>
            )
        } catch(error) {
            console.log('make gradient failed', error)
            return (
                <Text
                    numberOfLines={1}
                    ellipsizeMode='tail'
                    style={{
                        maxWidth: 120,
                        fontSize: 12,
                        fontWeight: '600',
                        color: theme.defaultText
                    }}>{props.user.name}</Text>
            )
        }
    }

    return(
      <TouchableOpacity style={{
      }} onPress={() => {
        RootNavigation.push("Setting")
      }}>
        <View style={{
          flexDirection: 'column',
          justifyContent: 'center',
          backgroundColor: 'red',
          alignItems: 'center'
        }}>
          <FastImage source={{ uri: props.avt }}
            resizeMode='cover'
            size={26}
            style={{ 
              width: 26,
              height: 26,
              borderRadius: 13,
              backgroundColor: 'lightgray'
             }} />
          
             {generateUserName(props)}
        </View>
      </TouchableOpacity>
    )
  }

Log result:

generateUserName demo4
 LOG  regex [{"colorStops": [[Object], [Object], [Object]], "orientation": {"type": "angular", "value": "180"}, "type": "linear-gradient"}]

Here is the image that maskview not show

And here is the image when only display Text:

[luisfuertes]

have you been able to solve it?

[fukemy]

Yes, need width property

[GezzaoLennar]

I'm still getting this problem, adding width to MaskedView didn't help "@react-native-masked-view/masked-view": "^0.3.1", "react-native": "0.72.6", Can someone help?