iOS: Font with family name 'F7A7BDA3-­DCC5-40DC-­A34F-E487F­47EB8C9-io­nicons' already loaded

[clems36]

Environment

SDK 31
App target: standalone

"expo": "^31.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",

Steps to Reproduce

Load the Ionicons in Index.js

import { Ionicons } from '@expo/vector-icons';
import { Font } from 'expo';

async componentDidMount() {
    const fontAssets = this.cacheFonts([Ionicons.font]);
    await Promise.all([fontAssets]);
    await Font.loadAsync({
        Roboto: require('native-base/Fonts/Roboto.ttf'),
        Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
    });
    this.setState({ fontsAreLoaded: true });
}

cacheFonts(fonts) { return fonts.map((font) => Font.loadAsync(font)); }

then

if (!fontsAreLoaded) {
    return <AppLoading />;
}

return (
    <Provider store={store}>
        <Main />
    </Provider>
);

Expected Behavior

On Android the above code does not throw any error and the icons are shown. I would expect iOS to behave the same.

Actual Behavior

I'm getting the following error through Sentry when launching the app on iOS:

Font with family name ‘F7A7BDA3-­DCC5-40DC-­A34F-E487F­47EB8C9-io­nicons’ already loaded

The app is still able to run but all the icons are missing.

I had to downgrade because of a bug (unrelated) in sdk 32 and before that, I did not have the above error in sdk 31 and I didn't even have to load the icons in Index.js, I was able to use them right away.

When switching back to sdk 32, I don't have to load the icons neither.

Thanks!

[sjchmiela]

Hey, @clems36! Thank you for submitting this issue, could you please try creating a Snack that would replicate problem you faced?

[clems36]

Hey @sjchmiela,
I've created a Snack but unfortunately the behavior is even different there. The app never seems to get past loadAsync.
In the following gif you can see that the three buttons in the Home screen are empty while icons should be displayed there:

Then sentry catches the error mentioned in the title. As i said this is only on iOS, Android works as expected.
To me the strange thing about this issue is that this never occurred before upgrading to sdk 32 and downgrading back to sdk 31. Before that, I didn't even have to load the icons manually so the code simply looked like the following and it worked.

async componentDidMount(): Promise<void> {
    await Font.loadAsync({
        Roboto: require('native-base/Fonts/Roboto.ttf'),
        Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
    });
    this.setState({ fontsAreLoaded: true });
}

[clems36]

Hey @sjchmiela, any news on this ?
Just want to add that this issue is not present on SDK 32 but that I have to run on SDK 31 because of this bug. If SDK 33 fixes it, then the font issue won't be a problem for me anymore (even though that's just avoiding the issue).
Thanks!

[clems36]

Don't know if that can help but I've just had a similar issue on a project that does not use expo and I fixed it by simply running react-native link react-native-vector-icons.

[brentvatne]

@clems36 - I don't see this error in the Snack that you linked to, it's unable to load Roboto and Roboto_medium due to how the packager works on Snack but if you remove that then it works as expected.

I suspect that the example you provided is not actually a faithful re-creation of what you're experiencing in your app. If you can provide a reproducible example I can help but I'm fairly confident that what you're describing is an issue with your code rather than the tools. Make sure you're only rendering AppLoading while fonts are loading, if you render an Icon component and then try to load that font, it'll load twice. It might be more reliable to provide a link to a Github repository where you can reproduce this since it's closer to your real project than Snack.

[mohmdalfaha]

hey @brentvatne
I am facing this same issue right after changing the imports from expo to expo-font, expo-constants, etc. in Expo v33 which i just upgraded to.

I used to load my fonts through Font.loadAsync function like so:-

Font.loadAsync({
      ...Icon.Ionicons.font,
      ...Icon.FontAwesome.font,
      ...Icon.MaterialCommunityIcons.font,
      ...Icon.MaterialIcons.font,
      ...Icon.Octicons.font,

      'Effra-Lt': require('./assets/fonts/Effra_Lt.ttf'),
      'Effra-Md': require('./assets/fonts/Effra_Md.ttf'),
      'Effra-Rg': require('./assets/fonts/Effra_Rg.ttf')

    )}

the custom fonts load perfectly but the fonts loaded first with ...Icon.fontname.font doesn't load and throw this warning:

[Unhandled promise rejection: Error: Font with family name 'A0F8DBBD-A8C4-45DF-BAD4-0A39A4A13AFC-material' already loaded]

This issue is only on iOS while works as before on Android.

[mohmdalfaha]

By just removing the @expo/vector-icons library and replacing it with the react-native-vector-icons worked fine but why? I have to change every line of code to use the react-native-vector-icons ugh :(

[brentvatne]

is that in an expokit project?

[xgenem]

Experiencing this similar issue after upgrading to the SDK 34. Although it's just a warning--it's really annoying.

[brentvatne]

@xgenem - provide reproducible example or at least answer the question that was last posted in the thread :P

[xgenem]

No. Mine's not using Expokit. Project was built using Expo though.