Search code examples
androidreact-nativefonts

Font is not vertically centred in React Native Android

When I unset the font-family property the text is centred, so it must be an issue with the font I'm using which is Google's Poppins.

I've found similar issues around using custom fonts

though interestingly the trouble with those are with iOS and not Android. I thought I cracked it with these steps:

  1. Install Font Tools for Xcode 14
  2. Run ftxdumperfuser -t OS/2 -A d Poppins-Medium.ttf to produce Poppins-Medium.OS_2.xml
  3. Modify typoAscender and typoDescender properties inside the xml
  4. Apply the xml changes to the font with ftxdumperfuser -t OS/2 -A f Poppins-Medium.ttf

Though I later found that this only resolves the vertical alignment issue with Android phones using Android API level 33. Android phones using API level 32 <= are completely unaffected by this change, and I cannot find a fix for this or any change regarding fonts in the android api release notes. I also have doubts that the solution I have tried is the correct one, given that the font I'm using is one of Google's.

Android API level 33 with my patched Poppins font (centred): Android API level 33 with my patched Poppins font (centred)

Android API level 32 with my patched Poppins font (not centred): Android API level 32 with my patched Poppins font (not centred)

Android API level 32 with system font (centred): Android API level 32 with system font (centred)

I am running a yarn create expo-app project, with Poppins fonts install under /assets/fonts/ and the following App.js file:

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

import { useFonts } from "expo-font";

export default function App() {
  const [fontsLoaded] = useFonts({
    "Poppins-Medium": require("./assets/fonts/Poppins-Medium.ttf"),
  });

  if (!fontsLoaded) {
    return null;
  }

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <View style={{ borderWidth: 1, borderRadius: 500 }}>
        <Text style={{ fontFamily: "Poppins-Medium" }}>Hello</Text>
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

What am I missing here to have Poppins fonts vertically aligned for Android API level 32<= ?

Solution

  • I searched this through the Internet and found a possible answer. It's working for me perfectly

    Just add <item name="android:includeFontPadding">false</item> in the style.xml (/android/app/src/main/res/values/styles.xml) file and rebuild the app.

    For more information https://github.com/google/fonts/issues/3457