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!

Answer 1

1. Wrap your Text in a View that has a style containing borderBottomWidth: 1 or whatever you want the thickness to be.

2. 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.

Answer 2

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!