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

Question

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

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

Answer 1

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

Answer 2

Here is a simple workaround to fix this problem of text border going throughout the screen width. Wrap it in a View with flexDirection:"row".

<View style={{
        flexDirection:"row"
      }}>
        <Text
        style={{
          borderBottomWidth:1,
          paddingBottom:3

        }}
        >
        My Text
        </Text>

      </View>

https://snack.expo.io/@ammarahmed/grounded-watermelon

For it to work on android and ios use the following method. You need to use TextInput for it to work. Whatever you want to write, write it in value and set editable to false

<View style={{
            flexDirection:"row"

          }}>
            <TextInput
            style={{
              borderBottomWidth:1,
              paddingBottom:3,
              borderBottomColor:"black",
            }}
            editable={false}
            value="My Text"
            />

          </View>

Answer 3

Add a View and give margin for the view and add border for the View.

<View style={{borderWidth:1,bordercolor:"Black",marginBottom:2}}>
<Text style={{fontSize:12}>28.Aug 2019</Text>
</View>

Answer 4

You can also use textDecorationLine

<Text style={{ fontSize: 18, textDecorationLine: 'underline' }}>28.Aug 2019</Text>

See the snack: https://snack.expo.dev/@abranhe/textdecorationline