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",
},
});
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.






