Expo-font usefonts hook not working properly

Expo SDK
1

Please provide the following:

  1. SDK Version: 48
  2. Platforms(Android/iOS/web/all): all
  3. Add the appropriate expo-font

I am trying to load custom fonts in my Expo app, but the !fontsLoaded condition is always true. I have checked all of the common causes for this issue, such as the fonts being in the correct format, being in the correct directory, and having a good network connection. I have also updated Expo and the expo-font package.

2

Same for me, expo 49. Works well in expo go but is stuck in the splash screen on Testflight.
let [ fontsLoaded ] = useFonts({…}) is ever false.

1 Like
3

Hey @rayaan_dev and @makki71,

Can I please ask you to share a minimal reproducible example so that I can take a look as to why there its not behaving as it is supposed to?

4

here is the minimal reproduceable example

import React, { useState } from 'react';
import { View, TouchableOpacity, Text, Image, Modal, FlatList, StyleSheet } from 'react-native';
import { AddComponent, RemoveComponent } from './components/add';
import { useFonts } from 'expo-font';

const App = () => {
  const [showOverlay, setShowOverlay] = useState(false);
  const [selectedProduct, setSelectedProduct] = useState(null);
  const [selectedMeat, setSelectedMeat] = useState(null);
  const [count, setCount] = useState(0);
  const [cart, setCart] = useState([]);

  const [fontsLoaded] = useFonts({ 
    'Playfair' : require('./assets/fonts/Playfair.ttf'),
  });

  if (!fontsLoaded) {
    console.log('failed')
    return null;
  }

I do acknowledge that my fonts are in the same directory mentioned in the above code, and I do acknowledge that I have the correct file names.

@amanhimself
@makki71

5

@amanhismelf