Expo App using UI Kitten problem loading especific custon font weights

crisfcodes commented 3 years ago

🐛 Bug Report

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:

The fonts path its ok
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.
Font family name is in the correct format.
I'm using React Native UI Kitten and I load the fonts as they suggest in Advanced Configuration and change some especific styles.
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.

To Reproduce

Create a Expo app with expo init my-app and add UI kitten as dependency.

in App component wrap the navigation with ApplicationProvider like so:

<ApplicationProvider {...eva} theme={{ ...eva.light, ...UIKTheme }}>
<RootNavigator />
</ApplicationProvider>

Create and configuring Metro Bundler as UI Kitten documentation reccomends.

Expected behavior

If two typography weights are loaded correctly, why are the other two weights are not loaded? all sizes are expected to load and be usable as normal throughout the app. I don't know if the problem comes from expo, although I don't think this is the problem because then the other two sizes wouldn't load, or the problem is caused by UI Kitten.

Link to runnable example or repository (highly encouraged)

UI Kitten and Eva version

Package	Version
@eva-design/eva	^2.0.0
@ui-kitten/components	^5.0.0

Environment information

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
  Binaries:
    Node: 15.8.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\Desktop\saleor-storefront-react-native\node_
modules\.bin\yarn.CMD
    npm: 7.7.3 - C:\Program Files\nodejs\npm.CMD
    Watchman: 20210110.135312.0 - D:\tools\watchman-v2021.01.11.00
-windows\bin\watchman.EXE
  IDEs:
    Android Studio: Version  4.1.0.0 AI-201.8743.12.41.7042882
  npmPackages:
    react: 16.13.1 => 16.13.1
    react-native: https://github.com/expo/react-native/archive/sdk
-40.0.1.tar.gz => 0.63.2

malashkevich commented 3 years ago

@cristian05 Did you try to apply the custom font to the usual Text component with fontWeight: "normal" or fontWeight: "bold"? We had a similar issue https://github.com/akveo/react-native-ui-kitten/issues/1399 so it might be just related to font/react-native.

crisfcodes commented 3 years ago

@malashkevich Yes I did, fontWeight: "normal" works, the problem is, are only being loaded medium and regular weights. Semibold and Bold are missing. neither the console or expo shown any error.

akveo / react-native-ui-kitten