Skip to content

Commit c09b71b

Browse files
LeviWilliamsfacebook-github-bot
LeviWilliams
authored and
facebook-github-bot
committed
Fabric: Support stylistic sets for fontVariant (#48674)
Summary: In the old arch, stylistic sets were supported however in the new arch support was not added. It seems that fontVariant support was actually initially missed on iOS fabric however a limited version was added in #44112 . I referenced that PR and also old arch implementation for these changes. <img width="480" alt="Screenshot 2025-01-14 at 11 15 18 AM" src="https://github.com/user-attachments/assets/ec32a356-fadd-4281-83b9-15871bbcd18f" /> ## Changelog: <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests --> [GENERAL] [ADDED] - Support stylistic sets for fontVariant Pull Request resolved: #48674 Test Plan: - Verified that the "Unsupported FontVariant" native log no longer displays on both platforms - On iOS was easy to test in the tester app as SF supports stylistic sets by default: ``` <Text> Stylistic{'\n'} <Text>Normal: ${'\n'}</Text> <Text style={{fontVariant: ['stylistic-four']}}> Stylistic Four: $ </Text> </Text> ``` <img width="391" alt="Screenshot 2025-01-14 at 11 59 29 AM" src="https://github.com/user-attachments/assets/1ede258e-783f-448f-8300-4c8c710796ef" /> - On Android I could not find any system fonts that support stylistic sets by default so I added Raleway and confirmed with a W character ![image](https://github.com/user-attachments/assets/e4b661ba-0013-4e60-90d0-1864be538159) I did not add font variant example to the tester apps as I felt it could be confusing for people at a glance to understand why there is only a system font example on iOS and why I chose the specific stylistic set. Reviewed By: cipolleschi Differential Revision: D68205738 Pulled By: javache fbshipit-source-id: 03ce572d3c8ecafca71fe00fc0e88eeafc2558bb
1 parent a18bc58 commit c09b71b

File tree

4 files changed

+288
-1
lines changed

4 files changed

+288
-1
lines changed

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -317,6 +317,53 @@ inline void fromRawValue(
317317
} else if (item == "proportional-nums") {
318318
result =
319319
(FontVariant)((int)result | (int)FontVariant::ProportionalNums);
320+
} else if (item == "stylistic-one") {
321+
result = (FontVariant)((int)result | (int)FontVariant::StylisticOne);
322+
} else if (item == "stylistic-two") {
323+
result = (FontVariant)((int)result | (int)FontVariant::StylisticTwo);
324+
} else if (item == "stylistic-three") {
325+
result = (FontVariant)((int)result | (int)FontVariant::StylisticThree);
326+
} else if (item == "stylistic-four") {
327+
result = (FontVariant)((int)result | (int)FontVariant::StylisticFour);
328+
} else if (item == "stylistic-five") {
329+
result = (FontVariant)((int)result | (int)FontVariant::StylisticFive);
330+
} else if (item == "stylistic-six") {
331+
result = (FontVariant)((int)result | (int)FontVariant::StylisticSix);
332+
} else if (item == "stylistic-seven") {
333+
result = (FontVariant)((int)result | (int)FontVariant::StylisticSeven);
334+
} else if (item == "stylistic-eight") {
335+
result = (FontVariant)((int)result | (int)FontVariant::StylisticEight);
336+
} else if (item == "stylistic-nine") {
337+
result = (FontVariant)((int)result | (int)FontVariant::StylisticNine);
338+
} else if (item == "stylistic-ten") {
339+
result = (FontVariant)((int)result | (int)FontVariant::StylisticTen);
340+
} else if (item == "stylistic-eleven") {
341+
result = (FontVariant)((int)result | (int)FontVariant::StylisticEleven);
342+
} else if (item == "stylistic-twelve") {
343+
result = (FontVariant)((int)result | (int)FontVariant::StylisticTwelve);
344+
} else if (item == "stylistic-thirteen") {
345+
result =
346+
(FontVariant)((int)result | (int)FontVariant::StylisticThirteen);
347+
} else if (item == "stylistic-fourteen") {
348+
result =
349+
(FontVariant)((int)result | (int)FontVariant::StylisticFourteen);
350+
} else if (item == "stylistic-fifteen") {
351+
result =
352+
(FontVariant)((int)result | (int)FontVariant::StylisticFifteen);
353+
} else if (item == "stylistic-sixteen") {
354+
result =
355+
(FontVariant)((int)result | (int)FontVariant::StylisticSixteen);
356+
} else if (item == "stylistic-seventeen") {
357+
result =
358+
(FontVariant)((int)result | (int)FontVariant::StylisticSeventeen);
359+
} else if (item == "stylistic-eighteen") {
360+
result =
361+
(FontVariant)((int)result | (int)FontVariant::StylisticEighteen);
362+
} else if (item == "stylistic-nineteen") {
363+
result =
364+
(FontVariant)((int)result | (int)FontVariant::StylisticNineteen);
365+
} else if (item == "stylistic-twenty") {
366+
result = (FontVariant)((int)result | (int)FontVariant::StylisticTwenty);
320367
} else {
321368
LOG(ERROR) << "Unsupported FontVariant value: " << item;
322369
react_native_expect(false);
@@ -346,6 +393,66 @@ inline std::string toString(const FontVariant& fontVariant) {
346393
if ((int)fontVariant & (int)FontVariant::ProportionalNums) {
347394
result += "proportional-nums" + separator;
348395
}
396+
if ((int)fontVariant & (int)FontVariant::StylisticOne) {
397+
result += "stylistic-one" + separator;
398+
}
399+
if ((int)fontVariant & (int)FontVariant::StylisticTwo) {
400+
result += "stylistic-two" + separator;
401+
}
402+
if ((int)fontVariant & (int)FontVariant::StylisticThree) {
403+
result += "stylistic-three" + separator;
404+
}
405+
if ((int)fontVariant & (int)FontVariant::StylisticFour) {
406+
result += "stylistic-four" + separator;
407+
}
408+
if ((int)fontVariant & (int)FontVariant::StylisticFive) {
409+
result += "stylistic-five" + separator;
410+
}
411+
if ((int)fontVariant & (int)FontVariant::StylisticSix) {
412+
result += "stylistic-six" + separator;
413+
}
414+
if ((int)fontVariant & (int)FontVariant::StylisticSeven) {
415+
result += "stylistic-seven" + separator;
416+
}
417+
if ((int)fontVariant & (int)FontVariant::StylisticEight) {
418+
result += "stylistic-eight" + separator;
419+
}
420+
if ((int)fontVariant & (int)FontVariant::StylisticNine) {
421+
result += "stylistic-nine" + separator;
422+
}
423+
if ((int)fontVariant & (int)FontVariant::StylisticTen) {
424+
result += "stylistic-ten" + separator;
425+
}
426+
if ((int)fontVariant & (int)FontVariant::StylisticEleven) {
427+
result += "stylistic-eleven" + separator;
428+
}
429+
if ((int)fontVariant & (int)FontVariant::StylisticTwelve) {
430+
result += "stylistic-twelve" + separator;
431+
}
432+
if ((int)fontVariant & (int)FontVariant::StylisticThirteen) {
433+
result += "stylistic-thirteen" + separator;
434+
}
435+
if ((int)fontVariant & (int)FontVariant::StylisticFourteen) {
436+
result += "stylistic-fourteen" + separator;
437+
}
438+
if ((int)fontVariant & (int)FontVariant::StylisticFifteen) {
439+
result += "stylistic-fifteen" + separator;
440+
}
441+
if ((int)fontVariant & (int)FontVariant::StylisticSixteen) {
442+
result += "stylistic-sixteen" + separator;
443+
}
444+
if ((int)fontVariant & (int)FontVariant::StylisticSeventeen) {
445+
result += "stylistic-seventeen" + separator;
446+
}
447+
if ((int)fontVariant & (int)FontVariant::StylisticEighteen) {
448+
result += "stylistic-eighteen" + separator;
449+
}
450+
if ((int)fontVariant & (int)FontVariant::StylisticNineteen) {
451+
result += "stylistic-nineteen" + separator;
452+
}
453+
if ((int)fontVariant & (int)FontVariant::StylisticTwenty) {
454+
result += "stylistic-twenty" + separator;
455+
}
349456

350457
if (!result.empty()) {
351458
result.erase(result.length() - separator.length());

‎packages/react-native/ReactCommon/react/renderer/attributedstring/primitives.h

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,27 @@ enum class FontVariant : int {
4242
OldstyleNums = 1 << 2,
4343
LiningNums = 1 << 3,
4444
TabularNums = 1 << 4,
45-
ProportionalNums = 1 << 5
45+
ProportionalNums = 1 << 5,
46+
StylisticOne = 1 << 6,
47+
StylisticTwo = 1 << 7,
48+
StylisticThree = 1 << 8,
49+
StylisticFour = 1 << 9,
50+
StylisticFive = 1 << 10,
51+
StylisticSix = 1 << 11,
52+
StylisticSeven = 1 << 12,
53+
StylisticEight = 1 << 13,
54+
StylisticNine = 1 << 14,
55+
StylisticTen = 1 << 15,
56+
StylisticEleven = 1 << 16,
57+
StylisticTwelve = 1 << 17,
58+
StylisticThirteen = 1 << 18,
59+
StylisticFourteen = 1 << 19,
60+
StylisticFifteen = 1 << 20,
61+
StylisticSixteen = 1 << 21,
62+
StylisticSeventeen = 1 << 22,
63+
StylisticEighteen = 1 << 23,
64+
StylisticNineteen = 1 << 24,
65+
StylisticTwenty = 1 << 25
4666
};
4767

4868
enum class DynamicTypeRamp {

‎packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTFontProperties.h

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,26 @@ typedef NS_OPTIONS(NSInteger, RCTFontVariant) {
2424
RCTFontVariantLiningNums = 1 << 3,
2525
RCTFontVariantTabularNums = 1 << 4,
2626
RCTFontVariantProportionalNums = 1 << 5,
27+
RCTFontVariantStylisticOne = 1 << 6,
28+
RCTFontVariantStylisticTwo = 1 << 7,
29+
RCTFontVariantStylisticThree = 1 << 8,
30+
RCTFontVariantStylisticFour = 1 << 9,
31+
RCTFontVariantStylisticFive = 1 << 10,
32+
RCTFontVariantStylisticSix = 1 << 11,
33+
RCTFontVariantStylisticSeven = 1 << 12,
34+
RCTFontVariantStylisticEight = 1 << 13,
35+
RCTFontVariantStylisticNine = 1 << 14,
36+
RCTFontVariantStylisticTen = 1 << 15,
37+
RCTFontVariantStylisticEleven = 1 << 16,
38+
RCTFontVariantStylisticTwelve = 1 << 17,
39+
RCTFontVariantStylisticThirteen = 1 << 18,
40+
RCTFontVariantStylisticFourteen = 1 << 19,
41+
RCTFontVariantStylisticFifteen = 1 << 20,
42+
RCTFontVariantStylisticSixteen = 1 << 21,
43+
RCTFontVariantStylisticSeventeen = 1 << 22,
44+
RCTFontVariantStylisticEighteen = 1 << 23,
45+
RCTFontVariantStylisticNineteen = 1 << 24,
46+
RCTFontVariantStylisticTwenty = 1 << 25,
2747
};
2848

2949
struct RCTFontProperties {

‎packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTFontUtils.mm

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,86 @@ static RCTFontStyle RCTGetFontStyle(UIFont *font)
8484
UIFontFeatureTypeIdentifierKey : @(kNumberSpacingType),
8585
UIFontFeatureSelectorIdentifierKey : @(kProportionalNumbersSelector),
8686
}},
87+
{RCTFontVariantStylisticOne, @{
88+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
89+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltOneOnSelector),
90+
}},
91+
{RCTFontVariantStylisticTwo, @{
92+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
93+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltTwoOnSelector),
94+
}},
95+
{RCTFontVariantStylisticThree, @{
96+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
97+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltThreeOnSelector),
98+
}},
99+
{RCTFontVariantStylisticFour, @{
100+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
101+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltFourOnSelector),
102+
}},
103+
{RCTFontVariantStylisticFive, @{
104+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
105+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltFiveOnSelector),
106+
}},
107+
{RCTFontVariantStylisticSix, @{
108+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
109+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltSixOnSelector),
110+
}},
111+
{RCTFontVariantStylisticSeven, @{
112+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
113+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltSevenOnSelector),
114+
}},
115+
{RCTFontVariantStylisticEight, @{
116+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
117+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltEightOnSelector),
118+
}},
119+
{RCTFontVariantStylisticNine, @{
120+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
121+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltNineOnSelector),
122+
}},
123+
{RCTFontVariantStylisticTen, @{
124+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
125+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltTenOnSelector),
126+
}},
127+
{RCTFontVariantStylisticEleven, @{
128+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
129+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltElevenOnSelector),
130+
}},
131+
{RCTFontVariantStylisticTwelve, @{
132+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
133+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltTwelveOnSelector),
134+
}},
135+
{RCTFontVariantStylisticThirteen, @{
136+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
137+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltThirteenOnSelector),
138+
}},
139+
{RCTFontVariantStylisticFourteen, @{
140+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
141+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltFourteenOnSelector),
142+
}},
143+
{RCTFontVariantStylisticFifteen, @{
144+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
145+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltFifteenOnSelector),
146+
}},
147+
{RCTFontVariantStylisticSixteen, @{
148+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
149+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltSixteenOnSelector),
150+
}},
151+
{RCTFontVariantStylisticSeventeen, @{
152+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
153+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltSeventeenOnSelector),
154+
}},
155+
{RCTFontVariantStylisticEighteen, @{
156+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
157+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltEighteenOnSelector),
158+
}},
159+
{RCTFontVariantStylisticNineteen, @{
160+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
161+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltNineteenOnSelector),
162+
}},
163+
{RCTFontVariantStylisticTwenty, @{
164+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
165+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltTwentyOnSelector),
166+
}},
87167
};
88168
});
89169

