taskrabbit / react-native-parsed-text

Parse text and make them into multiple React Native Text elements
MIT License
1.2k stars 164 forks source link

[Android] Incorrect bold font processing #88

Open ivankdev opened 3 years ago

ivankdev commented 3 years ago

Preconditions:

Platform: Android

"react-native": "0.63.3", 
"react-native-parsed-text": "^0.0.22",

Issue:

Could someone explain this behavior? And how could we fix it?

code:

 <ParsedText style={{fontSize: 50, fontFamily: Nobblee.Bold}}>
    {'HELLO'}
 </ParsedText>

result (as expected)

Screenshot 2020-10-20 at 23 27 33

code:

 <ParsedText style={{fontSize: 50, fontFamily: Nobblee.Bold}} parse={[]}>
    {'HELLO'}
 </ParsedText>

result (as NOT expected)

Screenshot 2020-10-20 at 23 26 51

And this happens for any array of parse param. BUT SHOULD NOT! I configured some banch of parse templates, but usual text is affected because of this. Any clues?


I've put this font here as well EENobblee-Bold.ttf.zip

ivankdev commented 3 years ago

@fbartho, anyone? any clues?

fbartho commented 3 years ago

@aviemore no idea! -- this is super interesting. It might be a bug in how the top level text object is built. I would expect those two cases to be the same.

I would try to compare the Component tree in both cases (using the Inspector).

I suspect something different is happening in parse() here: https://github.com/taskrabbit/react-native-parsed-text/blob/fded31e2012959d1d4c3ade0e47e4d826e732fd0/src/ParsedText.js#L110

miamiappmachine commented 3 years ago

Same issue here, hates any font beyond a regular weight. Bold, semibold, all act the same on Android

fbartho commented 3 years ago

@miamiappmachine Have you tried to use the inspector to understand what's happening to the Text / Font Styling?

miamiappmachine commented 3 years ago

Bizarrely I can't even select it on the element inspector in Android. No problem at all to select it on iOS (where it works perfectly)

fbartho commented 3 years ago

That is indeed super strange. Maybe React-Native Android no longer supports Nested <Text> objects? This is the type of platform-specific difference that has cropped up in the past (Shadows are different on iOS vs Android, <Image> can be embedded in one of the <Text> implementations but not the other…)

Please do report back what you found. I would totally accept a PR if you find the root issue! -- My team's apps no longer use this library (this was previously used by our Chat code, but we now have a Vendor for that, and that vendor doesn't use this library).

So while I'm happy to help review code, and find a fix, I don't have an experimental test-bed actively set up.

miamiappmachine commented 3 years ago

Hey all - problem solved. Patch file attached.

react-native-parsed-text+0.0.22.patch.zip