[Android]Font Rendering in React native

[bhavikat6]

I have one cursive font. This font is visible outside of my TextInput and also outside of the text component in React native IOS but in Android, if the letter is curved on the left it is cropped from the left whether its TextInput or Text
I tried adding padding butthe font itself is cropping but it is only Android Can someone please help me

<TextInput textBreakStrategy="simple" style={[ { fontFamily: CUSTOM_FONT, textAlign: 'left', fontSize: 16, color: 'black', height: 50, width: 100, lineHeight: 25, textAlignVertical: 'top', includeFontPadding: false, padding: 0, } ]}
This is in Android

In IOS

[bhavikat6]

Hi Can someone aware how to fix it for Android?

[kushagras652]

Try to create a custom component which that adjusts based on platform

const CustomTextInput = (props) => {
const isAndroid = Platform.OS === 'android';

return (
<TextInput
textBreakStrategy="simple"
style={[
{
fontFamily: CUSTOM_FONT,
textAlign: 'left',
fontSize: 16,
color: 'black',
height: 50,
width: 100,
lineHeight: 25,
textAlignVertical: 'top',
includeFontPadding: false,
padding: 0,
paddingLeft: isAndroid ? 10 : 0, // Only add padding on Android
},
props.style,
]}
{...props}
/>
);
};
Hope this works

[bhavikat6]

Hey @kushagras652 Thank you for feedback but padding also not working its not about TextInput overall in the application this letter is causing issue