How to load "ionicons" font in expo sdk33? - react-native

Question

after upgrading to expo sdk 33.0.0, when i build my react native expo app everything is ok but as soon as the app starts the the following error shows up:
fontFamily "ionicons" is not a system font and has not been loaded through Font.loadAsync
before the update i was using the sdk version 32.0.0 and everything was ok.
I tried to add the font as explained here https://docs.expo.io/versions/latest/guides/using-custom-fonts/ in my app.js componentDidMount function:
const Ionicons = require("./fonts/Ionicons.ttf");
...
componentDidMount() {
...
Font.loadAsync({
"Avenir-Book": AvenirBook,
"Avenir-Light": AvenirLight,
"Ionicons": Ionicons,
})
}
...
I also try to change the name in the loadAsync from "Ionicons" to "ionicons" but nothing changed.
The "Ionicons.ttf" inside the fonts folder file was copied from the node_modules/#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts folder
---------EDIT---------
In all my react native expo project src i have not a single reference to Ionicon
Any help is appreciated,
Thanks

Answer 1

To import Ionicons icons do
import { Ionicons } from '#expo/vector-icons';
// use like
<Ionicons name="md-checkmark-circle" size={32} color="green" />
And to import custom fonts, add the path to the font to require.
import { Font } from 'expo';
componentDidMount() {
Font.loadAsync({
'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
});
}

Answer 2

import React from 'react';
import { AppLoading } from 'expo';
import { Container, Text } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '#expo/vector-icons'; // here, do a call "ionicons" font
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isReady: false,
};
}
async componentDidMount() {
await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
ionicons: Ionicons.font['ionicons'] // and here is what changes so that the font loads
});
this.setState({ isReady: true });
}
render() {
if (!this.state.isReady) {
return <AppLoading />;
}
return (
<Container>
<Text>Open up App.js to start working on your app!</Text>
</Container>
);
}
}

Answer 3

Nativebase
async componentDidMount() {
await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
...Ionicons.font,
});
this.setState({ isReady: true });
}
Me
async componentDidMount() {
await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
ionicons: Ionicons.font['ionicons'] // here
});
this.setState({ isReady: true });
}