React Native - 文本被截断太多

Question

I have the following component

const InputLabel => (props: InputLabelProps) {
    return (
        <Animated.View
            style={[
                StyleSheet.absoluteFill,
                {
                    justifyContent: 'flex-start',
                    flexDirection: 'row',
                    backgroundColor: 'red',
                    alignItems: 'center',
                },
            ]}
        >
            <Animated.Text
                onLayout={onLayoutAnimatedText}
                numberOfLines={1}
                ellipsizeMode="tail"
                textBreakStrategy={'highQuality'}
                style={[
                    animatedLabelContainerStyle,
                    {
                        textAlign: 'right',
                        fontSize: fontSize,
                        color: labelColor,
                        backgroundColor: 'yellow',
                    },
                ]}
            >
                {label}
            </Animated.Text>
        </Animated.View>
    );
}

When I reference it from another component and I set the width of wrapper component below a certain value the text is truncated too much leaving a big gap.

<View style={{ width: '40%', height: 50, borderWidth: 1, backgroundColor: 'yellow' }}>
                <InputLabel
                    fontSize={16}
                    hasOutline={false}
                    label={'label 12345678901234567890123456789012345678901234567890'}
                    // labelAnimatedValue={labelAnimation}
                    labelColor={'black'}
                    labelLayout={labelLayout}
                    OffsetY={2} //container borderWidth
                    placeholderColor={'red'}
                    showPlaceholder={false}
                    onLayoutAnimatedText={handleLayoutAnimatedText}
                />
</View>

The code above with width at 40% produces the below Width at 40%

When I set width at 50% or greater the text is truncated how I want it Width at 50%

What I want is:

yellow background to stretch to the end of the red container at all width

Please note if the label length is not long enough to be truncated the yellow color should only wrap text and not stretch to end of red container

Snack: https://snack.expo.dev/@danro/inputlabel

Expected result with short label

Expected result with long label

Answer 1

Did you try to use it with flex ? I would try to give flex:1 .

Answer 2

You can either add flex: 1 or width:"100%" to the text..

---

edit :

in InputLabel.tsx remove flexDirection: row and alignItems: center from Animated View

Answer 3

Try:

<Text
     {...props}
     numberOfLines={1}
     ellipsizeMode={'head' | 'middle' | 'tail' | 'clip'}
     onPress={props.onPress}
     style={style.textStyle}>
     Some long long long text
  </Text>