React Native Android Text Component extra padding

Question

I was wondering why am getting these weird padding on my Text in react-native. I tried every thing to just get a perfect text but nothing seems to work the only thing that worked was paddingVertical and paddingHorizontal but it's way too hacky and not reliable.

<Text numberOfLines={1} 
      style={{
            backgroundColor: 'red', 
            lineHeight: 92, 
            textAlign: 'center', 
            textAlignVertical: 'center', 
            padding: 0, 
            margin: 0, 
            fontSize: 92,  
            color: '#2d76ff', 
            fontFamily: 'Roboto-Regular', 
            includeFontPadding: false}}>
      {this.state.documents}
</Text>

Zeplin

Screenshot from my HTC

Resorcinol

Can you update your question to add a bit more information? Where exactly is the extra padding you are trying to remove in your screenshot? – Powel

Are you using a custom font (I don't think Roboto is default)? Is this behavior specific to either Android or iOS? I had a similar problem on Android where I found a kind of hacky solution: stackoverflow.com/questions/41570343 – Tonatonal

Answer 1

I stumbled onto this issue because I was experiencing the same. The text component has a prop called includeFontPadding. You can set it to false to remove the extra padding.

Check the React Native Docs for reference: https://facebook.github.io/react-native/docs/text-style-props#includefontpadding

Asa

I had no idea this was a thing - this will save me a ton of headaches in future. Thanks! – Proliferous

Answer 2

Try adding this to style

includeFontPadding:false

Quarrelsome

I am not sure why this isn't a default style. – Unionize

Agreed — Spent hours trying to figure out why fonts aligned perfectly on iOS and not Android. – Fairminded

Perfect Solution!!!! – Neddra

Answer 3

Additional: Every add or remove includeFontPadding property, should refresh(press r) on metro server(in my case react native 0.66 and use own font family)

Fishing

Welcome to SO. Please make sure your answer is easy to read and understand and that it is directly related to the question. – Imco