CODEWITHSUNDEEP
reactjscssreact-nativeflexboxreact-native-ios
mfreitas
mfreitas

Reputation: 2405

Text elipsis overflowing

I'm having a bit of trouble getting what i though to be an easy layout to achieve in react-native.

Basically i need two views, on a row, with their parent having justifyContent: 'space-between'.

On the first view there are two text components and one of them has to have an ellipsis when it grows.

What i expected:

enter image description here

What i instead get is overflowing of that text component:

enter image description here

    <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>

      <View style={{ flex: 1, flexDirection: 'row' }}>
        <Text>AVATAR</Text>
        <View style={{ marginHorizontal: 15 }}>
          <Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
        </View>
      </View>

      <View>
        <Text>9,999,999,999.99</Text>
      </View>

    </View>

A sandbox to play around with an example: https://snack.expo.io/HkeFQbyvf

Upvotes: 2

Views: 2671

Answers (2)

Asons
Asons

Reputation: 87191

If you add flex: 1 to the inner <View style={{ marginHorizontal: 15 }}> it will work

Updated code sample

  <View style={{ marginTop: 100, flexDirection: 'row', justifyContent: 'space-between' }}>

    <View style={{ flex: 1, flexDirection: 'row' }}>
      <Text>AVATAR</Text>
      <View style={{ flex: 1, marginHorizontal: 15 }}>
        <Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
      </View>
    </View>

    <View>
      <Text>9,999,999,999.99</Text>
    </View>

  </View>

Updated based on a comment

And the main reason is because the inner <View style={{ marginHorizontal: 15 }}> is a flex row item, and as such flexes horizontally and need a width, which flex: 1 provide.

If to use the default column direction, it would work w/o, e.g. like this:

  <View style={{ marginTop: 100, flexDirection: 'row', justifyContent: 'space-between' }}>

    <View style={{ flex: 1 }}>
       <View style={{ marginHorizontal: 15 }}>
        <Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
      </View>
    </View>

    <View>
      <Text>9,999,999,999.99</Text>
    </View>

  </View>

Upvotes: 5

quirinpa
quirinpa

Reputation: 47

Try adding flexShrink: 1 to the style of the first inner view

Upvotes: 2

Related Questions