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.