akveo / react-native-ui-kitten

:boom: React Native UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/react-native-ui-kitten/
MIT License
10.19k stars 952 forks source link

Custom mapping when applying text-font-family is not working correctly on android #1793

Open kamalmplus opened 7 months ago

kamalmplus commented 7 months ago

🐛 Bug Report

Applying strict "text-font-family": "Cairo_400Regular" is not working correctly on android, it applies the font when using , but when used with category='h1', it is not appliead, even if mapping.json had "text-heading-1-font-family": "Cairo_700Bold" for category h1

also, fonts used on are system default, the problem only appears on android.

To Reproduce

Steps to reproduce the behavior:

import {
  Cairo_400Regular,
  Cairo_500Medium,
  Cairo_700Bold,
} from '@expo-google-fonts/cairo';
export const prepareResources = async (setAppIsReadyCallback: Dispatch<SetStateAction<boolean>>) =>
  //   setAppIsReadyCallback: Dispatch<SetStateAction<boolean>>,
  {
    try {
      console.log('Preparing resources...');
      await getSavedLocation();

      console.log('Got saved location§');

      await getOnboardingStatus();
      console.log('Got onboarding status');

      await Font.loadAsync({
        Cairo_400Regular,
        Cairo_700Bold,
        Cairo_500Medium,
      });

      setAppIsReadyCallback(true);
      SplashScreen.hideAsync();
    } catch (e) {
      console.warn(e);
    }
  };

// Loading mapping via metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
const MetroConfig = require('@ui-kitten/metro-config');

module.exports = (async () => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== 'svg'),
    sourceExts: [...resolver.sourceExts, 'svg'],
  };
  const evaConfig = {
    evaPackage: '@eva-design/eva',
    // Optional, but may be useful when using mapping customization feature.
    customMappingPath: 'theme/mapping.json',
  };

  return MetroConfig.create(evaConfig, config);
})();

`

Expected behavior

Fonts determined in mapping.json to applied over all components used by ui-kitten

Link to runnable example or repository (highly encouraged)

UI Kitten and Eva version

Package Version
@eva-design/eva ^2.2.0
@ui-kitten/components ^5.3.1

Environment information

System:
    OS: macOS 14.1.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 18.17.1 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.6.7 - /usr/local/bin/npm
    Watchman: 2023.10.02.00 - /opt/homebrew/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0
    Android SDK:
      API Levels: 31, 33, 33, 34
      Build Tools: 30.0.3, 33.0.0, 33.0.2, 34.0.0
      System Images: android-33 | Google APIs ARM 64 v8a, android-33 | Google Play ARM 64 v8a, android-34 | Google APIs ARM 64 v8a
  IDEs:
    Android Studio: 2022.3 AI-223.8836.35.2231.11090377
    Xcode: 15.0.1/15A507 - /usr/bin/xcodebuild
  npmPackages:
    react: 18.2.0 => 18.2.0 
    react-native: 0.72.6 => 0.72.6 
evansendra commented 7 months ago

Facing the same issue