Font.loadAsync () cannot resolve module for custom fonts (React Native & Expo)
My application uses CRNA and Expo and my problem is that the asynchronous function Font.loadAsync () cannot find the .otf font file in the assets / fonts / folder in my project directory. I'm pretty sure the directory and file names are correct. I am getting this error.
Here is my code:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Font, AppLoading } from 'expo'
import Root from './js/Root';
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
fontLoaded: false
}
}
async componentDidMount() {
await Font.loadAsync({
"Light": require('./assets/fonts/SemplicitaPro-Light.otf')
})
this.setState({ fontLoaded: true })
}
render() {
if (!this.state.fontLoaded) {
return <AppLoading />
}
return <Root />;
}
}
Here is my package.json:
{
"name": "Zumer",
"version": "0.1.0",
"private": true,
"devDependencies": {
"flow-bin": "^0.40.0",
"jest-expo": "^0.4.0",
"react-native-scripts": "0.0.28",
"react-test-renderer": "16.0.0-alpha.6"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch",
"flow": "flow"
},
"packagerOpts": {
"assetExts": ["ttf", "otf"]
},
"jest": {
"preset": "jest-expo",
"tranformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-navigation)"
]
},
"dependencies": {
"@expo/vector-icons": "^4.0.0",
"expo": "^16.0.0",
"native-base": "^2.1.2",
"react": "16.0.0-alpha.6",
"react-native": "^0.43.4",
"react-native-elements": "^0.11.1",
"react-navigation": "^1.0.0-beta.8",
"react-redux": "^5.0.4",
"redux": "^3.6.0",
"redux-observable": "^0.14.1",
"redux-persist": "^4.6.0",
"rxjs": "^5.3.0"
}
}
Maybe the .otf format is not supported by Expo?
+3
source to share
2 answers
I had a similar problem and was able to solve it by removing the quotes around the key requiring the font source.
Before:
await Font.loadAsync({
"Light": require('./assets/fonts/SemplicitaPro-Light.otf')
})
After
await Font.loadAsync({
Light: require('./assets/fonts/SemplicitaPro-Light.otf')
})
And using it in your stylesheet like so
const styles = StyleSheet.create({
text: {
fontFamily: 'Light'
}
});
After that, everything worked.
+1
source to share