CODEWITHSUNDEEP
androidreactjsreact-nativemobile-developmentreact-native-stylesheet
Afzal Ali
Afzal Ali

Reputation: 1056

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

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

Upvotes: 5

Views: 3500

Answers (2)

Cress
Cress

Reputation: 432

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.

Upvotes: -1

Hetali Adhia
Hetali Adhia

Reputation: 552

<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

Upvotes: 1

Related Questions