expo-fonts: Cannot assign to 'useFonts' because it is a read-only property

Question

Cannot assign to 'useFonts' because it is a read-only property

I'm using expo and trying to import a .ttf font to my react-native project (TypeScript).

I tried to create a hook "useFont" to load all fonts before open the aplication (see React Native Expo - Custom Fonts Not Loading With Font.loadAsync).

At first I tried:

import * as Font from "expo-font";

export default useFonts = async () =>
    await Font.loadAsync({
        'LeagueSpartan': require('../assets/fonts/LeagueSpartan.ttf'),
    });

and the error Cannot find name 'useFonts' appears.

So i tried:

import * as Font from "expo-font";

export default Font.useFonts = async () =>
    await Font.loadAsync({
        'LeagueSpartan': require('../assets/fonts/LeagueSpartan.ttf'),
    });

and now I receiving Cannot assign to 'useFonts' because it is a read-only property

It feels like no one is correct actualy. Can someone help me?

Answer 1

The problem is you're exporting using default

Try:

import * as Font from "expo-font";

export const useFonts = async () =>
  await Font.loadAsync({
    'LeagueSpartan': require('../assets/fonts/LeagueSpartan.ttf'),
  });

And then to use it just import it using

import { useFonts } from './path-to-your-file';