Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Android: Font weight numeric values do not work with System default fonts of android #28854

Closed
mnkshukl opened this issue May 8, 2020 · 9 comments
Labels
Needs: Triage 🔍 Platform: Android Android applications. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@mnkshukl
Copy link

mnkshukl commented May 8, 2020

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

React native supports Font weight values with Android SDK 28 and above for custom fonts. But with System default fonts these numeric values are not supported. Only value - 700 is for bold and others are for normal font. As android 28 and above supports font weights react-native can spuport font weight for system default fonts also.

React Native version:

System:
OS: Windows 10 10.0.18363
CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
Memory: 39.93 GB / 63.87 GB
Binaries:
Node: 10.20.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.0 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 28, 29
Build Tools: 28.0.3, 29.0.2, 29.0.3
System Images: android-29 | Google Play Intel x86 Atom
Android NDK: 17.2.4988734
IDEs:
Android Studio: Version 3.6.0.0 AI-192.7142.36.36.6392135
Languages:
Java: Not Found
Python: 3.8.2 - D:\Office\Build\OfficeNugetInit\gen\InPath\python.cmd
npmPackages:
@react-native-community/cli: Not Found
react: 16.11.0 => 16.11.0
react-native: 0.62.2 => 0.62.2
npmGlobalPackages:
react-native: Not Found

issue in all react-native versions.

Steps To Reproduce

Create a Text with font weight values from 100 to 900 (without any custom fonts )
only font weight 700 is shown as bold other are shown as normal

Screenshot_1588922598

Expected Results

font weight values should change font effect in android sdk 28 and above.
Expected result should look like this

Screenshot_1588921349

Snack, code example, screenshot, or link to a repository:

"
<Text style={{fontSize: 20, fontWeight: 'bold'}}>Move fast and be bold
<Text style={{fontSize: 20, fontWeight: 'normal'}}>Move fast and be bold
<Text style={{fontSize: 20, fontWeight: '100'}}>Move fast and be bold
<Text style={{fontSize: 20, fontWeight: '200'}}>Move fast and be bold
<Text style={{fontSize: 20, fontWeight: '300'}}>Move fast and be bold
<Text style={{fontSize: 20, fontWeight: '400'}}>Move fast and be bold
<Text style={{fontSize: 20, fontWeight: '500'}}>Move fast and be bold
<Text style={{fontSize: 20, fontWeight: '600'}}>Move fast and be bold
<Text style={{fontSize: 20, fontWeight: '700'}}>Move fast and be bold
<Text style={{fontSize: 20, fontWeight: '800'}}>Move fast and be bold
<Text style={{fontSize: 20, fontWeight: '900'}}>Move fast and be bold
"

@react-native-bot react-native-bot added the Platform: Android Android applications. label May 8, 2020
@Maskedman99
Copy link

For me they don't work in ReactJs either :)

@fabOnReact
Copy link
Contributor

fabOnReact commented Jun 2, 2020

https://reactnative.dev/docs/text-style-props#fontweight

image

@Maskedman99 because your font does not support them

@fangasvsass
Copy link

any update? 0.59.10 upgrade to 0.62.2 fontWeight not work

@mnkshukl
Copy link
Author

mnkshukl commented Jun 5, 2020

@fangasvsass - I suppose it supported normal and bold values as <500 for normal and >=500 for bold previous versions which has changed to 700 for bold now.
but All different values are and were never supported for system default fonts.

@fabOnReact

This comment has been minimized.

@Maskedman99
Copy link

@fabriziobertoglio1987 if the changes are small then the PR might get merged quickly.

@stale
Copy link

stale bot commented Sep 11, 2020

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Sep 11, 2020
@stale
Copy link

stale bot commented Sep 20, 2020

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

@stale stale bot closed this as completed Sep 20, 2020
@Maskedman99
Copy link

@fabriziobertoglio1987 if the changes are small then the PR might get merged quickly.

Turns out I was very much wrong ! 😄

pull bot pushed a commit to FreddyZeng/react-native that referenced this issue Jun 5, 2021
Summary:
This issue fixes facebook#25696 fixes facebook#28854 fixes facebook#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

Pull Request resolved: facebook#29117

Test Plan:
Works in all scenarios.

**<details><summary>CLICK TO OPEN TESTS RESULTS</summary>**
<p>

| **BEFORE** | **AFTER** |
|:-------------------------:|:-------------------------:|
|  <img src="https://user-images.githubusercontent.com/24992535/84420949-1daa0e80-ac1b-11ea-9a2e-eaac03dc4533.png"  width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/84490766-edf31900-aca3-11ea-90d8-7c52d2e2be59.png" width="300" height="" /> |

| **AFTER** | **AFTER** |
|:-------------------------:|:-------------------------:|
|  <img src="https://user-images.githubusercontent.com/24992535/84490768-ee8baf80-aca3-11ea-8d3e-937d87b3c56a.png"  width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/84490769-ef244600-aca3-11ea-9dec-5eb70358834b.png" width="300" height="" /> |

| **AFTER** |
|:-------------------------:|
|  <img src="https://user-images.githubusercontent.com/24992535/84490772-f0557300-aca3-11ea-851a-5befc900192c.png"  width="300" height="" />|

</p>
</details>

Reviewed By: lunaleaps

Differential Revision: D28917328

Pulled By: yungsters

fbshipit-source-id: 8b84e855b3a8b87960cb79b9237d452b26974c36
kelset pushed a commit that referenced this issue Jun 16, 2021
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

Pull Request resolved: #29117

Test Plan:
Works in all scenarios.

**<details><summary>CLICK TO OPEN TESTS RESULTS</summary>**
<p>

