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

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

You can also use textDecorationLine

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

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