EllipsizeMode doesn't work in react-native application

Question

I have a fairly complicated structure of elements created dynamically that are displayed in a limited space.

<View style={{overflow: "hidden", flexWrap: "nowrap"}}>
  <Text numberOfLines="1" ellipsizeMode="tail">
    <Text numberOfLines="1" ellipsizeMode="tail" flexGrow="1" flexShrink="1">
      </ AvatarImg>
      <Text>Name of user</Text>
      <Text>action of user</Text>
      </ AvatarImg>
      <Text>Name of different user</Text>
      <Text>action of user possibly very very long</Text>
    </Text>
  </Text>
</View>

I expect that no matter how long the content of the inner text is, it will be truncated with "..." at the end once it reaches the edge of the available space. Overflow is hidden, but I see no "...".

What am I missing there?

I read RN Text docs to verify that numberOfLines must be set in conjunction with ellipsizeMode. I played with the elements and tried to change their style / props, but I still can't figure out what am I missing.

Answer 1

For three dots, only 'numberOfLines' is sufficient. If you cannot see the three dots, you may check the view style you are using; perhaps the view is not horizontally stretched to full width, causing it to shift to the right. This can sometimes be attributed to padding.

Answer 2

Use the number for numberOfLines instead of string.

<Text numberOfLines={1} ellipsizeMode="tail">
  ...
</Text>