I’ve spent a lot of time researching how fonts and images can be preloaded, etc… and I was able to load fonts and images from my assetts folder.
However I could not figure out what is the catch when fonts are (ou should) be taken from dependencies.
In the sources I’ve posted below, you can see 3 very similar approaches for preloading fonts.
Could someone clarify why so similar approaches deliver so different results?
import React from 'react';
import { Asset, Font, AppLoading } from 'expo';
import { MaterialIcons } from '@expo/vector-icons';
import * as sjs from './assets/js/scalajs-output-android.js';
export default class App extends React.Component {
state = {
fontsLoaded: false,
};
async componentWillMount() {
//-- This call does not find MaterialIcons
//-- await Font.loadAsync([MaterialIcons.font]);
//-- This call complains that the promise is never fulfilled
//-- await Font.loadAsync({
//-- 'MaterialIcons': MaterialIcons.font
//-- });
// This call works
await Font.loadAsync({
'MaterialIcons': require('./assets/fonts/MaterialIcons.ttf')
});
this.setState({ fontsLoaded: true });
};
render() {
if (!this.state.fontsLoaded) {
return <AppLoading />;
}
const component = sjs.drawerNavigation_root();
return (React.createElement(component, {}));
}
}
hello! I labeled the various styles above for convenience
can you clarify what you mean by “This call does not find MaterialIcons”?
you would have to do await Font.loadAsync(MaterialIcons.font); here instead. MaterialIcons.font is an object that looks like this: {'MaterialIcons': require('@expo/vector-icons/fonts/MaterialIcons.ttf')}
this is the same as the fixed version of the 2nd option which i described above
Your suggestion ( await Font.loadAsync(MaterialIcons.font); ) complains like item (1) above.
I’ve tried another flavor based on insider information you provided (thank you for that!), and it works.
Please find below the results of my tests:
//-- This call does not find MaterialIcons
//-- await Font.loadAsync([MaterialIcons.font]);
//-- This call does not find MaterialIcons
//-- await Font.loadAsync(MaterialIcons.font);
//-- This call complains that the promise is never fulfilled
//-- await Font.loadAsync({
//-- 'MaterialIcons': MaterialIcons.font
//-- });
//-- This works, but I don't like the idea of copying .ttf files into my project.
//-- await Font.loadAsync({
//-- 'MaterialIcons': require('./assets/fonts/MaterialIcons.ttf')
//-- });
// This works as expected
await Font.loadAsync({
'MaterialIcons': require('@expo/vector-icons/fonts/MaterialIcons.ttf')
});
I’ve seen a similar report somewhere else in the forum and a similar root cause for the issue: the internal name does not match the external name. I suppose a lot of people will still stumble on the same trap.
right. we should probably change it to make the fontFamily name identical to the icon component name. could you submit a pull request for that? additionally, this fact should be added to the README