[Android] Fix font weight numeric values

[fabOnReact]

Summary

This issue fixes #25696 fixes #28854 fixes #26193
Since Android API 28 it is possible to specify fontWeight with numerical values ranging from 100 to 900

This pr uses the new Typeface.create() method available on Android API 28+ to set font weight value ranging from 100 to 900, while still keeping existing functionalities (custom fonts, bold/italic and other styles).
https://developer.android.com/reference/android/graphics/Typeface#create(android.graphics.Typeface,%20int,%20boolean)

Changelog

[Android] [Fixed] - Fix font weight numeric values

Test Plan

Works in all scenarios.

CLICK TO OPEN TESTS RESULTS

BEFORE	AFTER

AFTER	AFTER

AFTER

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,009,628	567
android	hermes	armeabi-v7a	6,673,226	573
android	hermes	x86	7,429,932	550
android	hermes	x86_64	7,320,815	541
android	jsc	arm64-v8a	9,169,354	446
android	jsc	armeabi-v7a	8,825,092	459
android	jsc	x86	9,017,756	466
android	jsc	x86_64	9,594,851	454

Base commit: 12543d5

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: 12543d5

[fangasvsass]

Looks good!

[JoshuaGross]

@fabriziobertoglio1987 What about iOS?

[fabOnReact]

@JoshuaGross The below are tests on iOS emulator from latest master branch (BEFORE) and from fix-font-weight branch (AFTER). I don't detect any issue on iOS.

Additionally I added a new commit e03864e to include same example on ios RNTester.
Please contact me for any further work, improvements or issues. I will immediately fix them.

Thanks a lot
I wish you a good day
Fabrizio Bertoglio

BEFORE	AFTER

AFTER e03864e

AFTER	AFTER

[LeeKyungJoon]

@fabriziobertoglio1987
Hey, it says your Merge has failed. As a result, fontWeight in android is still not applied to numeral values. Can you check it again?

[fabOnReact]

Thanks for reviewing this pull request @LeeKyungJoon, currently I am working on another Pull Request full-time and I'm sending you a quick reply. I will come back to this pull request and re-execute all the tests/verify everything is working correctly in 2-3 days.

Hey, it says your Merge has failed. As a result, fontWeight in android is still not applied to numeral values. Can you check it again?

Your message is not not clear to me. I don't know if you are trying to implement this fix/pull request, in such case you will need to build ReactAndroid from source.

This pull request is not yet merged to master. Once the pull request is merged in the react-native master branch, you can expect it to be available as npm package as a release candidate for testing, then will be published as release. You can upgrade at that time react-native dependency and use the upgrade tool and use the numeric falues for the font. You can expect it to be available as npm package in 2-6 months.

Instead, If you are referring to potential merge conflicts from this commit e03864e and to the fact this branch was written on an Ubuntu Machine and then tested on MacBook machine. I did not make any changes to this pull request using the MacBook, but just checkout and test this branch. The commits were all written on my Ubuntu machine, as sometimes using 2 different machines to change the same branch will create merge conflicts. I rebased before publishing the Pull Request and all CI tests are passing.

Thanks a lot
I remain available for further help
Fabrizio Bertoglio

[LeeKyungJoon]

@fabriziobertoglio1987
Thank you for your answer. I don't need it right now. However, I tried to use numeral values to implement more accurate fontWeight. I'm using the reaction-native 63.0 now, and I was wondering if it should be applied to this version. And if Merge fails in my question, I misunderstood the expression Merging is Blocked. I'm sorry.
"You can expect it to be available as npm package in 2-6 months."
I'll believe you and wait.
Thank you again for your answer.

[stackia]

Typeface.create(typeface, weight, italic);

This is only available to Android API >= 28.

[fabOnReact]

Typeface.create(typeface, weight, italic);

This is only available to Android API >= 28.

@stackia thanks a lot. You are right. I will try to fix it as soon as possible. Sorry. I wish you a good day. Fabrizio

[fabOnReact]

@stackia Thanks a lot for your help

This is the screenshot of the functionality disabled on API < 28, changes included in b016126

[AlphaJuliettOmega]

It's bizarre to have only 'normal' and 'bold' font weights on Android but variable font sizes work on iOs
RN .64

on Android 700 defaults to 'Bold'
800+ becomes 'normal'

Now I have to implement platform specific font weights &/ somehow generate a font for each weight from a single font or disregard app designs to get the app to look similar on iOs + Android

[Kylar13]

Is there an update on this? How could we help get this through the door?

[facebook-github-bot]

@yungsters has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[yungsters]

Thank you for your contribution, @fabriziobertoglio1987. I just verified this locally (and made some notes for what this change means for Fabric) and expect it to be merged after Facebook CI succeeds.

[facebook-github-bot]

@yungsters merged this pull request in 3827ca6.

[andreialecu]

If you'd like to help give this a better chance to be part of 0.64.3, upvote this comment for visibility in the upcoming v0.64.3 cherrypicks discussion:

react-native-community/releases#232 (comment)

[tushar-singhal]

this will be the part of 0.66 🎉

[manuhook]

this will be the part of 0.66 🎉

Seems it's already in 0.65.x

[enzzoperez]

Hi!, thanks for the PR, I recently migrated from 0.61 to 0.65.1 and only words (normal,bold, bolder, etc) in fontWeight for my custom fonts works.. 🤔 , is there any aditional config to add about the fonts?

[fabOnReact]

@enzzoperez I'll prepare a fix after 15th November #26193 (comment) thanks

[darkbasic]

I'll prepare a fix after 15th November #26193 (comment) thanks

Does it mean it still doesn't work? I thought this was supposed to fix the issue.

[fabOnReact]

@darkbasic sorry. I used the wrong word. It is not a fix. The functionality works, but I would like to improve it so that it's easier to use and more intuitive. Developers should not end up reading the internal docs, prs and issues to understand it. Unluckily, I don't have any more savings in my bank account and I need to work right now, I had to give priorities to other activities as OpenSouce does not allow me to pay my basic expenses. For this reason there is a delay of 1.5 months. Thanks a lot.

[MauriceArikoglu]

@fabriziobertoglio1987 thanks for caring 👍

[fabOnReact]

@MauriceArikoglu I'll try to find free time to work on improving this functionality in the future, but will take some months. Thanks a lot

[pke]

This still doesn't work. I wonder if no one at facebook is using bold font faces in their apps?

[fabOnReact]

#26193 (comment)
did not have any free time to work on this. sorry