React-Native: How to increase space between text and underline

Question

I have followed styles:

const styles = StyleSheet.create({
    title: {
        textDecorationLine: 'underline',
        textDecorationStyle: 'solid',
        textDecorationColor: '#000'
    }
});

and it creates the underline for my content into some Text component. But it seems that this underline is too close to the text decorated with it.

Can I increase this distance in some how?

Thank you for helping!

Possible duplicate of [How to increase the gap between text and underlining in CSS](https://stackoverflow.com/questions/1734618/how-to-increase-the-gap-between-text-and-underlining-in-css) — Thomas, Jun 21 '17 at 14:42

score 26 · Accepted Answer · answered Jun 21 '17 at 15:24

26

Wrap your Text in a View that has a style containing borderBottomWidth: 1 or whatever you want the thickness to be.
Give your Text a lineHeight to adjust the spacing between the border and the content. If you have multiple lines of text, then using paddingBottom would also work.

Simple as that really. Bear in mind the View border will stretch to include any padding on the View itself.

answered Jun 21 '17 at 15:24

G0dsquad

4,230
1
17
22

can u give any style with any example – sejn Aug 29 '19 at 12:27
do you know how to decrease it ? – Abhishek Patil Jan 04 '22 at 05:40

score 2 · Answer 2 · answered Jun 21 '17 at 15:21

As of now that is not possible in React Native, cause it is also not supported in web apps i.e Css.

Link here

But there is a work around to this.

Create react View wrapper over the Text you want to adjust the underline. And then add borderBottomWidth to View and adjust the distance of underline from Text paddingBottom.

const styles = StyleSheet.create({

    viewStyle : {
      borderBottomWidth: 10, // whatever width you want of underline
   }
    title: {
        paddingBottom: 4, // Adjust the distance from your text view.
    }
});

Add the viewStyle to your parentView.

Hope that helps!

score 0 · Answer 3 · answered Jun 24 '19 at 07:42

According to me, the best possible way to do this is to add a <View /> (without content) after the <Text> and give top-border as you want your underline to be.

For example:

<Text style={{ color: 'blue' }}>Categories</Text>
<View style={{ 
    height: 0,               // height is '0' so that the view will not occupy space
    width: 100,              // as much as you want to 'Stretch' the underline
    borderTopColor: 'blue', 
    borderTopWidth: 2,       // 'Thickness' of the underline
    marginTop: 15 .          // 'Gap' between the content & the underline 
}} />

REMEMBER: This will work if the parent of your Text has flexDirection: 'column' (which is default value). But if it has flexDirection: 'row', wrap both the Text & View (i.e. underline) in another view like <View>...</View> so the items will be arranged in a column.

score 0 · Answer 4 · answered Aug 28 '19 at 06:48

0

How to give space between text and decoration line in react-native. Refer the attached image

1 with bottom border width and 2 is decoration line

answered Aug 28 '19 at 06:48

sejn

2,040
6
28
82

React-Native: How to increase space between text and underline

4 Answers4

Linked