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

user_11528511 0
Viewed 632

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.

enter image description here

react-native-stylesheet mobile-development react-native reactjs android
1 Answers
<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

enter image description here

user_83616640
Related