How to handle differences in font sizes across different devices with a React Native app

0
Hi community,   I'm currently building a Native App for which I use two custom fonts. I test my app with Android Studio using a Google Pixel 7 emulator. All looks well in the emulator, but you feel it coming.. After making a iOS built and opening the app, the text is completely out of proportion. The fonts are way too large, which makes it wrap in weird ways or even makes it completely invisible. Now, how would one handle the difference in font sizes across different devices?
asked
3 answers
1

You can always opt to write device specific styling for iOS and Android. It's a bit of a hassle, but it can work.

 

import {Platform} from 'react-native';

export const font = {
    sizeH1: Platform.OS === 'ios' ? 40 : 36,
});

 

Or you can do it like this:

import {Platform} from 'react-native';

export const font = ({
    ...Platform.select({
      ios: {
        sizeH1: 40,
      },
      android: {
        sizeH1: 36,
      },
      default: {
        // other platforms, web for example
        sizeH1: 32,
      },
    }),
});

 

You can read more information about this here: https://reactnative.dev/docs/platform-specific-code

 

Good luck!

 

Maurits

answered
0

Did you read this part of the documentation https://docs.mendix.com/refguide/mobile/designing-mobile-user-interfaces/images-icons-and-fonts/#31-introduction-to-fonts-in-mendix-native-mobile-apps

Regards,

Ronald

 

answered
0

Hi all,

 

I noticed what is causing the 'issue'. The adjustFont method in the custom variables does a calculation which multiplies the font size depending on the pixel density of the device. This is probably built in such a way that it works well for the system fonts, but when using custom fonts, it might not look the way you expect.

 

For now, I decided to stay with the system fonts and only use the custom font for page titles.

 

Thanks for your help fellas.

answered