Search code examples
iosreact-nativefontsgoogle-fonts

How to add custom fonts in React Native

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 fontsenter image description here

image with custom fonts

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

Solution

  • use includeFontPadding attribute, it will remove the default space

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