Skip to content
Advertisement

React native custom fonts not loading in, not sure why?

I did everything like in the documentation, but my Custom Fonts do not want to load in. I could wait for hours and nothing happens…

This is my App.js:

import React, { useState } from 'react';
import AuthNavigation from './AuthNavigation';
import useFonts from './shared/useFonts';
import LoadingScreen from './screens/LoadingScreen';

export default function App() {
  const [isReady,setIsReady] = useState(false);

  const LoadFonts = async () => {
    await useFonts();
    setIsReady(true);
  }

  useEffect(() => {
    LoadFonts();
      },[])

  if (!isReady) {
    return(
      <LoadingScreen/>
    )
  }
  else{
  return (
    <AuthNavigation/>
  );
  }
}

And this is my useFont.js

import Font from 'expo-font';

export default useFont = async () => 
    await Font.loadAsync({
       QuicksandMedium: require('../assets/Fonts/Quicksand-Medium.ttf'),
       AmaticSCRegular: require('../assets/Fonts/AmaticSC-Regular.ttf')
    })

There is no error printed in the console, so I have no clue what I am doing wrong :/

enter image description here

enter image description here

Advertisement

Answer

I’m not sure, but maybe that if should be the problem. Try with this:

import React, { useState } from 'react';
import AuthNavigation from './AuthNavigation';
import useFonts from './shared/useFonts';
import LoadingScreen from './screens/LoadingScreen';

export default function App() {
  const [isReady,setIsReady] = useState(false);

  const LoadFonts = async () => {
    await useFonts();
    setIsReady(true);
  };

  useEffect(() => {
    LoadFonts();
  },[]);

  return (
    <>
      {isReady ?
        <AuthNavigation/>
        :
        <LoadingScreen/>
      }
    </>
  );
}
Advertisement