Font.loadAsync with expo SplashScreen won't work in react native

417 views Asked by At

I updated to expo SDK 45. I used to load open-sans like so:

const fetchFonts = () => {
  return Font.loadAsync({
    "open-sans": require("./assets/fonts/OpenSans-Regular.ttf"),
    "open-sans-bold": require("./assets/fonts/OpenSans-Bold.ttf"),
  });
};

export default function App() {

  const [dataLoaded, setDataLoaded] = useState(false);
  if (!dataLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setDataLoaded(true)}
        onError={(err) => console.log(err)}
      />
    );
  }

Problem is that AppLoading is no longer supported. Instead one has to use SplashScreen now. I followed the example here. This is my code:

import * as Font from "expo-font";
import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

export default function App() {

  /* Preload stuff */
const [appIsReady, setAppIsReady] = useState(false);
 
useEffect(() => {
    async function prepare() {
      try {
    await  Font.loadAsync({
    "open-sans": require("./assets/fonts/OpenSans-Regular.ttf"),
    "open-sans-bold": require("./assets/fonts/OpenSans-Bold.ttf"),
  });
        } catch (e) {
        console.warn(e);
      } finally {

      }
    }

    prepare();
  }, []);

  const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
      // This tells the splash screen to hide immediately! If we call this after
      // `setAppIsReady`, then we may see a blank screen while the app is
      // loading its initial state and rendering its first pixels. So instead,
      // we hide the splash screen once we know the root view has already
      // performed layout.
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }

Now my app won't load - I'll only see the the splash screen. I can make the app work if I comment out SplashScreen.preventAutoHideAsync(); and onLayoutRootView. I then get the message that "fontfamily opensans is not a system font". Sometimes it also actually does load the font and it works (every other try)

Any thoughts?

0

There are 0 answers