Custom Fonts Not Loading in Standalone Android Build After Update to SDK 34

Expo SDK
1

Screenshot_20190816-084338_Coin%20Clear
Screenshot_20190816-084338_Coin%20Clear1080×2220 360 KB

I have a few custom fonts and icons in my app. They were working fine until I recently updated the SDK to 34.0.4. Everything works fine locally and through the Expo client. The only issue is with the standalone Android app (iOS works fine). Would love some help on this. Thank you!

package.json dependencies

"dependencies": {
    "@expo/vector-icons": "^10.0.0",
    "@types/react-dom": "^16.8.4",
    "apollo-cache-inmemory": "^1.3.11",
    "apollo-client": "^2.4.7",
    "apollo-link": "^1.2.6",
    "apollo-link-context": "^1.0.12",
    "apollo-link-http": "^1.5.9",
    "apollo-link-schema": "^1.1.2",
    "axios": "^0.18.0",
    "d3-shape": "^1.3.4",
    "expo": "^34.0.4",
    "expo-asset": "^6.0.0",
    "expo-constants": "^6.0.0",
    "expo-font": "^6.0.1",
    "expo-image-picker": "^6.0.0",
    "expo-linear-gradient": "^6.0.0",
    "expo-permissions": "^6.0.0",
    "global": "^4.4.0",
    "graphql-tag": "^2.10.0",
    "graphql-tools": "^4.0.3",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "native-base": "2.12.1",
    "react": "16.8.3",
    "react-apollo": "^2.3.2",
    "react-load-script": "^0.0.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-image-picker": "^0.28.1",
    "react-native-indicators": "^0.13.0",
    "react-native-masked-text": "^1.12.2",
    "react-native-paper": "^2.16.0",
    "react-native-svg": "^9.6.2",
    "react-native-svg-charts": "^5.2.0",
    "react-navigation": "^3.11.1",
    "react-navigation-material-bottom-tabs": "^1.0.0",
    "react-plaid-link": "^1.2.0",
    "victory-native": "^31.0.0"
  },

App.tsx font async loading

private loadResourcesAsync = async () => {
    await Promise.all([
      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'),
      }),
    ]);
2

Can you try running locally in production with expo start --no-dev --minify? Might open up some errors.

Otherwise I’d make sure you’ve cleared caches and node modules, I’ve seen this problem before specifically with SDK 34 and some updates had fixed it (and most of the time clearing cache/node_modules ended up resolving the issue for others who tagged on saying they were still seeing it)

Let me know if that doesn’t work!

4

Working fine running locally in production with that command.

This may be a dumb question, but how do I clear caches and node modules?

5

delete your node_module folder and run npm install command

1 Like
6

Or yarn if you use that instead of npm.

7

Deleted node_module, updated all dependencies to the latest version, re-installed everything. Still running into the same issue.

Any other suggestions @charliecruzan?

8

@stevenbuchko are you able to create a new, minimal project with those fonts that also has the same problem and post a link to the source code repository? If the new project does not have the same problem, try comparing the two projects to see what differences might be causing the problem.

9

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.

Thread with solution: Expo 34 Vector Icons not working - #18 by dhau

1 Like
10

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