tengo el siguiente componente

 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> ); }

Cuando hago referencia a él desde otro componente y configuro el ancho del componente contenedor por debajo de cierto valor, el texto se trunca demasiado dejando un gran espacio.

 <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>

El código anterior con ancho al 40% produce el siguiente ancho al 40%

Cuando configuro el ancho al 50% o más, el texto se trunca como lo quiero Ancho al 50%

lo que quiero es:

fondo amarillo para estirar hasta el final del contenedor rojo en todo el ancho

Tenga en cuenta que si la longitud de la etiqueta no es lo suficientemente larga como para truncarla, el color amarillo solo debe envolver el texto y no extenderse hasta el final del contenedor rojo.

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

Resultado esperado con etiqueta corta

Resultado esperado con etiqueta larga