I'm trying to load downloaded fonts along with google fonts using Font.loadAsync but it is giving me error:

Unable to resolve module ../../assets/fonts/sf-ui-text/SFUIText-Bold.ttf from /Users/bilal/Work/datumbrain/erp-app/src/utils/useFonts.js:

None of these files exist:
  * SFUIText-Bold.ttf
  * assets/fonts/sf-ui-text/SFUIText-Bold.ttf/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.svg|.native.svg|.svg)

Here is my code in App.js:

import { useCallback, useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux';
import colors from './src/constants/colors';
import AppNavigator from './src/navigation/AppNavigator';
import { store } from './src/redux/store';
import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';
import {
  FiraSans_300Light,
  FiraSans_400Regular,
  FiraSans_500Medium,
} from '@expo-google-fonts/fira-sans';
import { useFonts } from './src/utils/useFonts';

const App = () => {
  const [appIsReady, setAppIsReady] = useState(false);
  const prepare = async () => {
    try {
      const customFonts = await useFonts();
      await SplashScreen.preventAutoHideAsync();
      await Font.loadAsync({
        'Fira Sans 300': FiraSans_300Light,
        'Fira Sans 400': FiraSans_400Regular,
        'Fira Sans 500': FiraSans_500Medium,
        ...customFonts,
      });
    } catch (e) {
      console.warn(e);
    } finally {
      setAppIsReady(true);
      console.log('Loaded fonts...');
    }
  };
  const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);
  useEffect(() => {
    prepare();
  }, []);
  useEffect(() => {
    onLayoutRootView();
  }, [onLayoutRootView]);

  if (!appIsReady) {
    return null;
  }

  return (
    <Provider store={store} style={styles.container}>
      <AppNavigator />
    </Provider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.light,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
export default App;

and useFonts.js:

import * as Font from 'expo-font';

export const useFonts = async () => {
  await Font.loadAsync({
    SF: require('../../assets/fonts/sf-ui-text/SFUIText-Bold.ttf'),
  });
};

CodePudding user response：

1. Сheck the file path, this error occurs when the path is invalid.
2. Your useFonts function doesn't return anything, so you don't need spread in prepare(). If it is called fonts will be loaded anyway.

CodePudding user response：

Please make sure the path here is correct

SF: require('../../assets/fonts/sf-ui-text/SFUIText-Bold.ttf')

For the Font.loadAsync, it looks perfect to me. For extra, you could use useFont hook to make your handling looks better. (It uses Font.loadAsync underneath)