react-native : How to remove vertical spacing in <Text>

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.

Answer 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

Answer 2

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.