react-nativereact-native-text

How to design a text with decoration line in react-native Text

I need to add some space between the text and decoration line. Any one have anu suggestion on this?

I have set text-decoration line but it not shows space in between the text and decoration line.

like below image

snap

Also, I have set boderBottom width. It shows in the entire screen

snap

Solution

  • Unfortunately, you can't specify the space between the underline border and the text by using Text alone. But you can do it by wrapping it with View.

    <View style={{ alignSelf: 'flex-start', borderBottomColor: 'black', borderBottomWidth: 1 }}>
    <Text style={{ fontSize: 12, lineHeight: 30 }}>
      {'Lorem Ipsum dolor Siamet'}
    </Text>
</View>

    Just change the line-height to specify the space. Here is the output enter image description here