Picker (or TextInput) fontFamily breaks another component fontFamily

[steida]

Bug

When I set Picker a fontFamily, completely another component will lost its fontFamily style.

I will try to make and demo, meanwhile, some users can have a similar problem so I created an issue.

Btw, the bug I reported is still there: I updated an issue.
#879

Also, this is very probably related: #860 (comment)

[steida]

There must be some race condition because I have two almost exactly the same apps. Here it works http://github.com/este/este, but in another private repo, when I add font family, completely another component will lose it.

[steida]

As I debug it, it seems fontFamily is somehow incorrectly cached when I slightly change a definition for a picker, it works.

[steida]

Just investigated the same behavior exists for TextInput.

[steida]

Trying to isolate in glitch, without a success so far :-/
Leaving it here for further experimentation.

https://glitch.com/edit/#!/common-billboard

[necolas]

I can't tell what you're trying to do in that glitch

[steida]

Demonstrate a bug of course. I am using fairly complex setup: http://github.com/este/este
Isolation isn't easy, give me a time, please.

[steida]

Anytime I set fontFamily for more components, one of them will lose it. It's happening I don't know why. Trying to isolate as much app code as possible.

[necolas]

Also, this is very probably related: #860 (comment)

Picker doesn't support font family. See https://necolas.github.io/react-native-web/storybook/

[steida]

I just tried to replace import { StyleSheet } from 'react-native'; in my theme file with stub

const StyleSheet = {
  create: styles => styles,
};

And bug disappeared. Maybe I am doing something wrong.

[steida]

It seems to be related to StyleSheet, not picker. Now I am investigating the same issue with TextInput.

[steida]

Btw, so Picker fontSize isn't possible to set for web? It makes sense if RN does not support it.

[steida]

It's definitely related to import { StyleSheet } from 'react-native'; Inline styles works well. Still don't know how to isolate it :-/

[steida]

@necolas OK, It's time to give up it. Whenever I set a font family to TextInput, Text will lose it. There is definitely a bug in RNW StyleSheet. This is workaround I am going to use because don't know RNW source enough to be able to fix it.

textInput: StyleSheet.create({
    input: {
      color: colors[textColor],
      fontFamily: fontFamily + ' ',
      marginBottom: rhythm(1),
    },
  }),

[necolas]

And this is not something you can reproduce in a simple test case? I'm not asking you to fix it at this stage. Are you mixing RNW with CSS from somewhere else?

[steida]

No, because there is probably some race condition. As I wrote, I have two almost the same apps, it works in first and doesn't in second.

[necolas]

I had a look at https://github.com/este/este/blob/79fac538e710050893f4328eb0e4024bd833ce57/themes/theme.js

This is not needed because it's handled within RNW when you use the System font-family: https://github.com/este/este/blob/79fac538e710050893f4328eb0e4024bd833ce57/themes/theme.js#L49

This is not a valid style definition: https://github.com/este/este/blob/79fac538e710050893f4328eb0e4024bd833ce57/themes/theme.js#L55-L58
https://github.com/este/este/blob/79fac538e710050893f4328eb0e4024bd833ce57/themes/theme.js#L230-L234

[steida]

@necolas If it was my fault, please tell me where I shall send some bitcoins.

[necolas]

Let me know if editing that este code doesn't resolve the issue

[steida]

@necolas What's wrong with that? It's normal style definition. color and fontFamily.

[steida]

As for "This is not needed because it's handled within RNW when you use the System font-family"

How is it related? I suppose it's perfect valid case to set custom fontFamily even similar to System. Am I wrong?

[necolas]

What's wrong with that? It's normal style definition

Sorry, I was confused by the way you've defined the styles in another object.

I suppose it's perfect valid case to set custom fontFamily even similar to System

Sure

[steida]

As for "Are you mixing RNW with CSS from somewhere else?" I used Next.js example. Nothing more I am aware of.

[steida]

I guess there is something wrong with a cache. Este example works well, but the same Este app with less / different order components breaks fontFamily. I had the same issue when I tried to put styles to anchor manually instead of using Text with role prop which should work even it's not needed.

[steida]

@necolas Not sure how the last commit should fix it. I tried fontFamily Arial with the same result.

[necolas]

Last commit is unrelated. Without a test case or running example I can't help

[steida]

I hope it's broken only for fontFamily. I will keep you informed.

[steida]

Hmm, I think I know where is the problem. When I add fontFamily to TextInput, Text font inherit became stronger than fontFamily. That's weird.

@necolas Any idea why it can happen?

I will repeat it to be clear: When I add the same fontFamily as Text has to TextInput, Text will render with incorrect CSS specificity.

[steida]

Note font inherit is later then fontFamily (first and last row). I bet this is the reason.

[steida]

When I remove fontFamily from TextInput, Text fontFamily is rendered with correct specificity / order.

[steida]

Thank you a lot for your hard super awesome work. RNW is gold.