-
Notifications
You must be signed in to change notification settings - Fork 24.3k
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
[0.60.5] fontWeight Has No Affect on Android When Using Numerical Values #26193
Comments
It's known issue due to Android limitations. Only way to use custom font weights is to create a custom font. Android added support changing font weights programmatically, but won't work on older versions. |
@dulmandakh why old version of react native works? |
So... How would you go about doing that? |
I am facing the same issue, any tips? |
I have the exact same question as @hweister. If this were a pure Android limitation then why does it work in 0.58.6 on the same Android device / emulator? |
I wrote a npm package to handle mapping of custom fonts (eg. Roboto-Light, Roboto-Heavy) to font weights. Heavily modified from jacobcabantomski-ct's code above. |
thanks @aelesia and @jacobcabantomski-ct for idea and code |
Has it been fixed in RN 0.62.0? |
No |
This issue should be reopened |
Only 'bold' seems to be working... Badly need the numerical values. |
I am too facing same issue. |
@Saurabh-stack #29117 fixes this. This issue will be closed once #29117 is merged |
It seems like roboto doesn't have 600 weight |
I still have the same issue can anyone tell me about how to solve it!! |
This is still happening, working with react-native v0.63.3. |
Have any solution to fix that? I not want to use fontWeight : 'bold', it too bold! |
same issue here hic hic |
@anhquan291 I use Platform below: |
Idk why this issue is |
I also have this issue |
Bump. Seeking answers |
The only way for me is a custom font, so you should just change the fontFamily accordingly ('roboto-bold, roboto-regular, etc.') witch is annoying... |
react-native cli v0.64.1 issue still persist |
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
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
Does anyone have a work around for it? |
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
Have any solution to fix that? |
fontWeight 800 not working on Android but it does on iOS |
Example: Solution is next: All cases:
And remember that IOS use post-script font name and Android use full font name |
This isn't documented in the docs, but this is the associated Java code responsible for font-variant loading in Android: /**
* Responsible for loading and caching Typeface objects.
*
* <p>This will first try to load a typeface from the assets/fonts folder. If one is not found in
* that folder, this will fallback to the best matching system typeface.
*
* <p>Custom fonts support the extensions `.ttf` and `.otf` and the variants `bold`, `italic`, and
* `bold_italic`. For example, given a font named "ExampleFontFamily", the following are supported:
*
* <ul>
* <li>ExampleFontFamily.ttf (or .otf)
* <li>ExampleFontFamily_bold.ttf (or .otf)
* <li>ExampleFontFamily_italic.ttf (or .otf)
* <li>ExampleFontFamily_bold_italic.ttf (or .otf)
*/
@Nullsafe(Nullsafe.Mode.LOCAL)
public class ReactFontManager {
// NOTE: Indices in `EXTENSIONS` correspond to the `TypeFace` style constants.
private static final String[] EXTENSIONS = {"", "_bold", "_italic", "_bold_italic"};
private static final String[] FILE_EXTENSIONS = {".ttf", ".otf"};
private static final String FONTS_ASSET_PATH = "fonts/"; This means font variants are quite limited in React Native Android. You can apply However... these are the only options relative to It'd be a nice addition to be able to add additional font variants (beyond just |
Thanks @thuynt99 |
Anybody found the solution? |
@Forpee this should be fixed in the last React Native version v0.65.1 |
Sep 2021 same issue is still going on. |
Version 0.65 includes my pr to this issue. The fontStyle italic was not meant to be used with numeric fontWeights in my PR. My changes do not apply the 100-900 fontWeight if you are using Italic or Bold-Italic styles. The Italic or Bold Italic style over-rides the 100-900 fontWeight. if (style == Typeface.ITALIC) {
newStyle = (newStyle == Typeface.BOLD) ? Typeface.BOLD_ITALIC : Typeface.ITALIC;
typeface = Typeface.create(typeface, newStyle);
} I can try to find an alternative solution and prepare a new pr in the future. The idea behind this was if you are using Bold and/or Italic, we will not use 100-900, but this probably was wrong way to solve this and I should revisit my solution. I also need to verify that numeric fontWeights (100-900) are easy to use and implement in ReactNative with the above functionalities, maybe there are some limitations in the Android API. Remember that fontWeight 100-900 is only available since API 28 if(Build.VERSION.SDK_INT > Build.VERSION_CODES.O_MR1 && weight > Typeface.BOLD_ITALIC) {
typeface = Typeface.create(typeface, weight, italic);
}
The original solution was changed in the Master Branch. |
My implementation: if (family != null) {
typeface = ReactFontManager.getInstance().getTypeface(family, newStyle, weight, assetManager);
}
// some logic
return typeface; The previous implementation: if (family != null) {
typeface = ReactFontManager.getInstance().getTypeface(family, want, weight, assetManager);
}
// some logic
return typeface I did not test the scenario using a specific fontStyle and I did not notice it did not work. react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactFontManager.java Lines 69 to 72 in c447b25
react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TypefaceStyle.java Lines 45 to 55 in c447b25
react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactFontManager.java Lines 74 to 97 in c447b25
I will have to read the changes in master and fix this issue. |
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
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
fontWeight
properties onText
components are not having an affect on Android styles on React Native Version0.60.5
. If I use thebold
value, theText
component picks up thebold
style, but any other value200
up through800
all display the same appearance asnormal
or100
. I performed the same change on RN Version0.59.10
and theText
component is styled correctly.React Native version:
Steps To Reproduce
fontWeight
of aText
component from100
to600
on Android.Describe what you expected to happen:
Text
component should be styled with newfontWeight
, but the style does not change.Snack, code example, screenshot, or link to a repository:
RN 0.60.5
RN 0.59.10
I just used
react-native init
projects at RN0.59.10
and0.60.5
to reproduce this behavior.The text was updated successfully, but these errors were encountered: