Custom fonts not working after detaching to expokit

#1

Hi all,

I’ve been banging my head on this for a while now and am hoping the wisdom of the community can see something I cannot.

After detaching my app to expokit (using iOS platform only), my custom fonts (custom fonts from asset folder and the @expo-vector-icon icons) started throwing red screen errors. If I remove all references to custom fonts and icons from my app, the errors go away, but that’s not really a solution either.

I get error messages about an unrecognized font family for an unfamiliar font that is weirdly named like “ExpoFont-xxxx-[font name]” for each of my custom fonts. I’m guessing the font names are generated somehow based on the actual custom fonts I use (like material-community icons in error message below).


Environment

  Expo CLI 2.4.0 environment info:
    System:
      OS: macOS 10.14.1
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.9.4 - /usr/local/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 4.6.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    IDEs:
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      expo: ^31.0.4 => 31.0.5 
      react: 16.5.0 => 16.5.0 
      react-native: https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz => 0.57.1 
      react-navigation: ^2.18.2 => 2.18.2 
    npmGlobalPackages:
      expo-cli: 2.4.0

App.js (my root component, which loads the fonts)

import { AppLoading, Asset, Font } from "expo";
import React from "react";
import { Image } from "react-native";
import { Root } from "native-base";
import { Provider } from "react-redux";
import store from "./store";
import { Ionicons, MaterialIcons, MaterialCommunityIcons } from "react-native-vector-icons";
import AppContainer from "app/screens/AppContainer";

function cacheImages(images) {
  return images.map(image => {
    if (typeof image === "string") {
      return Image.prefetch(image);
    } else {
      return Asset.fromModule(image).downloadAsync();
    }
  });
}

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

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      appIsReady: false,
    };
  }

  async loadAssetsAsync() {
    console.log("loading assets");
    const imageAssets = cacheImages([require("app/assets/images/splash_red.png")]);

    const fontAssets = cacheFonts([
      Ionicons.font,
      MaterialIcons.font,
      MaterialCommunityIcons.font,
      { "roboto-light": require("app/assets/fonts/Roboto-Light.ttf") },
      { "roboto-regular": require("app/assets/fonts/Roboto-Regular.ttf") },
      { "roboto-semibold": require("app/assets/fonts/Roboto-Medium.ttf") },
      { "roboto-bold": require("app/assets/fonts/Roboto-Bold.ttf") },
    ]);

    await Promise.all([...imageAssets, ...fontAssets]);

    this.setState({ appIsReady: true });
  }

  render() {
    if (this.state.appIsReady) {
      return (
        <Root>
          <Provider store={store}>
            <AppContainer />
          </Provider>
        </Root>
      );
    } else {
      return (
        <AppLoading
          startAsync={this.loadAssetsAsync}
          onFinish={() => this.setState({ appIsReady: true })}
          onError={console.warn}
        />
      );
    }
  }
}

export default App;

Several things I’ve tried are:

  • adding fonts to info.plist
  • react-native linking
  • un-detaching and re-ejecting app
  • deleting and reinstalling node modules
  • deleting and reinstalling pods
  • all of above at least 3 or more times
  • and a few more that I can’t remember (been tinkering for the past 2 days)

Hopefully I’m just missing something really obvious and someone has some observations or ideas that I can try.

1 Like
#2

Good news is I think I’ve figured out part of the problem…it has to do with the font names I’m using in my styles.

Originally was using this (the font name I set through Font.loadAsync in App.js):

    fontFamily: "roboto-bold",

But changing it to this removed errors for this font:

    fontFamily: "Roboto-Bold",

So it looks like the font names I added in Font.loadAsync don’t work, but as long as I revert to the original font name (not filename), then it seems to fix the issue.

Now trying to figure out how to do this same for icons from @expo-vector-icons

2 Likes
closed #3

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