Troubleshooting fonts in React Native

1
I am having trouble getting custom fonts to work on Native. Is there a way to troubleshoot? should they be visible in deployment/native? can I run some script to check if they are being loaded in? When they are loaded into the package, does the package manager need to re-distribute the package? (I don't control the app package making) Resources used: https://docs.mendix.com/howto8/mobile/native-custom-fonts/   https://vstram.medium.com/how-to-configure-custom-fonts-in-a-mendix-native-mobile-android-application-97d049ec40f4  
asked
2 answers
1

ok so some updates:
the file name needs to be the same as the “postscriptname” this can be found with fontbook(mac) or nexusfont(win).

it seems that the default values in core/typography can not be overwritten (as of yet).

 

so having a class like this does make the font bold.

export const postscript = { //working on android and ios
    text: {
        fontFamily: openSansFontFamily.bold,
    }
};

overriding the default styles with the following:

export const TextHeading1 = {
    container: {},
    text: {
        fontFamily: openSansFontFamily.bold,
        color: 'red',
    }
};

does make it red, but not bold.

answered
0

Hello Jason

 

I’m the author of the medium article you mentioned above. Thanks for the reference!

Indeed fonts are tricky in Mendix Mobile...

 

In my app, I managed to use bold, italic, and colored fonts, defining the JScript Style classes in the main.js

Please see the sources as an additional reference:

https://github.com/vstram/mx_custom_font.git

https://github.com/vstram/mx_custom_font_template.git

 

Also, I use the npx react-devtools to inspect the rendered code in the device.

 

You can even change the settings in the tree and see the results “live” in your device! It’s very cool!

answered