'react-native using custom fonts

I am using react native custom fonts and there is an issue with that. with default the text is on center and when I use a Font then text has not on center. here is code.

<TextInput 
    style={{
       height:40, 
       width:width-10, 
       margin:5, 
       backgroundColor:"#eee",
       borderRadius:5,
       paddingLeft:20,
       fontFamily:FONTS.medium  // if I comment this line then placeholder and text input is on center.
     }}
     placeholder="Search Here"
/>

Image with default fonts

note: I have checked it with multiple fonts and have same issue.

Solution 1:^[1]

use includeFontPadding attribute, it will remove the default space

<Text  style={{
     includeFontPadding: false
   }}>
     Search Here
</Text>

Solution 2:^[2]

Try if the prop includeFontPadding or lineHeight remove the spacing.

<Text
  style={{
        backgroundColor: 'red', 
        //lineHeight: 92, 
        fontSize: 24,  
        color: '#000000', 
        fontFamily: 'Roboto-Regular', 
        includeFontPadding: false}}>
        Search Here
</Text>

If this don’t work check the font itself has a spacing. Open the font file *.ttf and check if the the text has a big spacing.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Michael Bahl

'react-native using custom fonts

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]