react-native : How to remove vertical spacing in

Question

In react native default when I use some large fontsize I got vertical spacing. I tried lineHeight but after giving exact lineHeight equals to fontSize it just remove spacing from top not from bottom. I have added the border to see the diff.

<Text 
    style={{
            fontSize: 40,
            lineHeight: 40, 
            textTransform: 'uppercase',
            borderWidth: 1
    }}
>
      Account
</Text>

I want to add some fix margin from top and bottom but that extra space added up and making more gap between elements. and I don't know how much this spacing is so I can add/sub it from original margin.

Note: I am just doing it for android now.

Remove the lineHeight is not an option?, because that prop gives you the space that you say — enzou, Mar 10 '22 at 13:43
@enzou I tried it as well but it doesn't make any difference — Afzal Ali, Mar 10 '22 at 17:24

Hetali Adhia · Answer 1 · 2022-03-10T11:25:57.150

1

<Text
    style={{
      fontSize: 40,
      textTransform: 'uppercase',
      borderWidth: 1,
      alignItems: 'center',
      justifyContent: 'center',
      textAlign: 'center',
      margin: 50,
      alignSelf: 'flex-start'
    }}
  >
    Account
  </Text>

I think you need output like this

edited Mar 10 '22 at 11:25

answered Mar 10 '22 at 10:40

Hetali Adhia

506
3
13

2

No, I need to remove that vertical spacing between text and border – Afzal Ali Mar 10 '22 at 11:09
@AfzalAli I edited my answer please check now – Hetali Adhia Mar 10 '22 at 11:26
1

@Hetail I think you didn't understand the question. I just want to remove vertical spacing not horizontal. Neither I wan't to position Text anywhere like you did justifiyContent center etc. – Afzal Ali Mar 10 '22 at 11:42

score 0 · Answer 2 · answered Jan 03 '23 at 18:17

0

In your case, the vertical spacing is set by the line height (there is no margin or padding).

Set the line height to 0.

Removing the line height declaration does not remove the line height, it implicitly sets it to a default value.

answered Jan 03 '23 at 18:17

Cress

434
7
23

react-native : How to remove vertical spacing in

2 Answers2