Using custom font in react native with expo, load font every time
I am using Expo and create and react app. I like the direct / hot reload feature on my phone, but I am wondering about custom fonts.
https://docs.expo.io/versions/v17.0.0/guides/using-custom-fonts.html#loading-the-font-in-your-app
The Expo API only has directions for loading them asynchronously. Do I need to do this on every component I want to use a custom font on? It looks like it will cause unnecessary calls when I have already loaded it once.
Is there a way to set the font as global or pass it through props after loading? It looks like they are suggesting this approach via their last line in this link:
Note. Typically, you want to download the main fonts of your applications before the application is displayed to avoid flickering text after the font is loaded. The recommended approach is to move the call to Font.loadAsync to your top level component.
... But they don't provide an explanation for HOW to do it, if that's what they are hinting at.
So my questions are:
1) Is loading a custom font multiple times (per component) causing performance issues? (or maybe he pulled it out of the cache after the first?)
2) Once loaded, can you pass the font through properties or set it as global?
and finally
3) Is this an Expo-only problem? Or is it just a build-responsive-native application issue? Or just a direct boot / hot boot problem?
Also please note I am working on Windows / Android
source to share
1) You only have to download the font once . As you note, Expo recommends placing the Font.loadAsync method in the componentDidMount () method of your top-level component.
The performance issue you are talking about is probably the magic that happens behind the asynchronous call, but again, this should only happen once.
2) From this point forward, you can use the font in any child component using the fontFamily property on<Text>
. As their example (which I modified slightly) shows:
First load the font into your top level component.
export default class App extends React.Component {
componentDidMount() {
Font.loadAsync({
'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
});
}
render() {
return (
<HelloWorld />
)
}
}
Then use it in any application component. (Before loading the font, you will see the system font - San Francisco on iOS, Roboto on Android. This is why Expo recommends setting the loading state ... to avoid the awkward blinking between the system font and the newly loaded custom font.)
export default class HelloWorld extends React.Component {
render() {
<Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}>
Hello, world!
</Text>
}
}
3) This is an exhibition-related "problem" (or solution ... depending on how you look at it). For example, on iOS, adding a custom font involves several steps (adding the font file to your native project, making sure the font shows up in your Bundle resources, adding the font to Info.plist ...). Not sure if this process is for Android, but it is something different and probably annoying too.
Expo took a break from its Font module, which lets you do one thing and get the same result across platforms. It's pretty cool in my book.
source to share
I know the thread is old, but it might help others as well. Direct use Font.asyncLoad()
causes a system font error .
fontFamily "roboto-medium" is not a system font and was not loaded via Font.loadAsync
export default class App extends React.Component {
state = {
assetsLoaded: false,
};
async componentDidMount() {
await Font.loadAsync({
'roboto-medium': require('./assets/fonts/Roboto-Medium.ttf')
});
this.setState({ assetsLoaded: true });
}
render() {
const {assetsLoaded} = this.state;
if( assetsLoaded ) {
return (
<View style={styles.container}>
<Text style={styles.heading}>Custom Roboto Font</Text>
<Text style={{fontSize: 40}}>Default Font</Text>
</View>
);
}
else {
return (
<View style={styles.container}>
<ActivityIndicator />
<StatusBar barStyle="default" />
</View>
);
}
}
}
If you want to know the details, follow the link.
https://webomnizz.com/add-custom-font-to-react-native-using-expo/
source to share
To use the font effectively (expo), you can load the font in the root of most components, and on load, you can update the fontLoaded: true status in the global [Redux] state.
This is well explained by me on Refer This
Hope it helps.
source to share