-
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
fontWeight behavior changed on Android between <0.60.0 and >= 0.60.0 - now high font weights can default to low ones #25696
Comments
It looks like this originates from this commit 3915c0f#diff-d4141c42bc6789637b6fdc7754ec1dd9 In particular, the commit message says:
|
I don't really know if this is an issue or not then - this is the code i am using to 'fix' the fonts in my code base, this does not apply if you are using custom fonts and it is not using the roboto default which does not seem to support very many font weights out of the box.
|
Shouldn't this issue be open? It's definitely not desired behaviour if a fontWeight of '900' defaults to Roboto Regular on Android. This essentially means I have to either use the hack mentioned by @iamacup or use a custom font that includes all the font weights I need. |
@iamacup |
+1
|
@iamacup Could you re-open this issue? |
Done :) |
@jorgemasta His solution is simulating the previous font weight rendering on android. I ended up using his solution to do something similar in our code base for our custom text component. // @flow
import * as React from 'react';
import { StyleSheet, Text as RNText, Platform } from 'react-native';
type Props = {|
...
style: {} | number | $ReadOnlyArray<?{} | ?number | null>,
title: ?boolean,
medium: ?boolean,
italic?: ?boolean,
|};
const styles = StyleSheet.create({
...
medium: { fontWeight: '500' },
androidMedium: {
fontFamily: 'Roboto-Medium',
fontWeight: '500',
},
roboto100: {
fontFamily: 'Roboto-Thin',
},
roboto100Italic: {
fontFamily: 'Roboto-ThinItalic',
},
roboto300: {
fontFamily: 'Roboto-Light',
},
roboto300Italic: {
fontFamily: 'Roboto-LightItalic',
},
roboto400: {
fontFamily: 'Roboto-Regular',
},
roboto400Italic: {
fontFamily: 'Roboto-Italic',
},
roboto500: {
fontFamily: 'Roboto-Medium',
},
roboto500Italic: {
fontFamily: 'Roboto-MediumItalic',
},
roboto700: {
fontFamily: 'Roboto-Bold',
},
roboto700Italic: {
fontFamily: 'Roboto-BoldItalic',
},
roboto900: {
fontFamily: 'Roboto-Black',
},
roboto900Italic: {
fontFamily: 'Roboto-BlackItalic',
},
});
...
const androidGetFontWeightStyles = ({
title,
medium,
italic,
style,
}: Props): {} => {
if (title || medium) {
return styles.androidMedium;
}
// $FlowFixMe
if (style && style.fontWeight !== undefined) {
// $FlowFixMe
const isItalic = italic || style.fontStyle === 'italic';
const fontFamilyStyle =
styles[`roboto${style.fontWeight}${isItalic ? 'Italic' : ''}`];
if (fontFamilyStyle) {
return fontFamilyStyle;
}
}
return {};
};
const getFontWeightStyles = (props: Props): {} => {
if (Platform.OS === 'android') {
return androidGetFontWeightStyles(props);
}
if (props.title || props.medium) {
return styles.medium;
}
return {};
};
export default function Text(props: Props) {
...
const textStyles = [
...
getFontWeightStyles(props),
];
...
return (
<RNText style={textStyles}>
...
</RNText>
);
}
... |
I introduced the change to add support for other font weights natively and fix parity with iOS. Custom font weight support wasn't available when RN emerged, but added later in SDK 25 or 26. |
I wrote an npm package to handle mapping of custom fonts (eg. Roboto-Light, Roboto-Black) to fontWeights heavily modified from jacobcabantomski-ct's code. |
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. |
? |
Has it been fixed in RN 0.62.0? |
Still an issue in 0.62.0 |
Same issue. RN 0.62.0 not fixed. |
I quote #25341
I will write a Pull Request to re-enable to old behaviour on Android API < 28 in ReactBaseTextShadowNode @ReactProp(name = ViewProps.FONT_WEIGHT)
public void setFontWeight(@Nullable String fontWeightString) {
int fontWeightNumeric =
fontWeightString != null ? parseNumericFontWeight(fontWeightString) : -1;
int fontWeight = UNSET;
if (fontWeightNumeric >= 500 || "bold".equals(fontWeightString)) {
fontWeight = Typeface.BOLD;
} else if ("normal".equals(fontWeightString)
|| (fontWeightNumeric != -1 && fontWeightNumeric < 500)) {
fontWeight = Typeface.NORMAL;
} as you can see in #25341 react-navigation/react-navigation#7720 will have to update their logic to use this changes... Additionally this is the result of #25341 with API 28 I am little bit confused, but I will write this pull request as I invested considerable amount of time reviewing all this discussions. |
I don't understand your sentence below. Do you believe that I can present a pull request with such a change in behaviour? Do you expect ReactNative to solve some of the limitations imposed by the Android Platform? Or you want me to do the change I described in #25696 (comment)
I think you should close this issue in favour of #28854. Your requirement is not clear. I quote issue #28854
I quote #26193 (comment)
My pull request should fix this behaviour for Android Pie API 28. |
react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTypefaceUtils.java Line 110 in b4c1392
Publishing Pull Request Tonight |
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. |
Not fixed |
Still not fixed |
React native is great but its things like this that just makes it feel unfinished. 2 years has passed and it still isn't fixed. The problem is that it worked with older RN versions and now it's broken. |
Why would developer depend or specify non-existing font weight. I would rather offer consistent UX by specifying font weights explicitly |
bump. still having issues with 64.0... |
I've managed a way to fix it, so go to /android/app/main/assets/fonts/ and rename all the fonts from: 'font-regular.ttf' to 'font-400.ttf' and rename all the fonts according to the table with font weights |
Not really a fix, more a workaround. This needs a real fix from the framework vendor's side. Especially considering this worked before. Edit: It must be some form of neglect ignoring this for the last 317 days. I really have no words for this. |
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
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
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
Any idea when this will be released? |
@SurajMDurgad it already was in RN 0.66 (see the tags on the linked commit) |
But I just tested it on 0.66.3, it still doesn't work, it only works for |
2 years later, still not fixed |
Prior to 0.60.0 font weights that were not supported but were high would default to the nearest 'bold' font. Now they just default to a non-bold font.
React Native version:
Steps To Reproduce
1a.
react-native init AwesomeProject
(at time of writing defaults to version 0.60.3)2a. Use this code in
App.js
3a. Run the app in an emulator or on device
4a. Output: https://imgur.com/VEpgKzC
react-native info
THEN
1b.
react-native init AwesomeProject2 --version 0.59.9
2b. Use code from above in App.js
3b. Run the app in an emulator or on device
4b. Output: https://imgur.com/ZW9hZGU
react-native info
Describe what you expected to happen:
When an unsupported font weight is higher than a supported, non standard font weight, the default should be picked as the fatter one not the skinny one.
Snack, code example, or link to a repository:
The text was updated successfully, but these errors were encountered: