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