Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make font styling work when using specific font name on the new architecture (#37109)

Browse Source 
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: https://github.com/facebook/react-native/pull/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>

Reviewed By: NickGerleman

Differential Revision: D45351185

Pulled By: sammy-SC

fbshipit-source-id: 1f0a6a52a714ca4989775817d1fb53ae593143f8
This commit is contained in:
Jakub Piasecki
2024-02-07 07:25:30 -08:00
committed by Facebook GitHub Bot
parent 8f4f09bf70
commit 61774088d7
1 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTFontUtils.mm
+15 -6
View File
@@ -35,9 +35,6 @@ static RCTFontProperties RCTResolveFontProperties(
{
fontProperties.family = fontProperties.family.length ? fontProperties.family : baseFontProperties.family;
fontProperties.size = !isnan(fontProperties.size) ? fontProperties.size : baseFontProperties.size;
fontProperties.weight = !isnan(fontProperties.weight) ? fontProperties.weight : baseFontProperties.weight;
fontProperties.style =
fontProperties.style != RCTFontStyleUndefined ? fontProperties.style : baseFontProperties.style;
fontProperties.variant =
fontProperties.variant != RCTFontVariantUndefined ? fontProperties.variant : baseFontProperties.variant;
return fontProperties;
@@ -116,9 +113,15 @@ UIFont *RCTFontWithFontProperties(RCTFontProperties fontProperties)
if ([fontProperties.family isEqualToString:defaultFontProperties.family]) {
// Handle system font as special case. This ensures that we preserve
// the specific metrics of the standard system font as closely as possible.
fontProperties.weight = !isnan(fontProperties.weight) ? fontProperties.weight : defaultFontProperties.weight;
fontProperties.style =
fontProperties.style != RCTFontStyleUndefined ? fontProperties.style : defaultFontProperties.style;
font = RCTDefaultFontWithFontProperties(fontProperties);
} else {
NSArray<NSString *> *fontNames = [UIFont fontNamesForFamilyName:fontProperties.family];
UIFontWeight fontWeight = fontProperties.weight;
RCTFontStyle fontStyle = fontProperties.style;
if (fontNames.count == 0) {
// Gracefully handle being given a font name rather than font family, for
@@ -129,18 +132,24 @@ UIFont *RCTFontWithFontProperties(RCTFontProperties fontProperties)
// Failback to system font.
font = [UIFont systemFontOfSize:effectiveFontSize weight:fontProperties.weight];
}
} else {
fontNames = [UIFont fontNamesForFamilyName:font.familyName];
fontWeight = isnan(fontWeight) ? RCTGetFontWeight(font) : fontWeight;
fontStyle = fontStyle == RCTFontStyleUndefined ? RCTGetFontStyle(font) : fontStyle;
}
if (fontNames.count != 0) {
// Get the closest font that matches the given weight for the fontFamily
CGFloat closestWeight = INFINITY;
for (NSString *name in fontNames) {
UIFont *fontMatch = [UIFont fontWithName:name size:effectiveFontSize];
if (RCTGetFontStyle(fontMatch) != fontProperties.style) {
if (RCTGetFontStyle(fontMatch) != fontStyle) {
continue;
}
CGFloat testWeight = RCTGetFontWeight(fontMatch);
if (ABS(testWeight - fontProperties.weight) < ABS(closestWeight - fontProperties.weight)) {
if (ABS(testWeight - fontWeight) < ABS(closestWeight - fontWeight)) {
font = fontMatch;
closestWeight = testWeight;
}