'React Native Text component overflows parent when inside with another view

I have a text component which is contained within a parent of a set width alongside a small black box to its right. My question is why does the text elipsise only when it reaches the end of the parent container when the black box (its sibling) is pushed out? How can I make the text respect the space of its sibling and elipsise earlier?

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

This is what this result looks like

enter image description here

react-nativeflexbox


Solution 1:[1]

In React Native, a Text component does not behave according to the box model. So it shrinks and expands according to its need, given the dimensions of the parent component (and sometimes overflowing it depending on the styling).

An easy fix in such case is to wrap the Text component in its own view. Setting the Text component width will also work.

Solution 2:[2]

Just you need to wrap the Text component into a View with { flex: 1 } style. It should help:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jorge
Solution 2 Max Kim

Related Questions