Open teckbeng-payboy opened 3 months ago
You need to use the FontResolever
(see end of https://gluestack.io/ui/docs/guides/advanced/fonts) or use something like expo-xml-font
https://github.com/Armster15/expo-xml-font
do you have any idea where can i find the example for FontResolver?
do you have any idea where can i find the example for FontResolver?
just found something in the gluestack.io/style docs
in my case I have the following scenario:
//in my home _layout:
const [fontLoaded] = useFonts({
Grenze_700Bold,
NotoSerif_400Regular,
NotoSerif_700Bold
})
so in the gluestack createConfig
I'm passing to the FontResolver mapFonts
field a function that transform this ugly input i'm getting from the callback
{"fontFamily": "Grenze", "fontWeight": "700"}
{"fontFamily": "NotoSerif", "fontStyle": "normal", "fontWeight": "400"}
{"fontFamily": "NotoSerif", "fontStyle": "normal", "fontWeight": "bold"}
into
'Grenze_700Bold'
'NotoSerif_400Regular'
'NotoSerif_700Bold'
by doing this I solved the issue with Android, on iOS it was working without this thing
actually after applying some changes I realised there are still some issues with custom fonts and android, for example if I apply a custom fontFamily
via prop to a Heading
, all other Heading
components start using the same font even if they are no customized
Description
Font only get reflected on ios but not android
CodeSandbox/Snack link
-
Steps to reproduce
I exported the components from gluestack
In the gluestack-ui.config.ts file, i changed below line to
fonts: { heading: 'licorice', body: 'licorice', mono: 'montserrat', },
Attached below is my package.json
gluestack-ui Version
1.1.30
Platform
Other Platform
No response
Additional Information