React Native Text component overflows parent when inside with another view

Question

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

Max Kim · Accepted Answer · 2022-04-15 11:29:39Z

6

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

answered Apr 15, 2022 at 11:29

Max Kim

1024 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2877989 Over a year ago

It work !, but why does the flex: 1 made this magic ?

Karl Park Over a year ago

@user2877989 maybe, because flex means expand child component within parent component explicitly?

Luiz Henrique Guerra Over a year ago

this was a life saver!

Jorge · Accepted Answer · 2022-03-08 12:12:54Z

3

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.

answered Mar 8, 2022 at 12:12

Jorge

1374 bronze badges

4 Comments

HumanZero HumanZero Over a year ago

Thank you for the reply. My issue is however, that I'd like the text to resize based on how much space the box to the right takes up. So rather than setting a value for the width of the Text, I'd like to give a width to the box and have the text change based on how much space the box gives it.

Jorge Over a year ago

Yes, so my first suggestion apply: You wrap the text field in a View container. This way it will behave like a box in the context of the flex and resize the way you expect

HumanZero HumanZero Over a year ago

Unfortunately it is behaving in the same way when I wrap the text field in a view. Is there a specific styling you would recommend for the view? Feel free to try the example code if you want I think it should run. Cheers!

Jorge Over a year ago

The view that wraps the two components should be explicitly using flex AND the children components must not have a fixed width. This way the flex algo will determine the space taken for each component

Collectives™ on Stack Overflow

React Native Text component overflows parent when inside with another view

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related