Button text seems inconsistent between iOS and Android (OpenSans is configured)

[Codelica]

💬 Question

My Expo/RN app is setup to user OpenSans per instructions and after adding font-family info to my mapping file (for all text styles) everything is very consistent across iOS and Android -- except for Button text.

As mentioned, I do have OpenSans installed, loaded during startup, and configured with the following mapping:

"strict": {
    "text-font-family": "OpenSans-Regular",
    "text-heading-1-font-family": "OpenSans-Bold",
    "text-heading-2-font-family": "OpenSans-Bold",
    "text-heading-3-font-family": "OpenSans-Bold",
    "text-heading-4-font-family": "OpenSans-Bold",
    "text-heading-5-font-family": "OpenSans-Bold",
    "text-heading-6-font-family": "OpenSans-Bold",
    "text-subtitle-1-font-family": "OpenSans-SemiBold",
    "text-subtitle-2-font-family": "OpenSans-SemiBold",
    "text-paragraph-1-font-family": "OpenSans-Regular",
    "text-paragraph-2-font-family": "OpenSans-Regular",
    "text-caption-1-font-family": "OpenSans-Regular",
    "text-caption-2-font-family": "OpenSans-Regular",
    "text-label-font-family": "OpenSans-Bold"
  },

However when doing a simple <Button>Text</Button> the results seem inconsistent across platforms. The following screenshot was taken with the following code:

<Button>Plain Text</Button>
<Button><Text>Text Component</Text></Button>
<Button>{() => <Text>Text Component Function</Text>}</Button>

I left a little "calendar event time" section from the app below it just to show that text is very consistent otherwise.

From the sample you can see that I can make things consistent by using a function component wrapper, but am curious if I have something wrong before having to do that throughout ?

Thanks.. Kitten is awesome :)

UI Kitten and Eva version

Package	Version
@eva-design/eva	2.1.1
@ui-kitten/components	5.1.1

[Codelica]

After looking though the Eva mapping.json file Button section further, I found the issue. Basically the textFontFamily is set to text-font-family, which is in turn set to OpenSans-Regular for me.

...
            "appearances": {
                "filled": {
                    "mapping": {
                        "textFontFamily": "text-font-family",
                        "iconMarginHorizontal": 4
                    },
...

However, later the textFontWeight for all the button sizes is set to bold. So it seems that Android's font renderer must be able to manually "bold" OpenSans-Regular where iOS doesn't. By setting textFontFamily to OpenSans-Bold things are not consistent for me. 👍

[lbuttignol]

I'm facing the same issue without using Expo. I'm wondering, did you find a solution @Codelica or should I use a wrapper to make font styles consistent in both platforms IOS and Android?

[Codelica]

@lbuttignol in the end my issue was that some styles were requesting bold styling from OpenSans-Regular which Android tried to accommodate by adding some stroke weight where iOS didn't. By setting those areas to OpenSans-Bold, both were bolded as expected. If that's what you're running into, you should be able to normalize things with a "component mapping" for Kitten UI. For me it was adding a section like this that gets merged into ApplicationProvider, since I was only really seeing it in the filled buttons.

...
"components": {
  "Button": {
    "meta": {
      "scope": "all",
      "appearances": {},
      "parameters": {},
      "states": {},
      "variantGroups": {}
    },
    "appearances": {
      "filled": {
        "mapping": {
            "textFontFamily": "OpenSans-Bold"
        },
      }
    }
  },
...

[masadsummair]

Does somebody find any solution yet?