How to avoid extra white space with custom fonts in Text components on Android

Question

I have a cross platform button for a react-native project.

the style for said button is:

btn_text: {
  color: "#fff",
  fontSize: "20rem",
  fontFamily: "BungeeInline-Regular",
  textAlign: "center"
},
btn: {
  paddingTop: "10rem",
  paddingBottom: "10rem",
  paddingHorizontal: "15rem",
  marginTop: "15rem",
  marginHorizontal: "20rem",
  backgroundColor: "#333",
  "@media ios": {
    borderRadius: 50
  },
  "@media android": {
    borderRadius: 50,
    elevation: 4
  },
  borderColor: "#fff",
  borderWidth: 0
}

The component is:

const XplatformButton = ({ text, onPress }) => {
  if (Platform.OS === "ios") {
    return (
      <TouchableHighlight
        onPress={onPress}
        style={styles.btn}
        underlayColor={styles.$buttonColorUnderlay}
      >
        <Text style={styles.btn_text}>{text}</Text>
      </TouchableHighlight>
    );
  }
  return (
    <TouchableOpacity onPress={onPress} style={styles.btn}>
      <Text style={styles.btn_text}>{text}</Text>
    </TouchableOpacity>
  );
};
export default XplatformButton;

The component renders as expected on iOS: iOS_with_font

however it renders with too much white space on Android: Android_with_font

but without a font designated renders as: Android_without_font

How can this extra space be eliminated on android while keeping the custom google font?

Answer 1

There is a style property that's active on Android only . It's called 'includeFontPadding'. It's a boolean. set it to false to remove included white space.