javascriptreactjsreact-nativecustom-font

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


Solution

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