CODEWITHSUNDEEP
react-native
Varun Gupta
Varun Gupta

Reputation: 3122

React Native - Fix styling to avoid text overlapping with button on the same line

I am struggling with the right styles to avoid overlapping between a long text that should contain within one line or show ellipsis and some other buttons that should also show up on the same line in the app. The issue can be seen in the below sketch on Expo

https://snack.expo.io/Bk449wmAe

Below is the code for the component

  <View style={{flexDirection: 'row', marginTop: 50}}>
    <View style={{flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      marginVertical: 5}}>
      <Text style={{marginHorizontal: 5, overflow: 'hidden'}} numberOfLines={1}>{'Varun Gupta Varun Gupta Varun Gupta Varun Gupta'}</Text>
      <Text style={{fontSize: 10, fontStyle: 'italic'}}>{'Creator'}</Text>
    </View>
    <TouchableOpacity style={{alignSelf: 'center', padding: 5}}>
      <Text>{'Call'}</Text>
    </TouchableOpacity>
    <TouchableOpacity style={{alignSelf: 'center', padding: 5}}>
      <Text>{'Message'}</Text>
    </TouchableOpacity>
</View>

If you load the app, you would notice that name is overlapping the Call and Message buttons which it should not. I want the Creator text to stick with the name and the Call and Message buttons to appear on the far right. For e.g. if you were to reduce the name to just Varun Gupta, it appears as expected with the Creator text sticking with the name and the Call and Message appearing on the far right. If the name is too long to fit in one line, then I want to show however much would fit on one line followed by the Creator string followed by the two buttons. I have tried various different combinations in styling without any success. I am not sure why would the text overflow into the buttons that are present on the same line. When I inspected the elements in the Inspector, it appears that the View containing the name and the Creator text is sized properly but the Text component containing the name is going out of bounds and I am not sure how to fix it.

If I add flex: 1 to the <Text style={{marginHorizontal: 5, overflow: 'hidden'}} numberOfLines={1}>{'Varun Gupta Varun Gupta Varun Gupta Varun Gupta'}</Text>, it fixes the width but then if the name is just Varun Gupta, Creator string doesn't stick with the name but appears on the far right which is expected but not desired.

Please help with the styling.

Upvotes: 0

Views: 6245

Answers (1)

James
James

Reputation: 510

You can use lodash/truncate to add an ellipsis at the end of the name:

const name = _.truncate('Some really long name that should be truncated', { separator: ' ', length: 25 })

then...

<Text style={{marginHorizontal: 5, overflow: 'hidden'}} numberOfLines={1}>{name}></Text>

https://snack.expo.io/r1W-6omCg

Upvotes: 1

Related Questions