I am using Expo 51 and I’m encountering a problem while using React Native’s TextInput.
It seems that there’s some unwanted space below the text when using custom fonts. The fonts itself are coming from Expo’s Google Fonts (Poppins).
The fonts itself behave correctly in a Text component. But not in a TextInput.
Screenshot
I tried using textAlignVertical prop and setting the value to the bottom, yet it’s still the same. I was expecting it to look like this (this was using the default fontFamily).
<RNTextInput
style={{
width: 200,
fontFamily: 'Poppins_400Regular',
fontSize: 30,
backgroundColor: "rgb(245 245 245)"
}}
textAlignVertical={'bottom'}
multiline={false}
/>
Just to clarify RNTextInput is not a custom component, it’s just a renamed TextInput from react-native.
RasyaJusticio is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
This might be a a common issue related to font metrics. It can happen that custom fonts have different ascent and descent values, and it can affect how text is vertically aligned within components like TextInput.
I would first try to set lineHeight Equal to fontSize that ensures that the line height matches the size of your text, eliminating extra spacingg.
Then you can set paddingVertical to 0: Removes any vertical padding that might contribute to additional space…
<RNTextInput
style={{
width: 200,
fontFamily: 'Poppins_400Regular',
fontSize: 30,
lineHeight: 30, // ->> Match this to your fontSize
paddingVertical: 0, // ->> Remove vertical padding
backgroundColor: 'rgb(245 245 245)',
}}
textAlignVertical="center" // ->> You can also try "center" or "top"
multiline={false}
/>
You can also force programatically set the height of the TextInput to match the fontSize.
style={{
height: 30,
...
}}
I think what the other answer says about the includeFontPadding would work only on android devices, where you can use the includeFontPadding prop to remove additional padding added by the font. However, this prop is available only for the Text component, not TextInput. 🙁
You can also double check this problem with different font to see what’s going on.
In Android some fonts have own padding. Add includeFontPadding: false to your styles solve this issue.
2