Android fonts issue

[teckbeng-payboy]

Description

Font only get reflected on ios but not android

CodeSandbox/Snack link

Steps to reproduce

I exported the components from gluestack

import {GluestackUIProvider, SafeAreaView, Text} from './components';
import {useFonts} from 'expo-font';
import {Montserrat_400Regular} from '@expo-google-fonts/montserrat';
import {Licorice_400Regular} from '@expo-google-fonts/licorice';

export default function App() {
  const [fontsLoaded] = useFonts({
    Montserrat_400Regular,
    Licorice_400Regular,
  });

  return (
    <GluestackUIProvider>
      <SafeAreaView justifyContent="center" alignItems="center" flex={1}>
        <Text fontFamily="$heading">Hello World!</Text>
        <Text fontFamily="$body">Hello World!</Text>
      </SafeAreaView>
    </GluestackUIProvider>
  );
}

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

 "dependencies": {
    "@expo-google-fonts/hind": "^0.2.3",
    "@expo-google-fonts/kolker-brush": "^0.2.3",
    "@expo-google-fonts/licorice": "^0.2.3",
    "@expo-google-fonts/montserrat": "^0.2.3",
    "@gluestack-style/react": "^1.0.56",
    "@gluestack-ui/config": "latest",
    "@gluestack-ui/themed": "^1.1.30",
    "expo": "^51.0.0",
    "expo-font": "~12.0.7",
    "react": "18.2.0",
    "react-native": "0.74.2",
    "react-native-svg": "13.4.0"
  },

gluestack-ui Version

1.1.30

Platform

• [ ] Expo
• [X] React Native CLI
• [ ] Next
• [ ] Web
• [ ] Android
• [ ] iOS

Other Platform

No response

Additional Information

[jordmccord]

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

[teckbeng-payboy]

do you have any idea where can i find the example for FontResolver?

[doranakan]

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

[doranakan]

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

[ltsharma]

Is it reloved for anyone? I can see this issue even today!