Skip to content

Commit

Permalink
Fix font weight numeric values (#29117)
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@fabOnReact @facebook-github-bot
fabOnReact authored and facebook-github-bot committed Jun 5, 2021
1 parent b4cde15 commit 3827ca6
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 36 deletions.
61 changes: 40 additions & 21 deletions ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTypefaceUtils.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,25 @@

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) {
int fontWeightNumeric =
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;
}
Expand Down Expand Up @@ -81,34 +84,50 @@ public static Typeface applyStyles(
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;
}

/**
Expand Down
9 changes: 9 additions & 0 deletions packages/rn-tester/js/examples/Text/TextExample.android.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -388,6 +388,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>
Expand Down
26 changes: 11 additions & 15 deletions packages/rn-tester/js/examples/Text/TextExample.ios.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
},
Expand Down

0 comments on commit 3827ca6

Please sign in to comment.