How to remove unwanted padding under React Native Text component?

user_4876564 0
Viewed 3914

I'm trying to make a text component with a color background and very thin padding. Like this:

enter image description here

However, the RN Text component has some sort of extra padding at the bottom that I don't know how to remove (and I don't know how this kind of text padding is called).

I tried setting lineHeight to the same as the fontSize, setting negative padding and margin, but the padding is always there.

Here is what I get:

fontSize: 50, lineHeight: 50

enter image description here

fontSize: 50, lineHeight: 40

enter image description here

This is happening on both iOS and Android. How to remove it???

This is my text component for reference:

<Text style={{
    backgroundColor: someDarkGreen;
    color: cyan;
    fontSize: 50;
    lineHeight: 50;
    textTransform: uppercase;
    fontWeight: bold;
    paddingHorizontal: 10;
    alignSelf: flex-start;
    marginBottom: 30;
    marginLeft: 30;
  }}
/>
react-native
2 Answers

I still don't have a "clean answer" for my question, but since it's continuously getting upvotes I'll share my workaround.

I wrap the <Text> in a <View>, and put the background style on the View. Then I translateY the Text so it appears centered on the View background:

<View
  style={{
    backgroundColor: 'purple',
    paddingHorizontal: 10,
    height: 50, // <------------------------- adjust background height here
  }}
>
  <Text
    style={{
      color: 'pink',
      fontSize: 50,
      lineHeight: 50,
      textTransform: 'uppercase',
      fontWeight: 'bold',
      alignSelf: 'flex-start',
      transform: [{ translateY: 5 }], // <-----  adjust text position here
    }}
  >
    Hello
  </Text>
</View>

Note: Using marginTop: 5 instead of transform: [{ translateY: 5 }] to adjust the Text position also works, as long as the View has a fixed height.

This allows to have the thin vertical padding effect I was looking for when I originally posted the question. It looks nice on both iOS and Android:

enter image description here

user_48765640

I know this is late to answer, But maybe helpful for the new one..

Adding lineHeight:30/20; is the key

<Text style={{
    backgroundColor: someDarkGreen;
    color: cyan;
    fontSize: 50;
    lineHeight: 50;
    textTransform: uppercase;
    fontWeight: bold;
    paddingHorizontal: 10;
    alignSelf: flex-start;
    marginBottom: 30;
    marginLeft: 30;
    lineHeight:30;
  }}
/>

Happy coding

user_57755910
Related