Skip to content

Commit 9353eb5

Browse files
petar.marinovmeta-codesync[bot]
authored andcommitted
- Fix fontVariant stylistic sets being ignored in New Architecture (#55183)
Summary: During an upgrade of ReactNative and switching to new arch, we noticed that Android is ignoring *some* fontVariants. Specifically `stylistic-{num}`. Digging further I noticed that there are `stylistic-{num}` mappings added to `fromRawValue` (in `packages/react-native/ReactCommon/react/renderer/attributedstring/conversions.h`), but are not included for `toMapBuffer` ## Changelog: <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: [ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests --> [Android] [Fixed] - fontVariants `stylistic-{num}` not being propagated correctly Pull Request resolved: #55183 Test Plan: - Added a new free font (FiraCode) that has stylistic features. - Added Text examples for Android showing with and without stylistic features Before and after in order: <img width="1080" height="2400" alt="Before" src="https://github.com/user-attachments/assets/3d21a992-f36a-4ffe-a1b2-8da40b3ee399" /> <img width="1080" height="2400" alt="After" src="https://github.com/user-attachments/assets/f4ee208a-3f98-42d9-b8c2-5b122d2db383" /> Reviewed By: cortinico Differential Revision: D90830140 Pulled By: philIip fbshipit-source-id: 42dbb98641274c0d4c01c501662b2ae59e21927d
1 parent 97c9202 commit 9353eb5

5 files changed

Lines changed: 75 additions & 0 deletions

File tree

packages/react-native/ReactCommon/react/renderer/attributedstring/conversions.h

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1076,6 +1076,66 @@ inline MapBuffer toMapBuffer(const FontVariant &fontVariant)
10761076
if ((int)fontVariant & (int)FontVariant::ProportionalNums) {
10771077
builder.putString(index++, "proportional-nums");
10781078
}
1079+
if ((int)fontVariant & (int)FontVariant::StylisticOne) {
1080+
builder.putString(index++, "stylistic-one");
1081+
}
1082+
if ((int)fontVariant & (int)FontVariant::StylisticTwo) {
1083+
builder.putString(index++, "stylistic-two");
1084+
}
1085+
if ((int)fontVariant & (int)FontVariant::StylisticThree) {
1086+
builder.putString(index++, "stylistic-three");
1087+
}
1088+
if ((int)fontVariant & (int)FontVariant::StylisticFour) {
1089+
builder.putString(index++, "stylistic-four");
1090+
}
1091+
if ((int)fontVariant & (int)FontVariant::StylisticFive) {
1092+
builder.putString(index++, "stylistic-five");
1093+
}
1094+
if ((int)fontVariant & (int)FontVariant::StylisticSix) {
1095+
builder.putString(index++, "stylistic-six");
1096+
}
1097+
if ((int)fontVariant & (int)FontVariant::StylisticSeven) {
1098+
builder.putString(index++, "stylistic-seven");
1099+
}
1100+
if ((int)fontVariant & (int)FontVariant::StylisticEight) {
1101+
builder.putString(index++, "stylistic-eight");
1102+
}
1103+
if ((int)fontVariant & (int)FontVariant::StylisticNine) {
1104+
builder.putString(index++, "stylistic-nine");
1105+
}
1106+
if ((int)fontVariant & (int)FontVariant::StylisticTen) {
1107+
builder.putString(index++, "stylistic-ten");
1108+
}
1109+
if ((int)fontVariant & (int)FontVariant::StylisticEleven) {
1110+
builder.putString(index++, "stylistic-eleven");
1111+
}
1112+
if ((int)fontVariant & (int)FontVariant::StylisticTwelve) {
1113+
builder.putString(index++, "stylistic-twelve");
1114+
}
1115+
if ((int)fontVariant & (int)FontVariant::StylisticThirteen) {
1116+
builder.putString(index++, "stylistic-thirteen");
1117+
}
1118+
if ((int)fontVariant & (int)FontVariant::StylisticFourteen) {
1119+
builder.putString(index++, "stylistic-fourteen");
1120+
}
1121+
if ((int)fontVariant & (int)FontVariant::StylisticFifteen) {
1122+
builder.putString(index++, "stylistic-fifteen");
1123+
}
1124+
if ((int)fontVariant & (int)FontVariant::StylisticSixteen) {
1125+
builder.putString(index++, "stylistic-sixteen");
1126+
}
1127+
if ((int)fontVariant & (int)FontVariant::StylisticSeventeen) {
1128+
builder.putString(index++, "stylistic-seventeen");
1129+
}
1130+
if ((int)fontVariant & (int)FontVariant::StylisticEighteen) {
1131+
builder.putString(index++, "stylistic-eighteen");
1132+
}
1133+
if ((int)fontVariant & (int)FontVariant::StylisticNineteen) {
1134+
builder.putString(index++, "stylistic-nineteen");
1135+
}
1136+
if ((int)fontVariant & (int)FontVariant::StylisticTwenty) {
1137+
builder.putString(index++, "stylistic-twenty");
1138+
}
10791139

10801140
return builder.build();
10811141
}

packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/RNTesterApplication.kt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ internal class RNTesterApplication : Application(), ReactApplication {
119119

120120
override fun onCreate() {
121121
ReactFontManager.getInstance().addCustomFont(this, "Rubik", R.font.rubik)
122+
ReactFontManager.getInstance().addCustomFont(this, "FiraCode", R.font.firacode)
122123
super.onCreate()
123124
loadReactNative(this)
124125
}
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
3+
<font app:fontStyle="normal" app:fontWeight="400" app:font="@font/firacode_regular"/>
4+
</font-family>
Binary file not shown.

packages/rn-tester/js/examples/Text/TextExample.android.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -389,6 +389,16 @@ function FontVariantsExample(props: {}): React.Node {
389389
1111{'\n'}
390390
2222{'\n'}
391391
</RNTesterText>
392+
<RNTesterText style={{fontFamily: 'FiraCode'}}>
393+
Non-Stylistic & and $
394+
</RNTesterText>
395+
<RNTesterText
396+
style={{
397+
fontFamily: 'FiraCode',
398+
fontVariant: ['stylistic-three', 'stylistic-four'],
399+
}}>
400+
Stylistic & and $
401+
</RNTesterText>
392402
</>
393403
);
394404
}

0 commit comments

Comments
 (0)