Disable usesFontLeading for NSLayoutManager on iOS to fix baseline alignment issue on some fonts

[pahmed]

Summary

Fixes #27137

This PR fixes an issue on iOS where RCTTextView height is not calculated as it should for some fonts where font leading attributed is not equal to zero, which results in wrong baseline alignment behaviour.

The fix for this is by setting usesFontLeading property of NSLayoutManager to NO, which results is a layout behavior that is similar to UILabel

Probably the documentation for usesFontLeading describes why UILabel has a different (correct) layout behavior in that case

// By default, a layout manager will use leading as specified by the font. However, this is not appropriate for most UI text, for which a fixed leading is usually specified by UI layout guidelines. These methods allow the use of the font's leading to be turned off.

Changelog

[iOS] [Fixed] - Fix RCTTextView layout issue that happens on some font with leading attribute not equal to zero, which causes wrong base-alignment layout

Test Plan

Below are the test results before and after the change, and comparing that to native UILabel behavior.

The test is done with using system font and custom font (GothamNarrow-Medium) and font size 50

GothamNarrow-Medium.otf.zip

const App: () => React$Node = () => {
  return (
    <View style={{flex: 1, margin: 40, flexDirection: 'row', justifyContent: 'center', alignItems: 'baseline'}}>
      <View style={{width: 30, height: 30, backgroundColor: 'lightgray'}} />
      <Text style={{fontSize: 50, backgroundColor: 'green', fontFamily: 'GothamNarrow-Medium'}}>{'Settings'}</Text>
    </View>
  );
};

---

Before the fix

---

After the fix

---

Using UILabel

[facebook-github-bot]

Hi pahmed! Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file.In order for us to review and merge your code, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[facebook-github-bot]

@shergin is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[react-native-bot]

This pull request was successfully merged by Ahmed Ibrahim in 5d08aab.

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