Using custom Font in react native with expo, loading font every time

Question

I am using Expo and the create-react-native app. I enjoy the live/hot reloading feature on my phone, but I'm wondering about custom fonts.

https://docs.expo.io/versions/v17.0.0/guides/using-custom-fonts.html#loading-the-font-in-your-app

The API for Expo only has directions to load them asynchronously. Do I have to do this on every component I want a custom font on? This seems like it would cause some unnecessary calls when I've already loaded it once.

Is there a way to set the font as global or pass it via props once loaded? It seems like they suggest this approach via their last line in that link:

Note: Typically you will want to load your apps primary fonts before the app is displayed to avoid text flashing in after the font loads. The recommended approach is to move the Font.loadAsync call to your top-level component.

...But they give no explanation on HOW to do that, if that's what they are implying.

So my questions are:

1) Does loading the custom font in multiple times (on each component), cause performance issues? (or maybe it's pulled from cache after the first?)

2) After loading it can you pass the font down via properties or set it as a global?

and finally

3) Is this an Expo only issue? Or a create-react-native app only issue? Or just a livereload/hotloading issue?

Also note, I'm working on Windows/Android

Answer 1

To use a font(expo) efficiently you can load the font in the root most Component and when loaded you can update the status fontLoaded:true in the global state [Redux].

It is well explained by me on medium Refer This

Hope this helps.

Answer 2

I know the thread is old but this may helps others too. The direct use Font.asyncLoad() cause the system font error.

fontFamily "roboto-medium" is not a system font and has not been loaded through 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 like to know more in detail then please follow the link.

https://webomnizz.com/add-custom-font-to-react-native-using-expo/

Answer 3

Im using this method with Expo react native: first install the relative npm packages, in my case im using "tajawal" font

npm i @expo-google-fonts/tajawal

in App.js:

let [fontsLoaded] = useFonts({
    Tajawal_300Light,
    Tajawal_400Regular,
    Tajawal_500Medium,
    Tajawal_800ExtraBold,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  }

Then use "TajawalFontFamily" font as a normal fontFamily style in any component

style={{fontFamily:TajawalFontFamily }}