0

I have created an react-native/typescript app with expo CLI, this generate some base code, inlcuding hooks/useCachedResources to load any resources or data that we need prior to rendering the app, in my case in this hook I load custom fonts(in particular Inter Display Font). I'm experimenting some problems because the app loads only two weights: regular and medium, If I try to use semi-bold or bold this doesnt work and use the san serif font that comes by default.

Additional data:

  1. The fonts path its ok
  2. Expo app doesn't show any error. I have seen in other questions errors such as fontFamily "MyFontFamily" is not a system font and has not been loaded through Font.loadAsync. This is not the case.
  3. Font family name is in the correct format.
  4. I'm using React Native UI Kitten and I load the fonts as they suggest in Advanced Configuration and change some especific styles.
  5. According to some answers The out of the box support for custom fonts on Android is a little limited in React Native. It does not support font weights other than normal and bold. So I tried setting fontWeight: normal or any of the weights but nothing works.

useCachedResources hook

This come by default with expo init my-app.

import * as Font from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import { useEffect, useState } from 'react';

// Error reporting service
import { logger } from '@utils';

export function useCachedResources(): boolean {
  const [isLoadingComplete, setLoadingComplete] = useState(false);

  // Load any resources or data that we need prior to rendering the app
  useEffect(() => {
    async function loadResourcesAndDataAsync() {
      try {
        await SplashScreen.preventAutoHideAsync();

        // Load fonts
        await Font.loadAsync({
          'inter-display-regular': require('../assets/fonts/InterDisplay-Regular.ttf'),
          'inter-display-medium': require('../assets/fonts/InterDisplay-Medium.ttf'),
          'inter-display-semibold': require('../assets/fonts/InterDisplay-SemiBold.ttf'),
          'inter-display-bold': require('../assets/fonts/InterDisplay-Bold.ttf'),
        });
      } catch (loadCachedResourcesError) {
        logger.log(loadCachedResourcesError);
      } finally {
        setLoadingComplete(true);
        await SplashScreen.hideAsync();
      }
    }

    loadResourcesAndDataAsync();
  }, []);

  return isLoadingComplete;
}

Consuming the hook in App.tsx

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import useCachedResources from './hooks/useCachedResources';
import Navigation from './navigation';

// again this comes by defautl expo init command
export default function App(): React.ReactElement | null  {
  const isLoadingComplete = useCachedResources();

  if (!isLoadingComplete) {
    return null;
  } 

  return (
    <SafeAreaProvider>
      <Navigation />
      <StatusBar />
    </SafeAreaProvider>
  );
}

mapping.json: specific UI-Kitten configuration to change font style

I can think that the problem comes from here but the thing is, if there was a problem loading the fonts, either expo would have already thrown an error or the other fonts weights(regular/medium) would not load.

{
  "strict": {
    "text-font-family": "inter-display-regular",

    "text-heading-1-font-size": 32,
    "text-heading-1-font-weight": "normal",
    "text-heading-1-font-family": "inter-display-medium",

    "text-paragraph-1-font-size": 16,
    "text-paragraph-1-font-weight": "normal",
    "text-paragraph-1-font-family": "$text-font-family",
  }
}

The problem

I have no idea if the problem comes from expo, ui kitten or if inter font can't be loaded by react native by some other reason.

Cristian Flórez
  • 2,277
  • 5
  • 29
  • 51

1 Answers1

0

In your useCachedResources try to remove 'await' keyword from SplashScreen method's:

SplashScreen.preventAutoHideAsync(); SplashScreen.hideAsync();

Natrig
  • 1