React Native Text component overflows parent when inside with another view

user_8701651 0
Viewed 803

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

flexbox react-native
2 Answers

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.

user_145944890

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"}} />
user_101655210
Related