CODEWITHSUNDEEP
androidcssreactjsreact-nativeflexbox
2r83
2r83

Reputation: 689

React Native ellipsizeMode - 2 Text in same line

I want to implement something like this

case 1: if text is longer than screen width

+--------------------------------------+
| very long teeeeeeeeeeeeeeeee.. (1234)|
+--------------------------------------+

case 2: if text is not longer than screen width

+--------------------------------------+
| short text (1234)                    |
+--------------------------------------+

but right now I always get result like this:

case 1: OK, first text in ellipse and 1234 next to it

+--------------------------------------+
| very long teeeeeeeeeeeeeeeee.. (1234)|
+--------------------------------------+

case 2:not OK, the 1234 text is in very right of screen

+--------------------------------------+
| short text                     (1234)|
+--------------------------------------+

this is my code right now:

   <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 first text I got something like this:

case 1: not OK, 1234 text is off the screen

+--------------------------------------+
| very long teeeeeeeeeeeeeeeeeeeeeeee..|
+--------------------------------------+

case 2:OK, now 1234 right next to first text

+--------------------------------------+
| short text (1234)                    |
+--------------------------------------+

so my question is how I implement something like my first example (1234 text is in right next to first text)?

Upvotes: 2

Views: 3138

Answers (1)

skyline_jia
skyline_jia

Reputation: 31

try to set flexShrink to first Text style?

<Text
   style={{
     ...otherStyles,
     flexShrink: 2
   }}
/>

Upvotes: 3

Related Questions