react-native icon indicating copy to clipboard operation
react-native copied to clipboard

fix(ios) use condensed system font

Open shidoro opened this issue 2 years ago • 3 comments

Summary:

The current implementation does not support System font variants. Currently the isCondensed variable is always returning false. This pr adds an extra check to support the 'SystemCondensed' font variant on iOS.

Changelog:

[IOS][ADDED] - Update font to handle system condensed variant

Test Plan:

<Text style={{ fontSize: 28, fontFamily: 'System' }}>System</Text>
<Text style={{ fontSize: 28, fontFamily: 'SystemCondensed' }}>SystemCondensed</Text>
<Text style={{ fontSize: 28, fontFamily: 'AmericanTypewriter-Condensed' }}>AmericanTypewriter-Condensed</Text>
<Text style={{ fontSize: 28, fontFamily: 'HelveticaNeue' }}>HelveticaNeue</Text>
<Text style={{ fontSize: 28, fontFamily: 'HelveticaNeue-CondensedBold' }}>HelveticaNeue-CondensedBold</Text>

Simulator Screenshot - iPhone 15 Pro - 2024-02-26 at 17 56 40

shidoro avatar Feb 24 '24 18:02 shidoro

Is there a reason SystemCondensed doesn't set the kCTFontTraitCondensed trait? Is there another trait we could look at instead?

@javache isCondensedFont does not work for the system font because it's a special case in ios. It's not possible to fetch it by name like other fonts (see the list) as it's hidden to the public. Strings like 'System' or 'SF Pro' or 'SystemCondensed' are useless with the native api. systemFontOfSize returns the default font (SF Pro until Apple decides to change it) and that's about it.

We need a way to differentiate if the user wants the standard or condensed version of the font, so the simplest way is just allowing a custom generated string like 'SystemCondensed'

shidoro avatar Feb 26 '24 14:02 shidoro

@javache do you see any blockers?

shidoro avatar Mar 01 '24 10:03 shidoro

Hey there, I'm struggling with the same issue. Any chance this PR could be reviewed and merged? @javache

irminakacz avatar May 13 '24 08:05 irminakacz

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

facebook-github-bot avatar May 14 '24 10:05 facebook-github-bot

@javache merged this pull request in facebook/react-native@86dffb3f155dc9652f3abc32383643498b3a21b2.

facebook-github-bot avatar May 15 '24 12:05 facebook-github-bot

This pull request was successfully merged by Donald Roshi in 86dffb3f155dc9652f3abc32383643498b3a21b2.

When will my fix make it into a release? | How to file a pick request?

github-actions[bot] avatar May 15 '24 12:05 github-actions[bot]