Upgrade to SDK33 - Icons problem

Expo SDK
1

Hi,
I’m not able to print a FontAwesome icon with the new SDK 33.
My packaje.json is this:

{
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "dependencies": {
    "@expo/vector-icons": "^10.0.3",
    "abortcontroller-polyfill": "^1.1.9",
    "expo": "^33.0.0",
    "expo-asset": "^5.0.1",
    "expo-constants": "^5.0.1",
    "expo-file-system": "^5.0.1",
    "expo-font": "^5.0.1",
    "expo-intent-launcher": "^5.0.1",
    "expo-linear-gradient": "^5.0.1",
    "expo-location": "^5.0.1",
    "expo-module-scripts": "^1.0.0",
    "expo-permissions": "^5.0.1",
    "expo-sqlite": "^5.0.1",
    "react": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-native-elements": "^0.19.1",
    "react-native-gesture-handler": "^1.2.2",
    "react-native-image-pan-zoom": "^2.1.8",
    "react-native-maps": "^0.24.2",
    "react-native-md5": "^1.0.0",
    "react-native-popup-dialog": "^0.14.52",
    "react-navigation": "^3.11.0",
    "react-swipeable-views": "^0.13.3",
    "react-swipeable-views-native": "^0.13.2",
    "react-timer-mixin": "^0.13.4"
  }
}

And this is the code that I use for print the icon:

import { FontAwesome } from '@expo/vector-icons';
...
<FontAwesome name="info-circle" size={15} style={{ color: '#FF0000' }}/>

The specific error is: “fontFamily “FontAwesome” is not a system font and has not been loadad through Font.loadAsync”. According to the docs the font will be loaded if it hasn’t been loaded already:

This component loads the Ionicons (in my case FontAwesome) font if it hasn’t been loaded already…

Also, I have troubles loading a custom Font. Every time I load a font with this code:

async componentWillMount() {
        await Font.loadAsync({
                'Assistant-Bold': require('../../assets/fonts/Assistant-Bold.ttf'),
                'Assistant-ExtraBold': require('../../assets/fonts/Assistant-ExtraBold.ttf'),
                'Assistant-ExtraLight': require('../../assets/fonts/Assistant-ExtraLight.ttf'),
                'Assistant-Light': require('../../assets/fonts/Assistant-Light.ttf'),
                'Assistant-Regular': require('../../assets/fonts/Assistant-Regular.ttf'),
                'Assistant-SemiBold': require('../../assets/fonts/Assistant-SemiBold.ttf'),
        });
}

but every time I use it in a Text component I get the same error: “fontFamily “Assistant-Bold” is not a system font and has not been loadad through Font.loadAsync”

Could be a problem with Font.loadAsync()? Also I called Font.isLoaded() just after load the font but it says that is loaded.

Thank you.

2

The problem was solved deleting the entire project’s folder and updating the SDK later.

1 Like
3

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