react-nativeexpofontellovector-icons

Expo fontello don't load


I'm trying to load a fontello icons in my project, but if I try to load in App.js, it send "false' and the app don't load:

import React, {useState} from "react";
import AppLoading from "expo-app-loading";
import { ThemeProvider } from "styled-components";
import theme from "./src/globalStyles/theme";

import Routes from "./src/routes";

import {
  useFonts,
  Roboto_400Regular,
  Roboto_500Medium,
  Roboto_700Bold,
} from "@expo-google-fonts/roboto";

import { Fontello } from "./assets/fonts/fontello.ttf";

export default function App() {
  const [fontsLoaded] = useFonts({
    Roboto_400Regular,
    Roboto_500Medium,
    Roboto_700Bold,
    Fontello,
  });
  console.log(fontsLoaded)
  if (!fontsLoaded) {
    return <AppLoading />;
  }

  return (
    <ThemeProvider theme={theme}>
      <Routes />
    </ThemeProvider>
  );
}

And if I comment the line with Fontello, it load the app but I got the following error:
fontFamily "fontello" is not a system font and has not been loaded through Font.loadAsync.

If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

If this is a custom font, be sure to load it with Font.loadAsync.


Solution

  • Install expo-font

    expo install expo-font
    

    Create a folder called hooks where you App.js is located.

    Inside hooks folder create a file called useFonts.js paste this code

    useFonts.js

    import * as Font from 'expo-font';
    import { Roboto_400Regular } from '@expo-google-fonts/roboto';
    
    const useFonts = async () => {
      await Font.loadAsync({
        Roboto: Roboto_400Regular,
        Fontello: require('../assets/fonts/fontello.ttf'),
        // All Other Fonts
      });
    };
    
    export default useFonts;
    

    Then in your App.js paste this code

    import React, { useState } from 'react';
    import AppLoading from 'expo-app-loading';
    import { ThemeProvider } from 'styled-components';
    
    import theme from './src/globalStyles/theme';
    import Routes from './src/routes';
    import useFonts from './hooks/useFonts';
    
    export default function App() {
      const [IsReady, setIsReady] = useState(false);
    
      const LoadFonts = async () => {
        await useFonts(); 
      };
    
      if (!IsReady) {
        return (
          <AppLoading
            startAsync={LoadFonts}
            onFinish={() => setIsReady(true)}
            onError={(error) => console.log(error)}
          />
        );
      }
    
       return (
         <ThemeProvider theme={theme}>
           <Routes />
         </ThemeProvider>
       );
    }
    

    Working Example Works on Android. Some bug in the web version.