Search code examples
react-nativeexpo

Unwanted spacing with custom fonts in TextInput

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.

Solution

  • 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.