Add font metrics package to FURN

[Adam Gleitman (amgleitman)]

Platforms Impacted

• iOS
• macOS
• win32 (Office)
• windows
• android

Description of changes

This is a temporary native module that gives JavaScript access to a subset of UIFontMetrics.

Dynamic Type support is on its way into RNCore (as per this PR), but we want to be able to take advantage of it now, so we're adding this module accordingly. Once this publishes to NPM, we'll use it when rendering a Text.

The idea of using a hook to access font metrics data is inspired by RCTAppearance and useColorScheme, which uses a similar subscription hook to fetch an initial "expensive" (i.e., "synchronously obtained") bit of information.

Verification

Validated using the draft PR #2269.

Pull request checklist

This PR has considered (when applicable):

• Automated Tests
• Documentation and examples
• Keyboard Accessibility
• Voiceover
• Internationalization and Right-to-left Layouts

[Patrick Boyd (PPatBoyd)]

Question for future dev guidance: from Apple's HIG meaningful interface icons should scale with text scaling; if my icon is an SVG, what would be the right way to have it scale with DynamicType / this metrics package such that it scales the same as the automatically-scaling SF Symbols?

[Adam Gleitman (amgleitman)]

Question for future dev guidance: from Apple's HIG meaningful interface icons should scale with text scaling; if my icon is an SVG, what would be the right way to have it scale with DynamicType / this metrics package such that it scales the same as the automatically-scaling SF Symbols?

We intend to scale V2 text elements based on this scale, so as long as you match the text styles, scaling your SVGs by the appropriate factor from here should do you well.

As an aside, this won't give the EXACT same font sizes as listed on Apple's typography page (which is what I presume SF Symbols would use) because UIFontMetrics appears to operate based on ratios of the leading values, not the size values. For example, .body-style text on .xxxLarge would give you a value of 17×29/22 ≈ 22.41, which is close to, but not exactly the same as, the listed "size" of 23, but this shouldn't matter as much as long as all our text elements are using the same (leading ratio-based) scaling mechanism.