Text alignment issue after adding custom font in React Native – iOS vs Android


I recently added a custom font to my React Native project, and I’m encountering an issue with text alignment in the bounding box within the Text component.

On iOS devices, the text appears shifted upwards towards the top border of the bounding box, while on Android devices, the text is correctly aligned to the center.

Here’s the code and the corresponding iOS and Android output below:

import { useFonts } from "expo-font";
import * as SplashScreen from "expo-splash-screen";
import React, { useCallback } from "react";
import { Text, View, StyleSheet } from 'react-native';

SplashScreen.preventAutoHideAsync();

export default function App() {
  const [fontsLoaded, fontError] = useFonts({
    mainReg: require("./assets/fonts/DINNextRoundedLTPro-Regular.otf"),
    mainMed: require("./assets/fonts/DINNextRoundedLTPro-Medium.otf"),
    mainBold: require("./assets/fonts/DINNextRoundedLTPro-Bold.otf"),
  });

  const onLayoutRootView = useCallback(async () => {
    if (fontsLoaded || fontError) {
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded, fontError]);

  if (!fontsLoaded && !fontError) {
    return null;
  }

  return (
    <View style={styles.container} onLayout={onLayoutRootView}>
      <View style={styles.box}>
        <Text style={styles.text}>TEXT</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
  box: {
    margin: 10,
    height: 60,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "lightblue",
  },
  text: {
    fontFamily: "mainBold",
    fontSize: 44,
    //textAlign: "center",
    backgroundColor: "red",
  },
});

enter image description here
enter image description here

I’ve tried adjusting styles and alignments, but I can’t seem to resolve this discrepancy between iOS and Android.

Could someone please provide insights or suggestions on how to ensure consistent text alignment across both iOS and Android platforms after adding a custom font in React Native? Any help or pointers would be greatly appreciated.

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img