expo: Font.loadAsync not working after sdk 34 update.

Hello, I had an app that loads some custom fonts and it was working properly until I updated to sdk 34. I now get this error:

fontFamily "manrope-regular" is not a system font and has not been loaded through Font.loadAsync.

Here’s my code:

export default function App() {
    const [isReady, setIsReady] = useState(false);

    const _cacheSplashResourcesAsync = () => {
        return Font.loadAsync({
            "manrope-regular": require("@assets/fonts/manrope-regular.otf"),
            "manrope-medium": require("@assets/fonts/manrope-medium.otf"),
            "manrope-light": require("@assets/fonts/manrope-light.otf"),
            "manrope-bold": require("@assets/fonts/manrope-bold.otf"),
            "manrope-semibold": require("@assets/fonts/manrope-semibold.otf"),
            "manrope-extrabold": require("@assets/fonts/manrope-extrabold.otf")
        });
    };

    if (!isReady) {
        return (
            <AppLoading
                startAsync={_cacheSplashResourcesAsync}
                onFinish={() => {
                    setIsReady(true);
                }}
                autoHideSplash={false}
            />
        );
    }
    return (
        <Provider store={store}>
            <StatusBar barStyle="light-content" />
            <AppContent />
        </Provider>
    );
}

I don’t think I am doing something wrong because as I said it was working before the update. Did that happen to anybody?

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 17 (3 by maintainers)

Most upvoted comments

There was an update to expo-font just recently, due to this issue which seems to be the same as the one most of your are having, so could you try updating expo-font or expo? (Brent says the specific versions in that issue)

cruzach on Jul 30, 2019

Ok I will reopen the issue, it worked for me in a blank project but I can’t seem to find any problem in my old code

alialaa on Jul 30, 2019

Yes. Many times… maybe I have something wrong in my code but it worked before upgrading to SDK 34…

Here my code :

import React, {Component}  from 'react';
import {
  AsyncStorage,
  Image,
  StyleSheet,
  View
} from 'react-native';

import { AppLoading } from 'expo';
import * as Font from 'expo-font';
import { withNavigation } from 'react-navigation';

class Loading extends Component {

  static navigationOptions = {
    header: null
  }

  state = {
    userToken: '',
    isLogged: false,
    isReady: false,
    loadingImage: require('assets/images/loading/loader.gif')
  }

  componentDidMount = async () => {

    let userToken = await AsyncStorage.getItem('userToken');

    this.setState({ userToken })
  }

  _cacheResourcesAsync = () => {

    return Font.loadAsync({
      'markpro': require('assets/fonts/MarkPro.ttf'),
      'markpro-medium': require('assets/fonts/MarkPro-Medium.ttf'),
      'markpro-bold': require('assets/fonts/MarkPro-Bold.ttf'),
      'markpro-black': require('assets/fonts/MarkPro-Black.ttf')
    }, () => {
      this.setState({isReady: true})
    });
  }

  render() {
    const {isReady, loadingImage, userToken} = this.state;

    if (!isReady) {
      return (
        <AppLoading
          startAsync={this._cacheResourcesAsync}
          onFinish={() => this.props.navigation.navigate(userToken ? 'Main' : 'Start')}
          onError={console.warn}
        />
      );
    }

    return (
      <View style={styles.container}>
        <Image source={loadingImage} style={{width: 400, height: 400}} />
      </View>
    )
    
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: '100%',
    alignItems: "center",
    justifyContent: "center"
  },
  loadingImage: {
    width: 400,
    height: 400
  },
});

export default withNavigation(Loading);

Am I missing something ? Thank you!

ccreusat on Jul 31, 2019