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

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

Answer 2

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)

Answer 3

Try adding this to style

includeFontPadding:false