React Native Text numberOfLines 1 text runs off screen

Issue

I have a simple contact list where I want to show the last messages. But unfortunately the text runs off the screen. This is my code:

(the readableTimestamp should be behind the text.)

View
  style={{
    fontSize: 16,
    backgroundColor: Green,
    flexDirection: "row",
    flex: 1,
  }}>
  <Text
    numberOfLines={1}
    style={{
      flex: 1,
      fontSize: 16,
    }}>
    {item.message}
  </Text>
  <View style={{marginRight: 20, backgroundColor: Yellow}}>
    <Text style={{fontSize: 16, color: 'blue'}}>{item.readableTimestamp}</Text>
  </View>
</View>

Solution

You could try something like:

<View
  style={{
    fontSize: 16,
    backgroundColor: Green,
    justifyContent: "space-between",
    flexDirection: "row",
    flex: 1,
  }}
>
  <View style={{flex: 1}}>
    <Text numberOfLines={1} style={{fontSize: 16}}>
      {item.message}
    </Text>
  </View>
  <View style={{marginRight: 20, width: 50, backgroundColor: Yellow}}>
    <Text style={{fontSize: 16, color: 'blue'}}>{item.readableTimestamp}</Text>
  </View>
</View>

I think putting the text inside a view and giving the timestamp a dedicated width will force the text to ellipsize. space-between also will force the timestamp to the end of the row.

Answered By - Abe