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

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? — Irfan Ayaz, Jan 13 '17 at 03:07
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: http://stackoverflow.com/questions/41570343 — henkimon, Jan 16 '17 at 18:21

score 22 · Accepted Answer · answered May 18 '19 at 17:36

22

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

answered May 18 '19 at 17:36

Wilfred Mulenga

378
3
10

I had no idea this was a thing - this will save me a ton of headaches in future. Thanks! – boz Sep 16 '19 at 14:27

score 8 · Answer 2 · answered Jun 29 '20 at 20:10

8

Try adding this to style

includeFontPadding:false

answered Jun 29 '20 at 20:10

el2e10

1,518
22
22

1

I am not sure why this isn't a default style. – Hyo Mar 16 '21 at 01:52
Agreed — Spent hours trying to figure out why fonts aligned perfectly on iOS and not Android. – Crashtor Jun 09 '21 at 12:49
Perfect Solution!!!! – Ali Raza Feb 05 '22 at 09:54

Andrel Sitanggang · Answer 3 · 2022-10-07T18:20:41.063

0

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)

edited Oct 07 '22 at 18:20

answered Oct 07 '22 at 18:17

Andrel Sitanggang

1
1

Welcome to SO. Please make sure your answer is easy to read and understand and that it is directly related to the question. – Till - Appviewer.io Oct 18 '22 at 10:17

React Native Android Text Component extra padding

3 Answers3