iOS Development

Textual content alignment difficulty after including customized font in React Native – iOS vs Android

Spread the love


I just lately added a customized font to my React Native venture, and I am encountering a difficulty with textual content alignment within the bounding field inside the Textual content part.

On iOS gadgets, the textual content seems shifted upwards in the direction of the highest border of the bounding field, whereas on Android gadgets, the textual content is accurately aligned to the middle.

Here is the code and the corresponding iOS and Android output under:

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

SplashScreen.preventAutoHideAsync();

export default operate App() {
  const [fontsLoaded, fontError] = useFonts({
    mainReg: require("./property/fonts/DINNextRoundedLTPro-Common.otf"),
    mainMed: require("./property/fonts/DINNextRoundedLTPro-Medium.otf"),
    mainBold: require("./property/fonts/DINNextRoundedLTPro-Daring.otf"),
  });

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

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

  return (
    <View model={types.container} onLayout={onLayoutRootView}>
      <View model={types.field}>
        <Textual content model={types.textual content}>TEXT</Textual content>
      </View>
    </View>
  );
}

const types = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "middle",
  },
  field: {
    margin: 10,
    peak: 60,
    justifyContent: "middle",
    alignItems: "middle",
    backgroundColor: "lightblue",
  },
  textual content: {
    fontFamily: "mainBold",
    fontSize: 44,
    //textAlign: "middle",
    backgroundColor: "crimson",
  },
});

enter image description here
enter image description here

I’ve tried adjusting types and alignments, however I can not seem to resolve this discrepancy between iOS and Android.

Might somebody please present insights or strategies on how to make sure constant textual content alignment throughout each iOS and Android platforms after including a customized font in React Native? Any assist or pointers can be significantly appreciated.

Leave a Reply

Your email address will not be published. Required fields are marked *