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)
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 installThen run
expo start -cDuplicate of https://github.com/expo/expo/issues/5100 Fix for me by upgrading: expo >=
34.0.3expo-font >=6.0.1Problem 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.
This worked for me š Thanks @Razorholt
Nope. Still having that issue after cleaning both node_modules and package-lock
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?