El componente React Native Text desborda al padre cuando está dentro con otra vista

Tengo un componente de texto que está contenido dentro de un padre de un ancho establecido junto a un pequeño cuadro negro a su derecha. Mi pregunta es ¿por qué el texto se elipse solo cuando llega al final del contenedor principal cuando se empuja el cuadro negro (su hermano)? ¿Cómo puedo hacer que el texto respete el espacio de su hermano y se elipse antes?

<View style={{height: 30, width: 200, flexDirection: "row", borderWidth: 1}}>
 <Text numberOfLines={1}>
 {"This is a very very very long sentence that is meant to elipsize"}
 </Text>
 <View style={{width: 20, height: 20, backgroundColor: "black"}} />
</View>

Así es como se ve este resultado

Solución del problema

En React Native, un componente de texto no se comporta de acuerdo con el modelo de caja. Por lo tanto, se contrae y expande según su necesidad, dadas las dimensiones del componente principal (y, a veces, lo desborda según el estilo).

Una solución fácil en tal caso es envolver el componente Texto en su propia vista. Establecer el ancho del componente Texto también funcionará.