How to load “ionicons” font in expo sdk33?

Hi all,
after upgrading to expo sdk 33.0.0, when i build my react native expo app everything is ok but as soon as the app starts the the following error shows up:

fontFamily “ionicons” is not a system font and has not been loaded through Font.loadAsync

before the update i was using the sdk version 32.0.0 and everything was ok. I tried to add the font as explained here https://docs.expo.io/versions/latest/guides/using-custom-fonts/ in my app.js componentDidMount function:

const Ionicons = require("./fonts/Ionicons.ttf");
...
componentDidMount() {
    ...
    Font.loadAsync({
        "Avenir-Book": AvenirBook,
        "Avenir-Light": AvenirLight,
        "Ionicons": Ionicons,
    })
}
...

also try to change the name in the loadAsync from “Ionicons” to “ionicons” but nothing changed.

The “Ionicons.ttf” inside the fonts folder file was copied from the node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts folder

Any help is appreciated, Thanks

same here.

same…
how can i solve it?

I’ve found a messy and temporary workaround to get Ionicons working again in sdk33.
Here are the steps I took:

  • Downgrade @expo/vector-icons to ^9.0.0
  • Upgrade expo to ^33.0.7
  • Run the following commands in project root directory
cp -r node_modules/@expo/vector-icons/vendor node_modules/expo/node_modules/@expo/vector-icons

cp -r node_modules/expo/node_modules/@expo/vector-icons/build node_modules/@expo/vector-icons

Does this also work when you build?

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.