Expo 34 Vector Icons not working

Hi,
I got this problem, too
I roll back sdk0.33, this problem resolve
Something change in sdk0.34 ???

I had the same issue I solved it updating versions in package.json, when you do a “expo start” appears some warning messages? because I need to update for example “expo-font” to “^6.0.1” I make these changes:

    "expo": "^34.0.1",
    "expo-asset": "~6.0.0",
    "expo-background-fetch": "~6.0.0",
    "expo-font": "^6.0.1",
    "expo-localization": "~6.0.0",
    "expo-location": "^6.0.0",
    "expo-permissions": "~6.0.0",
    "expo-task-manager": "~6.0.0",
    "native-base": "^2.13.4",
   "react": "16.8.3",
   "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
  "jest-expo": "^34.0.0"

For us expo start gives no warnings, only on the device loading the Javascript bundle, does the error hit.

Further all our expo packages are at "^6.0.0" already:

    "expo": "^34.0.1",
    "expo-asset": "^6.0.0",
    "expo-constants": "^6.0.0",
    "expo-font": "^6.0.0",
    "expo-linear-gradient": "^6.0.0",
    "expo-local-authentication": "^6.0.0",
    "expo-permissions": "^6.0.0",
    "expo-secure-store": "^6.0.0",

We don’t use native-base or jest-expo at the moment.

do you try delete “node_modules” and then “npm install”?

1 Like

Yes, many times.

But node_modules issues couldn’t be the problem. As described above, expo init for a new project produces the same result on SDK 34, from scratch.

Are you using icons from @expo/vector-icons as well?

Also suffering the same problem. New app from scratch using SDK34. When using the simulator and device within Expo all icons show.
When i build for IOS and bundle app for my phone to test in testflight all icons give me the square box and question mark. Im using @expo/vector-icons i have cleared my node_module and re Yarn’d then published and OTA the app still the same. Haven’t resubmitted a new build yet, will try that later.

Mick

Hey everyone! This was a github issue, but it looks like updating to expo@34.0.3 and expo-font@6.0.1 fixes it

5 Likes

Excellent, all working, many thanks. Mick

In my case
Update “expo-font”: “6.0.1”
Resolve this problem

1 Like

Thanks for all the replies! Had the same issue as well, while I had all the versions stated in this thread. I also had to remove the package-lock.json and then npm install again to get it working.

2 Likes

This Worked . Thank You

I’m still running into issues with this even after nuking everything and updating expo and expo-fonts to the recommended versions above. My package.json has the following dependencies:

"expo": "^34.0.3",
    "expo-asset": "^6.0.0",
    "expo-constants": "^6.0.0",
    "expo-font": "^6.0.1",
    "expo-linear-gradient": "^6.0.0",

And I’m implementing the fonts in the App.tsx like so

private loadResourcesAsync = async () => {
    await Promise.all([
      Expo.Asset.loadAsync([
        // ...
      ]),
      Font.loadAsync({
        // ...
      }),
      Font.loadAsync({
        AvenirNext_Medium: require('./assets/fonts/AvenirNext-Medium.ttf'),
        AvenirNext_Regular: require('./assets/fonts/AvenirNext-Regular.ttf'),
        AvenirNext_UltraLight: require('./assets/fonts/AvenirNext-UltraLight.ttf'),
        Montserrat_Bold: require('./assets/fonts/Montserrat-Bold.ttf'),
        Montserrat_Medium: require('./assets/fonts/Montserrat-Medium.ttf'),
        Montserrat_Regular: require('./assets/fonts/Montserrat-Regular.ttf'),
        Montserrat_Light: require('./assets/fonts/Montserrat-Light.ttf'),
        Rubik_Medium: require('./assets/fonts/Rubik-Medium.ttf'),
        Rubik_Regular: require('./assets/fonts/Rubik-Regular.ttf'),
        Rubik_Light: require('./assets/fonts/Rubik-Light.ttf'),
        // TODO: Put these back to Roboto
        Roboto: require('./assets/fonts/AvenirNext-Regular.ttf'),
        Roboto_medium: require('./assets/fonts/AvenirNext-Medium.ttf'),
        // Ionicons: require('@expo/vector-icons/fonts/Ionicons.ttf'),
        CoinClear_Icons: require('./assets/fonts/coinclearicons.ttf'),
      }),
    ]);
  };```

i solved the issue, the problem is @expo/vector-icons change their font path.
Ionicons: require(’@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Ionicons.ttf’).

But i found some icon is like missing, example is MaterialCommunityIcons security-lock
i change to MaterialCommunityIcons security is exist.

After removing node modules, package-locks and reinstall all dependencies, I am still seeing this issue, but it only happens when I use expo build:android. Everything works fine when I use expo run

1 Like

After removing iOS simulator from my Mac and redo “expo start”, it fixed.
Your iOS simulator is located something like this path
Users > [YOURUSERNAME] > Library > Developer > CoreSimulator > Devices > [devide ID].

We are experiencing the same issue.
@expo/vector-icons does not work on Android in standalone app. It shows X box instead of an icon for FontAwesome.
It works fine in a simulator, but not when it is an apk file or published to google play store.

@expo/vector-icons”: “^10.0.5”,
“expo”: “^34.0.4”,
“expo-font”: “~6.0.1”,
“react”: “16.8.3”,
“react-native”: “https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz”,

Did anyone come across this issue? Is it related?

We have already tried to delete node_modules and yarn.lock files and rebuild everything and run expo start -c

Figured it out and fixed the issue by updating SDK to 34.0.0. The Expo version was 34, however we were still referencing SDK 33.0.0, but after changing to SDK 34, the issue was solved.

2 Likes

Fixed it for me to. Thank you!!

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

After a week of almost going crazy, following all the tips here (and others) without success, I discovered something that solved my problem. You must also change the “sdkVersion” key in app.json to “34.0.0”.