Skip to content

Commit

Permalink
Make font styling work when using specific font name on the new archi…
Browse files Browse the repository at this point in the history
…tecture (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: 446086f46672f4c4e3cdd16a39112f1549b45e5a
  • Loading branch information
j-piasecki authored and facebook-github-bot committed May 3, 2023
1 parent 5eabbd7 commit 5cbb5e5
Showing 1 changed file with 15 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -116,9 +113,15 @@ static RCTFontStyle RCTGetFontStyle(UIFont *font)
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
Expand All @@ -129,18 +132,24 @@ static RCTFontStyle RCTGetFontStyle(UIFont *font)
// 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;
}
Expand Down

0 comments on commit 5cbb5e5

Please sign in to comment.