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
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
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.