| **BEFORE** | **AFTER** |
|:-------------------------:|:-------------------------:|
|  <img src="https://user-images.githubusercontent.com/24992535/84420949-1daa0e80-ac1b-11ea-9a2e-eaac03dc4533.png"  width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/84490766-edf31900-aca3-11ea-90d8-7c52d2e2be59.png" width="300" height="" /> |

| **AFTER** | **AFTER** |
|:-------------------------:|:-------------------------:|
|  <img src="https://user-images.githubusercontent.com/24992535/84490768-ee8baf80-aca3-11ea-8d3e-937d87b3c56a.png"  width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/84490769-ef244600-aca3-11ea-9dec-5eb70358834b.png" width="300" height="" /> |

| **AFTER** |
|:-------------------------:|
|  <img src="https://user-images.githubusercontent.com/24992535/84490772-f0557300-aca3-11ea-851a-5befc900192c.png"  width="300" height="" />|

</p>
</details>

Reviewed By: lunaleaps

Differential Revision: D28917328

Pulled By: yungsters

fbshipit-source-id: 8b84e855b3a8b87960cb79b9237d452b26974c36
Setito pushed a commit to Setito/react-native that referenced this issue Jul 17, 2021
Summary:
This issue fixes facebook#25696 fixes facebook#28854 fixes facebook#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

Pull Request resolved: facebook#29117

Test Plan:
Works in all scenarios.

**<details><summary>CLICK TO OPEN TESTS RESULTS</summary>**
<p>

| **BEFORE** | **AFTER** |
|:-------------------------:|:-------------------------:|
|  <img src="https://user-images.githubusercontent.com/24992535/84420949-1daa0e80-ac1b-11ea-9a2e-eaac03dc4533.png"  width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/84490766-edf31900-aca3-11ea-90d8-7c52d2e2be59.png" width="300" height="" /> |

| **AFTER** | **AFTER** |
|:-------------------------:|:-------------------------:|
|  <img src="https://user-images.githubusercontent.com/24992535/84490768-ee8baf80-aca3-11ea-8d3e-937d87b3c56a.png"  width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/84490769-ef244600-aca3-11ea-9dec-5eb70358834b.png" width="300" height="" /> |

| **AFTER** |
|:-------------------------:|
|  <img src="https://user-images.githubusercontent.com/24992535/84490772-f0557300-aca3-11ea-851a-5befc900192c.png"  width="300" height="" />|

</p>
</details>

Reviewed By: lunaleaps

Differential Revision: D28917328

Pulled By: yungsters

fbshipit-source-id: 8b84e855b3a8b87960cb79b9237d452b26974c36
@facebook facebook locked as resolved and limited conversation to collaborators Oct 1, 2021
danilobuerger pushed a commit to feastr/react-native that referenced this issue Oct 28, 2021
Summary:
This issue fixes facebook#25696 fixes facebook#28854 fixes facebook#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

Pull Request resolved: facebook#29117

Test Plan:
Works in all scenarios.

**<details><summary>CLICK TO OPEN TESTS RESULTS</summary>**
<p>

| **BEFORE** | **AFTER** |
|:-------------------------:|:-------------------------:|
|  <img src="https://user-images.githubusercontent.com/24992535/84420949-1daa0e80-ac1b-11ea-9a2e-eaac03dc4533.png"  width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/84490766-edf31900-aca3-11ea-90d8-7c52d2e2be59.png" width="300" height="" /> |

| **AFTER** | **AFTER** |
|:-------------------------:|:-------------------------:|
|  <img src="https://user-images.githubusercontent.com/24992535/84490768-ee8baf80-aca3-11ea-8d3e-937d87b3c56a.png"  width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/84490769-ef244600-aca3-11ea-9dec-5eb70358834b.png" width="300" height="" /> |

| **AFTER** |
|:-------------------------:|
|  <img src="https://user-images.githubusercontent.com/24992535/84490772-f0557300-aca3-11ea-851a-5befc900192c.png"  width="300" height="" />|

</p>
</details>

Reviewed By: lunaleaps

Differential Revision: D28917328

Pulled By: yungsters

fbshipit-source-id: 8b84e855b3a8b87960cb79b9237d452b26974c36
danilobuerger pushed a commit to feastr/react-native that referenced this issue Oct 28, 2021
Summary:
This issue fixes facebook#25696 fixes facebook#28854 fixes facebook#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

Pull Request resolved: facebook#29117

Test Plan:
Works in all scenarios.

**<details><summary>CLICK TO OPEN TESTS RESULTS</summary>**
<p>

| **BEFORE** | **AFTER** |
|:-------------------------:|:-------------------------:|
|  <img src="https://user-images.githubusercontent.com/24992535/84420949-1daa0e80-ac1b-11ea-9a2e-eaac03dc4533.png"  width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/84490766-edf31900-aca3-11ea-90d8-7c52d2e2be59.png" width="300" height="" /> |

| **AFTER** | **AFTER** |
|:-------------------------:|:-------------------------:|
|  <img src="https://user-images.githubusercontent.com/24992535/84490768-ee8baf80-aca3-11ea-8d3e-937d87b3c56a.png"  width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/84490769-ef244600-aca3-11ea-9dec-5eb70358834b.png" width="300" height="" /> |

| **AFTER** |
|:-------------------------:|
|  <img src="https://user-images.githubusercontent.com/24992535/84490772-f0557300-aca3-11ea-851a-5befc900192c.png"  width="300" height="" />|

</p>
</details>

Reviewed By: lunaleaps

Differential Revision: D28917328

Pulled By: yungsters

fbshipit-source-id: 8b84e855b3a8b87960cb79b9237d452b26974c36
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Needs: Triage 🔍 Platform: Android Android applications. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants