Custom fonts not working after detaching to expokit

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).


  Expo CLI 2.4.0 environment info:
      OS: macOS 10.14.1
      Shell: 3.2.57 - /bin/bash
      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
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
      expo: ^31.0.4 => 31.0.5 
      react: 16.5.0 => 16.5.0 
      react-native: => 0.57.1 
      react-navigation: ^2.18.2 => 2.18.2 
      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 => {
    if (typeof image === "string") {
      return Image.prefetch(image);
    } else {
      return Asset.fromModule(image).downloadAsync();

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

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

    this.state = {
      appIsReady: false,

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

    const fontAssets = cacheFonts([
      { "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 (
          <Provider store={store}>
            <AppContainer />
    } else {
      return (
          onFinish={() => this.setState({ appIsReady: true })}

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

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


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