@@ -102,6 +182,66 @@ static RCTFontStyle RCTGetFontStyle(UIFont *font)
102182
if (fontVariant & RCTFontVariantProportionalNums) {
103183
[fontFeatures addObject:mapping[RCTFontVariantProportionalNums]];
104184
}
185+
if (fontVariant & RCTFontVariantStylisticOne) {
186+
[fontFeatures addObject:mapping[RCTFontVariantStylisticOne]];
187+
}
188+
if (fontVariant & RCTFontVariantStylisticTwo) {
189+
[fontFeatures addObject:mapping[RCTFontVariantStylisticTwo]];
190+
}
191+
if (fontVariant & RCTFontVariantStylisticThree) {
192+
[fontFeatures addObject:mapping[RCTFontVariantStylisticThree]];
193+
}
194+
if (fontVariant & RCTFontVariantStylisticFour) {
195+
[fontFeatures addObject:mapping[RCTFontVariantStylisticFour]];
196+
}
197+
if (fontVariant & RCTFontVariantStylisticFive) {
198+
[fontFeatures addObject:mapping[RCTFontVariantStylisticFive]];
199+
}
200+
if (fontVariant & RCTFontVariantStylisticSix) {
201+
[fontFeatures addObject:mapping[RCTFontVariantStylisticSix]];
202+
}
203+
if (fontVariant & RCTFontVariantStylisticSeven) {
204+
[fontFeatures addObject:mapping[RCTFontVariantStylisticSeven]];
205+
}
206+
if (fontVariant & RCTFontVariantStylisticEight) {
207+
[fontFeatures addObject:mapping[RCTFontVariantStylisticEight]];
208+
}
209+
if (fontVariant & RCTFontVariantStylisticNine) {
210+
[fontFeatures addObject:mapping[RCTFontVariantStylisticNine]];
211+
}
212+
if (fontVariant & RCTFontVariantStylisticTen) {
213+
[fontFeatures addObject:mapping[RCTFontVariantStylisticTen]];
214+
}
215+
if (fontVariant & RCTFontVariantStylisticEleven) {
216+
[fontFeatures addObject:mapping[RCTFontVariantStylisticEleven]];
217+
}
218+
if (fontVariant & RCTFontVariantStylisticTwelve) {
219+
[fontFeatures addObject:mapping[RCTFontVariantStylisticTwelve]];
220+
}
221+
if (fontVariant & RCTFontVariantStylisticThirteen) {
222+
[fontFeatures addObject:mapping[RCTFontVariantStylisticThirteen]];
223+
}
224+
if (fontVariant & RCTFontVariantStylisticFourteen) {
225+
[fontFeatures addObject:mapping[RCTFontVariantStylisticFourteen]];
226+
}
227+
if (fontVariant & RCTFontVariantStylisticFifteen) {
228+
[fontFeatures addObject:mapping[RCTFontVariantStylisticFifteen]];
229+
}
230+
if (fontVariant & RCTFontVariantStylisticSixteen) {
231+
[fontFeatures addObject:mapping[RCTFontVariantStylisticSixteen]];
232+
}
233+
if (fontVariant & RCTFontVariantStylisticSeventeen) {
234+
[fontFeatures addObject:mapping[RCTFontVariantStylisticSeventeen]];
235+
}
236+
if (fontVariant & RCTFontVariantStylisticEighteen) {
237+
[fontFeatures addObject:mapping[RCTFontVariantStylisticEighteen]];
238+
}
239+
if (fontVariant & RCTFontVariantStylisticNineteen) {
240+
[fontFeatures addObject:mapping[RCTFontVariantStylisticNineteen]];
241+
}
242+
if (fontVariant & RCTFontVariantStylisticTwenty) {
243+
[fontFeatures addObject:mapping[RCTFontVariantStylisticTwenty]];
244+
}
105245

106246
return fontFeatures;
107247
}

0 commit comments

Comments
 (0)