expo: Font.loadAsync does not work with SDK 34

šŸ› Bug Report

Environment

Expo CLI 3.0.6 environment info: System: OS: macOS 10.14.5 Shell: 3.2.57 - /bin/bash Binaries: Node: 10.16.0 - /usr/local/bin/node npm: 6.10.1 - /usr/local/bin/npm IDEs: Xcode: /undefined - /usr/bin/xcodebuild npmPackages: expo: ^34.0.3 => 34.0.3 react: 16.8.3 => 16.8.3 react-native: https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz => 0.59.8 react-navigation: ^3.11.1 => 3.11.1 npmGlobalPackages: expo-cli: 3.0.6

Steps to Reproduce

Hi ! Since I upgraded to SDK 34 I have this error with Font.loadAsync. It worked perfectly before with SDK 33 :

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

Expected Behavior

Load custom fonts and use react-navigation to go to the next screen.

Actual Behavior

I get an error while trying to use AppLoading and custom font.

Reproducible Demo

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);

If I’m missing something, please tell me, thank you !

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 2
  • Comments: 21 (4 by maintainers)

Most upvoted comments

You also have to delete package-lock.json, so the steps would be:

1.- Delete the node_modules folder 2.- Delete the package-lock.json file 3.- Run npm/yarn install

Then run expo start -c

Duplicate of https://github.com/expo/expo/issues/5100 Fix for me by upgrading: expo >= 34.0.3 expo-font >= 6.0.1

Problem solved ! For me, it was the package-lock.json ! Thank you @brentvatne

Make sure you delete the Expo app and let it reinstall. That was the missing piece to get it to work for me.

You also have to delete package-lock.json, so the steps would be:

1.- Delete the node_modules folder 2.- Delete the package-lock.json file 3.- Run npm/yarn install

Then run expo start -c

This worked for me 😃 Thanks @Razorholt

Nope. Still having that issue after cleaning both node_modules and package-lock

 "expo": "^34.0.3",
 "expo-font": "^6.0.1"

Also, after I dismiss the error, the app loads but without the icons. Will that be my next issue with SDK 34?


Update: I ran the cleaning process again and this time it worked! Oh and the icons loaded just fine. Thanks for your hard work!

@NiclasEricsson - can you try clearing node_modules and your lockfiles and reinstalling to ensure that you are getting the correct version of expo-font?