[iOS] Make font styling work when using specific font name on the new architecture #37109

j-piasecki · 2023-04-26T15:14:47Z

Summary:

Currently, when fontFamily style is set to a specific font instead of a font family, that specific font is used 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 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

Test Plan:

You can verify the problem on a simple snippet:

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;

Here's before & after

Without changes from this PR:

With changes from this PR:

analysis-bot · 2023-04-26T15:38:59Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,625,130	+0
android	hermes	armeabi-v7a	7,937,983	+0
android	hermes	x86	9,112,076	+0
android	hermes	x86_64	8,966,887	+0
android	jsc	arm64-v8a	9,189,170	+0
android	jsc	armeabi-v7a	8,379,482	+0
android	jsc	x86	9,247,475	+0
android	jsc	x86_64	9,505,920	+0

Base commit: 2cda4f7
Branch: main

facebook-github-bot · 2023-04-27T09:38:38Z

@sammy-SC has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

…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: 9d1aad07311bb5a7a089186f4fd70c182016bc57

…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: c2e43072b15f50d397549ee6c11bbfdc19f2dc49

…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: 8c05bdeef24b8659ae6f162018564a365b6329e4

…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: 5dd55e8d3dcd7815a5caabf40bd48ada326da17d

…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: 1a1f4f19a43a2d0a496899b60959748e664577ac

…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: 6b0233b7c032fb0a87d38eebdacaf87a91026000

…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: 88c8cf29ec68837ad3244a48b828be7a15bf4bde

…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: 6cc0f95ac027aba70aafa25b7b6369b6617270b6

…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

…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: 09b17b75d58f2cfe82dc755424632ab8cc6da55e

github-actions · 2023-10-25T05:00:59Z

This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

github-actions · 2023-11-01T05:01:11Z

This PR was closed because it has been stalled for 7 days with no activity.

…tecture (#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: #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

github-actions · 2024-02-07T15:30:30Z

This pull request was successfully merged by @j-piasecki in 6177408.

^{When will my fix make it into a release? | Upcoming Releases}

… new architecture" (#42919) Summary: Changelog: [IOS] [FIXED] - backout #37109 Pull Request resolved: #42919 Original commit changeset: 1f0a6a52a714 Original Phabricator Diff: D45351185 Reviewed By: cipolleschi Differential Revision: D53566506 fbshipit-source-id: e96813edfee4b54a7828ac02c3dc8aaffc83d6b7

facebook-github-bot · 2024-02-08T13:20:21Z

This pull request has been reverted by f6b984d.

Make font resolution on the new arch resemble old arch more

32a80a7

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Apr 26, 2023

Pranav-yadav added the Component: Text label Apr 27, 2023

github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Oct 25, 2023

github-actions bot closed this Nov 1, 2023

github-actions bot added the Merged This PR has been merged. label Feb 7, 2024

facebook-github-bot added the Reverted label Feb 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[iOS] Make font styling work when using specific font name on the new architecture #37109

[iOS] Make font styling work when using specific font name on the new architecture #37109

j-piasecki commented Apr 26, 2023

analysis-bot commented Apr 26, 2023

facebook-github-bot commented Apr 27, 2023

github-actions bot commented Oct 25, 2023

github-actions bot commented Nov 1, 2023

github-actions bot commented Feb 7, 2024

facebook-github-bot commented Feb 8, 2024

[iOS] Make font styling work when using specific font name on the new architecture #37109

[iOS] Make font styling work when using specific font name on the new architecture #37109

Conversation

j-piasecki commented Apr 26, 2023

Summary:

Changelog:

Test Plan:

analysis-bot commented Apr 26, 2023

facebook-github-bot commented Apr 27, 2023

github-actions bot commented Oct 25, 2023

github-actions bot commented Nov 1, 2023

github-actions bot commented Feb 7, 2024

facebook-github-bot commented Feb 8, 2024