mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Fix font weight numeric values (#29117)
Summary: This issue fixes https://github.com/facebook/react-native/issues/25696 fixes https://github.com/facebook/react-native/issues/28854 fixes https://github.com/facebook/react-native/issues/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: https://github.com/facebook/react-native/pull/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
This commit is contained in:
fabriziobertoglio1987
committed by
Lorenzo Sciandra
Lorenzo Sciandra
parent
0a15927dc1
commit
39e64c01c5
@@ -9,13 +9,16 @@ package com.facebook.react.views.text;
|
||||
|
||||
import android.content.res.AssetManager;
|
||||
import android.graphics.Typeface;
|
||||
import android.os.Build;
|
||||
import android.text.TextUtils;
|
||||
import androidx.annotation.Nullable;
|
||||
import com.facebook.common.logging.FLog;
|
||||
import com.facebook.react.bridge.ReadableArray;
|
||||
import java.util.ArrayList;
|
||||
import java.util.List;
|
||||
|
||||
public class ReactTypefaceUtils {
|
||||
private static final String TAG = "ReactTypefaceUtils";
|
||||
public static final int UNSET = -1;
|
||||
|
||||
public static int parseFontWeight(@Nullable String fontWeightString) {
|
||||
@@ -23,8 +26,8 @@ public class ReactTypefaceUtils {
|
||||
fontWeightString != null ? parseNumericFontWeight(fontWeightString) : UNSET;
|
||||
int fontWeight = fontWeightNumeric != UNSET ? fontWeightNumeric : Typeface.NORMAL;
|
||||
|
||||
if (fontWeight == 700 || "bold".equals(fontWeightString)) fontWeight = Typeface.BOLD;
|
||||
else if (fontWeight == 400 || "normal".equals(fontWeightString)) fontWeight = Typeface.NORMAL;
|
||||
if ("bold".equals(fontWeightString)) fontWeight = Typeface.BOLD;
|
||||
else if ("normal".equals(fontWeightString)) fontWeight = Typeface.NORMAL;
|
||||
|
||||
return fontWeight;
|
||||
}
|
||||
@@ -81,34 +84,50 @@ public class ReactTypefaceUtils {
|
||||
AssetManager assetManager) {
|
||||
int oldStyle;
|
||||
if (typeface == null) {
|
||||
oldStyle = 0;
|
||||
oldStyle = Typeface.NORMAL;
|
||||
} else {
|
||||
oldStyle = typeface.getStyle();
|
||||
}
|
||||
|
||||
int want = 0;
|
||||
if ((weight == Typeface.BOLD)
|
||||
|| ((oldStyle & Typeface.BOLD) != 0 && weight == ReactTextShadowNode.UNSET)) {
|
||||
want |= Typeface.BOLD;
|
||||
int newStyle = oldStyle;
|
||||
boolean italic = false;
|
||||
if (weight == UNSET) weight = Typeface.NORMAL;
|
||||
if (style == Typeface.ITALIC) italic = true;
|
||||
boolean UNDER_SDK_28 = Build.VERSION.SDK_INT < Build.VERSION_CODES.P;
|
||||
boolean applyNumericValues = !(weight < (Typeface.BOLD_ITALIC + 1) || family != null);
|
||||
boolean numericBold = UNDER_SDK_28 && weight > 699 && applyNumericValues;
|
||||
boolean numericNormal = UNDER_SDK_28 && weight < 700 && applyNumericValues;
|
||||
if (weight == Typeface.BOLD) {
|
||||
newStyle = (newStyle == Typeface.ITALIC) ? Typeface.BOLD_ITALIC : Typeface.BOLD;
|
||||
typeface = Typeface.create(typeface, newStyle);
|
||||
}
|
||||
|
||||
if ((style == Typeface.ITALIC)
|
||||
|| ((oldStyle & Typeface.ITALIC) != 0 && style == ReactTextShadowNode.UNSET)) {
|
||||
want |= Typeface.ITALIC;
|
||||
if (weight == Typeface.NORMAL) {
|
||||
typeface = Typeface.create(typeface, Typeface.NORMAL);
|
||||
newStyle = Typeface.NORMAL;
|
||||
}
|
||||
if (style == Typeface.ITALIC) {
|
||||
newStyle = (newStyle == Typeface.BOLD) ? Typeface.BOLD_ITALIC : Typeface.ITALIC;
|
||||
typeface = Typeface.create(typeface, newStyle);
|
||||
}
|
||||
if (Build.VERSION.SDK_INT > Build.VERSION_CODES.O_MR1 && weight > Typeface.BOLD_ITALIC) {
|
||||
typeface = Typeface.create(typeface, weight, italic);
|
||||
}
|
||||
if (family != null && UNDER_SDK_28 && weight > Typeface.BOLD_ITALIC) {
|
||||
FLog.d(
|
||||
TAG,
|
||||
"Support for numeric font weight numeric values with custom fonts under Android API 28 Pie is not yet supported in ReactNative.");
|
||||
}
|
||||
|
||||
if (family != null) {
|
||||
typeface = ReactFontManager.getInstance().getTypeface(family, want, weight, assetManager);
|
||||
} else if (typeface != null) {
|
||||
// TODO(t9055065): Fix custom fonts getting applied to text children with different style
|
||||
typeface = Typeface.create(typeface, want);
|
||||
typeface = ReactFontManager.getInstance().getTypeface(family, newStyle, weight, assetManager);
|
||||
}
|
||||
|
||||
if (typeface != null) {
|
||||
return typeface;
|
||||
} else {
|
||||
return Typeface.defaultFromStyle(want);
|
||||
if (numericBold || numericNormal) {
|
||||
newStyle = numericBold ? Typeface.BOLD : Typeface.NORMAL;
|
||||
typeface = Typeface.create(typeface, newStyle);
|
||||
FLog.d(
|
||||
TAG,
|
||||
"Support for numeric font weight numeric values available only from Android API 28 Pie. Android device lower then API 28 will use normal or bold.");
|
||||
}
|
||||
return typeface;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -383,6 +383,15 @@ class TextExample extends React.Component<{...}> {
|
||||
<RNTesterBlock title="Font Weight">
|
||||
<Text style={{fontWeight: 'bold'}}>Move fast and be bold</Text>
|
||||
<Text style={{fontWeight: 'normal'}}>Move fast and be normal</Text>
|
||||
<Text style={{fontWeight: '900'}}>FONT WEIGHT 900</Text>
|
||||
<Text style={{fontWeight: '800'}}>FONT WEIGHT 800</Text>
|
||||
<Text style={{fontWeight: '700'}}>FONT WEIGHT 700</Text>
|
||||
<Text style={{fontWeight: '600'}}>FONT WEIGHT 600</Text>
|
||||
<Text style={{fontWeight: '500'}}>FONT WEIGHT 500</Text>
|
||||
<Text style={{fontWeight: '400'}}>FONT WEIGHT 400</Text>
|
||||
<Text style={{fontWeight: '300'}}>FONT WEIGHT 300</Text>
|
||||
<Text style={{fontWeight: '200'}}>FONT WEIGHT 200</Text>
|
||||
<Text style={{fontWeight: '100'}}>FONT WEIGHT 100</Text>
|
||||
</RNTesterBlock>
|
||||
<RNTesterBlock title="Font Style">
|
||||
<Text style={{fontStyle: 'italic'}}>Move fast and be italic</Text>
|
||||
|
||||
@@ -603,21 +603,17 @@ exports.examples = [
|
||||
render: function(): React.Node {
|
||||
return (
|
||||
<View>
|
||||
<Text style={{fontSize: 20, fontWeight: '100'}}>
|
||||
Move fast and be ultralight
|
||||
</Text>
|
||||
<Text style={{fontSize: 20, fontWeight: '200'}}>
|
||||
Move fast and be light
|
||||
</Text>
|
||||
<Text style={{fontSize: 20, fontWeight: 'normal'}}>
|
||||
Move fast and be normal
|
||||
</Text>
|
||||
<Text style={{fontSize: 20, fontWeight: 'bold'}}>
|
||||
Move fast and be bold
|
||||
</Text>
|
||||
<Text style={{fontSize: 20, fontWeight: '900'}}>
|
||||
Move fast and be ultrabold
|
||||
</Text>
|
||||
<Text style={{fontWeight: 'bold'}}>Move fast and be bold</Text>
|
||||
<Text style={{fontWeight: 'normal'}}>Move fast and be normal</Text>
|
||||
<Text style={{fontWeight: '900'}}>FONT WEIGHT 900</Text>
|
||||
<Text style={{fontWeight: '800'}}>FONT WEIGHT 800</Text>
|
||||
<Text style={{fontWeight: '700'}}>FONT WEIGHT 700</Text>
|
||||
<Text style={{fontWeight: '600'}}>FONT WEIGHT 600</Text>
|
||||
<Text style={{fontWeight: '500'}}>FONT WEIGHT 500</Text>
|
||||
<Text style={{fontWeight: '400'}}>FONT WEIGHT 400</Text>
|
||||
<Text style={{fontWeight: '300'}}>FONT WEIGHT 300</Text>
|
||||
<Text style={{fontWeight: '200'}}>FONT WEIGHT 200</Text>
|
||||
<Text style={{fontWeight: '100'}}>FONT WEIGHT 100</Text>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user