Baseline alignment does not work as expected with some font on iOS

[pahmed]

React Native version:

System:
OS: macOS Mojave 10.14.6
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Memory: 3.94 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v10.15.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 28, 29
Build Tools: 28.0.3, 29.0.0
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5900203
Xcode: 11.2/11B52 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.3 => 0.61.3
npmGlobalPackages:
react-native-cli: 2.0.1
react-native: 0.59.9

I'm getting a wrong behavior when using baseline alignment for text of specific font GothamNarrow-Medium, trying the same font using UILabel on iOS, I was getting correct results

Investigating this issue, I found that RCTTextView allocates a height more than needed, e.g.if I set the font size to 50, RCTextView allocates a height of 60, which adds a margin from the bottom, using UILabel on the other hand was allocating only 50 points height

This is the code for this

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

As you can see, the text is not baseline aligned with the gray view

comparing this to using system font, you get the below result

Trying the same thing with the custom font on iOS using UILabel, the behavior was as expected

You can see here that the text is baseline aligned correctly with the red view, also there is no bottom margin and the height of the label is only 50

Some findings

While checking how the height is calculated, I found that this get calculated in RCTTextShadowView function RCTTextShadowViewMeasure

The native API layoutManager usedRectForTextContainer returns 60 for the height while font.lineHeight returns 50, which is not the case when using system font, which returns a value that is equal to font.lineHeight, not sure if this is a bug in the native API or that is intentional for some reason

I was able to workaround this by rounding the height we get from usedRectForTextContainer using the font.lineHeight and multiplying it by the number of lines (trying to mimic system font behaviour), something like
CGFloat(Int(height / font.lineHeight)) * font.lineHeight

GothamNarrow-Medium.otf.zip

[pahmed]

Update

I think I found the cause of the problem, the issue is that this font has a property leading set to 10 when you use font size 50, I think a simple solution for is to set usesFontLeading to NO

From the documentation:

// 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.

Which probably explains how UILabel calculate the height for the text container