Question 323556 in React native Question posted in
The official React Native documentation can be found here.

React native – EllipsizeMode doesn't work in react-native application

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    Use the number for numberOfLines instead of string.

    <Text numberOfLines={1} ellipsizeMode="tail">
  ...
</Text>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search