React Native Expo fonts, They are loaded but I can't see the change in my application interface

Viewed 121

I am new to using react native. I am using the code contributed in other topics similar to this one: I use a hook:

import * as Font from "expo-font";
 
export default useFonts = async () =>
  await Font.loadAsync({
     Bebas: require('../assets/fonts/BebasNeue-Regular.ttf'),
    Montserrat: require('../assets/fonts/Montserrat-Italic-VariableFont_wght.ttf'),
    Inter: require('../assets/fonts/Inter-Black.otf')
  });

And then in my app.js:

import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import React, { useState } from 'react';

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={() => {}}
      />
    );
  }

  return <View styles={styles.container}>{/* Code Here */}</View>;
}

I then try to use them with the same name in my different screens, and I think they are loaded correctly, (no error), but I can't see the change when I restart my application.

0 Answers
Related