React Native - Expo: fontFamily 'SimpleLineIcons' is not a system font and has not been loaded through Font.loadAsync
Okay, so I finally managed to solve this issue.
The problem was that iOS and Android apparently require different names for the fonts you want to load.
The simple-line-icons that i loaded in only worked for iOS and so on Android i got this error: fontFamily 'SimpleLineIcons' is not a system font and has not been loaded through Font.loadAsync.
I ended up loading both the simple-line-icons and the SimpleLineIcons, pointing to the same directory like so:
componentDidMount() {
this.loadAssetsAsync()
}
loadAssetsAsync = async () => {
await Font.loadAsync({
amaticBold: require('./assets/fonts/amaticSC-Bold.ttf'),
indieFlower: require('./assets/fonts/indieFlower.ttf'),
'Material Icons': require('@expo/vector-icons/fonts/MaterialIcons.ttf'),
'MaterialIcons': require('@expo/vector-icons/fonts/MaterialIcons.ttf'),
'SimpleLineIcons': require('@expo/vector-icons/fonts/SimpleLineIcons.ttf'),
'simple-line-icons': require('@expo/vector-icons/fonts/SimpleLineIcons.ttf')
})
this.setState({ fontLoaded: true })
}
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk))
if (!this.state.fontLoaded) {
return <AppLoading />
}
return (
<Provider store={store}>
<Router />
</Provider>
)
}
This admittedly ugly solution solved my issue for now. Make sure you really type exactly like the error tells you to. If the error is: fontFamily 'MyAwesomeFont' is not a system font... Then you really need to name it:
Font.loadAsync({
'MyAwesomeFont': require('./path/to/MyAwesomeFont.ttf')
})
Hope this helps anyone out there.
I had the same issue and I found that changing the font name to the one you named can solve issue:
// Before
'my-awesome-font': require('./path/to/my-awesome-font.ttf')
// After
'MyAwesomeFont': require('./path/to/my-awesome-font.ttf')
It may be the dash sign that cannot be used.