React Native cuts off last word in line, but it needs to remove the entire word if it doesn't fit

user_365985 0
Viewed 509

I'd like the last element in this image to be removed, but so far I can only get it to be cut off.

enter image description here

The code is as follows:

<View style={{ flexDirection: "row", flexWrap: "nowrap", overflow: "hidden" }}>
  {item.sortedTagObjects.map(({ tag, color }) => (
    <Text
      key={tag}
      style={{
        height: 24,
        lineHeight: 24,
        paddingHorizontal: 8,
        paddingVertical: 2,
        justifyContent: "center",
        textAlign: "center",
        backgroundColor: "purple",
      }}
    >
      {tag}
    </Text>
  ))}
</View>;

When I try to make the wrapper <Text numberOfLines={1}> it looks like this:

enter image description here

react-native-stylesheet react-native
1 Answers

a quick solution would be for you to change your parent view to have a maxHeight:24 or height: 24, just like your text, and change your flexWrap to flexWrap: 'wrap' instead of nowrap.

This will allow you to only render 1 row, and hide all the wrapped items on the other rows.

aka -

<View style={{ maxHeight: 24, flexDirection: "row", flexWrap: "wrap", overflow: "hidden" }}>
  {item.sortedTagObjects.map(({ tag, color }) => (
    <Text
      key={tag}
      style={{
        height: 24,
        lineHeight: 24,
        paddingHorizontal: 8,
        paddingVertical: 2,
        justifyContent: "center",
        textAlign: "center",
        backgroundColor: "purple",
      }}
    >
      {tag}
    </Text>
  ))}
</View>;
user_48577020
Related