React-Native: How to increase space between text and underline
Wrap your
Text
in aView
that has a style containingborderBottomWidth: 1
or whatever you want the thickness to be.Give your
Text
alineHeight
to adjust the spacing between the border and the content. If you have multiple lines of text, then usingpaddingBottom
would also work.
Simple as that really. Bear in mind the View
border will stretch to include any padding on the View
itself.
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!