Custom fonts from expo are not working with some components (only in Android)

[doliolarzz]

🐛 Bug Report

The custom fonts are working with Select but, are not working with the Buttons, Tabs and the other components in android (iOS is fine with this).

Expected behavior

As you can see in the example expo snack, only Select displays the correct font, Button doesn't.

Link to runnable example or repository (highly encouraged)

https://snack.expo.io/@doliolarzz/ui-kitten---custom-fonts-are-not-working-with-some-components

UI Kitten and Eva version

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

Environment information

System:
    OS: macOS 11.2
    CPU: (4) x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
  Binaries:
    Node: 15.10.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.6.3 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 30
      Build Tools: 30.0.3
      System Images: android-30 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.7042882
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  npmPackages:
    react: 16.13.1 => 16.13.1 
    react-native: ~0.63.4 => 0.63.4 

[malashkevich]

Hello @doliolarzz,
I see two issues here:
The first issue is that your font for some reason not working with fontWeight: "bold" on Android. And this font weight is the default for our Buttons. So if you set fontWeight: "400" it should work. I don't think it somehow related with UI Kitten.

The second thing is your mapping and I would like to propose you a solution. So instead of setting the new font for the whole app (which is actually correct if you really need it), you can create a custom appearance (or override existing) and set the fontFamily and fontWeight. The only thing you have to keep in mind that you have to override the correct variant group.
So variant group status which is responsible for the color of the button is not the correct one. You have to change the size variant group:

{
  "components": {
    "Button": {
     "appearances": {
        "dotted": {
          "variantGroups": {
            "size": {
              "medium": {
                "textFontFamily": "Codystar_400Regular",
                "textFontWeight": "600"
              }
            }
          }
        }
      }
    }
  }
}

Then you can simply use the following:

<Button appearance='dotted'>{'Test 1'}</Button>