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

Possible duplicate of [React-Native: How to increase space between text and underline](https://stackoverflow.com/questions/44679155/react-native-how-to-increase-space-between-text-and-underline) — Mohammed Alawneh, Aug 29 '19 at 13:07

I Putu Yoga Permana · Accepted Answer · 2019-08-30T04:48:11.610

3

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

edited Aug 30 '19 at 04:48

answered Aug 29 '19 at 13:05

I Putu Yoga Permana

3,980
29
33

It showing the line length is long after the text get ended – sejn Aug 29 '19 at 13:14
could you elaborate it more? @sejn – I Putu Yoga Permana Aug 29 '19 at 13:15
Refer this image. I need to show the borderBottomline only for the text alone not for the device width. https://i.stack.imgur.com/UhIhp.png – sejn Aug 29 '19 at 13:19
can you show the full code you use? It may be related to how you wrap above sample code. Try set the parent View style to `alignItems` or `justifyContent` and avoid `flex: 1` – I Putu Yoga Permana Aug 29 '19 at 13:23
I not used flex:1 for this view. But I have used another view above this. There I have used flex – sejn Aug 29 '19 at 13:33
time ( this._renderItems(item) )} /> Date – sejn Aug 29 '19 at 13:55
I also tried with another text which not have any flex:1 in that screen. But it not worked as expected – sejn Aug 29 '19 at 14:13
2

found the problem, I updated the answer, just add `alignSelf: 'flex-start'` to your `` style will fix your issue. See this screenshot https://imgur.com/W1neB4g @sejn – I Putu Yoga Permana Aug 30 '19 at 04:49
kindly mark this as the answer, if you were able to resolve it @sejn :D – I Putu Yoga Permana Sep 03 '19 at 07:50

Abraham · Answer 2 · 2023-06-23T19:42:55.743

1

You can also use textDecorationLine

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

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

edited Jun 23 '23 at 19:42

answered Mar 03 '22 at 07:50

Abraham

8,525
5
47
53

score 0 · Answer 3 · answered Aug 29 '19 at 13:02

0

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>

answered Aug 29 '19 at 13:02

Dhivakar Ragupathy

86
5

Ammar Ahmed · Answer 4 · 2019-08-30T06:26:06.123

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>

I have updated it with fix which works on IOS and Android Both — Ammar Ahmed, Aug 30 '19 at 06:26

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

4 Answers4