I am trying to achieve a layout similar to the following scenarios:
Case 1: If the text is longer than the screen width
+--------------------------------------+
| very long teeeeeeeeeeeeeeeee.. (1234)|
+--------------------------------------+
Case 2: If the text is not longer than the screen width
+--------------------------------------+
| short text (1234) |
+--------------------------------------+
However, my current output is as follows:
Case 1: The first text is truncated with ellipsis and '1234' is next to it
+--------------------------------------+
| very long teeeeeeeeeeeeeeeee.. (1234)|
+--------------------------------------+
Case 2: The '1234' text aligns far right of the screen
+--------------------------------------+
| short text (1234)|
+--------------------------------------+
This is the code I am using:
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Text
style={[styles.placeNameStyles, { flex: 1 }]}
numberOfLines={1}
ellipsizeMode='tail'
onPress={() => this.props.onPlaceNamePress()}
>
{this.props.text}
</Text>
<Text style={styles.distanceStyles}>
(1234)
</Text>
</View>
If I remove flex: 1 from the first text element, the output changes:
Case 1: '1234' text overflows off the screen
+--------------------------------------+
| very long teeeeeeeeeeeeeeeeeeeeeeee..|
+--------------------------------------+
Case 2: '1234' now aligns correctly next to the first text
+--------------------------------------+
| short text (1234) |
+--------------------------------------+
My question is, how can I achieve a layout where '1234' text is positioned right next to the first text?