React Native Expo, custom fonts

Question

fontFamily "SF-Regular" is not a system font and has not been loaded through Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Font.loadAsync.

Im getting this error even though I have this code below, it was working yesterday

let [fontsLoaded] = useFonts({
        'SF-Black': require('./assets/fonts/SF-Black.otf'),
        'SF-Bold': require('./assets/fonts/SF-Bold.otf'),
        'SF-Regular': require('./assets/fonts/SF-Regular.otf'),
        'SF-Light': require('./assets/fonts/SF-Light.otf'),
    });

Im using managed workflow SDK 39 "@use-expo/font": "^2.0.0", "expo": "~39.0.2", "expo-av": "^8.6.0", "expo-font": "^8.3.0",

''' import React, { useState, useEffect, useRef } from 'react'; import { AntDesign, FontAwesome, MaterialIcons, FontAwesome5 } from '@expo/vector-icons'; import { Text, View,Dimensions, ActivityIndicator} from 'react- import { useFonts } from 'expo-font'; import * as Font from 'expo-font';

    const Tab = createBottomTabNavigator();
    
    let fonts = {
      'SF-Black': require('./assets/fonts/SF-Black.otf'),
    };

    export default function App() {
    
      const loadFontsAsync = async () => {
        Font.loadAsync(fonts).then(() => {
          setFont(true)
        })
      }
    
      const [fontsLoaded, setFont] = useState(false);
    
      useEffect(() => {
        loadFontsAsync();
      }, [])
    
      const [appState, setAppState] = useState(AppState.currentState);
    
      const [refresh, setRefresh] = useState(false);
    
      const handleAppStateChange = (nextAppState) => {
        setAppState(nextAppState);
        if (refresh) {
          setRefresh(false);
        } else {
          setRefresh(true);
        }
      }
     
    

      if (!fontsLoaded) {
        return (
            <ActivityIndicator size='large' color='white' />
        );
      } else {
        return (
          <NavigationContainer theme={MyTheme}>
            <Tab.Navigator
              initialRouteName="Home"
              tabBarOptions={{ 
                activeTintColor: selectColor,
                inactiveTintColor: unselectColor,
                style:{height: ScreenHeigth * 0.1},
              }}>
              <Tab.Screen
                name="Youtube"
                component={Youtube}
                options={{
                  tabBarLabel: 'Videos',
                  tabBarIcon: ({ color, size }) => (
                    <AntDesign name="youtube" size={size} color={color} />
                  ),
                }}  />
      
                  
            </Tab.Navigator>
          </NavigationContainer>
        );
       
      }
    
    }

'''

This is from App.js

question from:https://stackoverflow.com/questions/65907480/react-native-expo-custom-fonts

Answer 1

Waitting for answers