How to load "ionicons" font in expo sdk33?

4
votes

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

3
react-nativeexpo
If you use Ionicons, try this import { Ionicons } from '@expo/vector-icons'; – hong developer
hi @hongdevelop, i tried your import but now i doesn't build and i get this error: asset.downloadAsync is not a function. (In 'asset.downloadAsync()', 'asset.downloadAsync' is undefined) – Ve9
expo install asset => import { Asset } from 'expo-asset'; – hong developer
The updated code is: import { Ionicons } from '@expo/vector-icons'; ... componentDidMount() { ... Font.loadAsync({ "Avenir-Book": AvenirBook, "Avenir-Light": AvenirLight, "Ionicons": Ionicons, }) } and the error is: asset.downloadAsync is not a function. (In 'asset.downloadAsync()', 'asset.downloadAsync' is undefined) But i'm not using Asset anywhere – Ve9
You do not need to add 'ionics' to 'Font.loadAsync'. – hong developer

3 Answers

1
votes

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'),
  });
}
0
votes

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 });
  }
0
votes

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