Skip to content

Commit b5163ad

Browse files
j-piaseckifacebook-github-bot
authored andcommitted
Make font styling work when using specific font name on the new architecture (facebook#37109)
Summary: Currently, when `fontFamily` style is set to a specific font instead of a font family, [that specific font is used](https://github.com/facebook/react-native/blob/2058da8f2012578c3e82f1af19c3248346655f9a/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTFontUtils.mm#L126) to display the text on iOS when using the new architecture. This is different behavior to the old architecture, where the font family and [font properties were extracted from the specified](https://github.com/facebook/react-native/blob/2058da8f2012578c3e82f1af19c3248346655f9a/packages/react-native/React/Views/RCTFont.mm#L450-L457) font and overridden if not provided by the user. ## Changelog: [IOS] [FIXED] - Make font resolution work when using specific font name on the new architecture Pull Request resolved: facebook#37109 Test Plan: You can verify the problem on a simple snippet: ```jsx import React from 'react'; import {SafeAreaView, Text} from 'react-native'; function App() { return ( <SafeAreaView style={{flex: 1}}> <Text style={{ fontFamily: 'Helvetica Light Oblique', fontWeight: 'bold', fontStyle: 'normal', }}> Some random text </Text> </SafeAreaView> ); } export default App; ``` <details> <summary> Here's before & after </summary> Without changes from this PR: <img src="https://user-images.githubusercontent.com/21055725/234618852-07cbe67c-f534-4b04-b760-828f4edef549.png" width=400 /> With changes from this PR: <img src="https://user-images.githubusercontent.com/21055725/234618902-9e44a389-8f27-4ab0-95dc-e34ca781d2ed.png" width=400 /> </details> Differential Revision: D45351185 Pulled By: sammy-SC fbshipit-source-id: 8c05bdeef24b8659ae6f162018564a365b6329e4
1 parent 5eabbd7 commit b5163ad

File tree

1 file changed

+15
-6
lines changed
  • packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager

1 file changed

+15
-6
lines changed

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

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,6 @@ static RCTFontProperties RCTResolveFontProperties(
3535
{
3636
fontProperties.family = fontProperties.family.length ? fontProperties.family : baseFontProperties.family;
3737
fontProperties.size = !isnan(fontProperties.size) ? fontProperties.size : baseFontProperties.size;
38-
fontProperties.weight = !isnan(fontProperties.weight) ? fontProperties.weight : baseFontProperties.weight;
39-
fontProperties.style =
40-
fontProperties.style != RCTFontStyleUndefined ? fontProperties.style : baseFontProperties.style;
4138
fontProperties.variant =
4239
fontProperties.variant != RCTFontVariantUndefined ? fontProperties.variant : baseFontProperties.variant;
4340
return fontProperties;
@@ -116,9 +113,15 @@ static RCTFontStyle RCTGetFontStyle(UIFont *font)
116113
if ([fontProperties.family isEqualToString:defaultFontProperties.family]) {
117114
// Handle system font as special case. This ensures that we preserve
118115
// the specific metrics of the standard system font as closely as possible.
116+
fontProperties.weight = !isnan(fontProperties.weight) ? fontProperties.weight : defaultFontProperties.weight;
117+
fontProperties.style =
118+
fontProperties.style != RCTFontStyleUndefined ? fontProperties.style : defaultFontProperties.style;
119+
119120
font = RCTDefaultFontWithFontProperties(fontProperties);
120121
} else {
121122
NSArray<NSString *> *fontNames = [UIFont fontNamesForFamilyName:fontProperties.family];
123+
UIFontWeight fontWeight = fontProperties.weight;
124+
RCTFontStyle fontStyle = fontProperties.style;
122125

123126
if (fontNames.count == 0) {
124127
// Gracefully handle being given a font name rather than font family, for
@@ -129,18 +132,24 @@ static RCTFontStyle RCTGetFontStyle(UIFont *font)
129132
// Failback to system font.
130133
font = [UIFont systemFontOfSize:effectiveFontSize weight:fontProperties.weight];
131134
}
132-
} else {
135+
136+
fontNames = [UIFont fontNamesForFamilyName:font.familyName];
137+
fontWeight = isnan(fontWeight) ? RCTGetFontWeight(font) : fontWeight;
138+
fontStyle = fontStyle == RCTFontStyleUndefined ? RCTGetFontStyle(font) : fontStyle;
139+
}
140+
141+
if (fontNames.count != 0) {
133142
// Get the closest font that matches the given weight for the fontFamily
134143
CGFloat closestWeight = INFINITY;
135144
for (NSString *name in fontNames) {
136145
UIFont *fontMatch = [UIFont fontWithName:name size:effectiveFontSize];
137146

138-
if (RCTGetFontStyle(fontMatch) != fontProperties.style) {
147+
if (RCTGetFontStyle(fontMatch) != fontStyle) {
139148
continue;
140149
}
141150

142151
CGFloat testWeight = RCTGetFontWeight(fontMatch);
143-
if (ABS(testWeight - fontProperties.weight) < ABS(closestWeight - fontProperties.weight)) {
152+
if (ABS(testWeight - fontWeight) < ABS(closestWeight - fontWeight)) {
144153
font = fontMatch;
145154
closestWeight = testWeight;
146155
}

0 commit comments

Comments
 (0)