feat(android): font variation settings

[matinzd]

Summary

Continuation of the old PR: #36371

This PR adds font variation settings feature for variable fonts in react native. The fontVariationSettings property provides low-level control over variable font characteristics, by specifying the four letter axis names of the characteristics you want to vary, along with their values.

Registered axes are the most commonly encountered — common enough that the authors of the specification felt they were worth standardizing. Note that this doesn't mean that the author has to include all of these in their font.

Custom axes can be anything the font designer wants to vary in their font, for example ascender or descender heights, the size of serifs, or anything else they can imagine. Any axis can be used as long as it is given a unique 4-character axis. Some will end up becoming more common, and may even become registered over time.

Example

<Text
  style={{
    fontFamily: 'MaterialSymbolsSharp',
    fontVariationSettings: "'wght' 100, 'FILL' 0",
  }}>
  {String.fromCodePoint(59576)}
</Text>

Font characteristics set using fontVariationSettings will always override those set using the corresponding basic font properties, e.g. fontWeight regardless of the order.

References

Android Documentation
iOS Documentation
MDN Documentation
Specification

Screenshots

Paper	Fabric

This is a part of the other work for iOS that is being done by @davebcn87.

Changelog

[ANDROID] [ADDED] - Add fontVariationSettings support for variable font in Android

Test Plan

• Ensure functionality on Paper (old architecture)
• Ensure functionality on Fabric (new architecture)
• Test custom axes for specific font families
• Verify that registered axes ('wght', 'wdth', 'slnt', 'ital', 'opsz') work if supported by the font

[github-actions]

	Fails
🚫	📋 Missing Changelog - Please add a Changelog to your PR description. See Changelog format

Generated by 🚫 dangerJS against 424323b

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	23,234,793	+2,791,000
android	hermes	armeabi-v7a	n/a	--
android	hermes	x86	n/a	--
android	hermes	x86_64	n/a	--
android	jsc	arm64-v8a	26,433,219	+2,790,748
android	jsc	armeabi-v7a	n/a	--
android	jsc	x86	n/a	--
android	jsc	x86_64	n/a	--

Base commit: 4c6bff0
Branch: main

[matinzd]

Not sure why the bot still says the changelog is missing :)

https://regex101.com/r/hcLY01/1

[NickGerleman]

This seems pretty sane to me, though we need to update the logic around Span management in ReactEditText a bit, for the new fields added to CustomStyleSpan.

Could we make sure to validate against Paper and Fabric, for both Text and TextInput?

[matinzd]

I updated some stuff regarding the edit text for paper but unfortunetaly it's not working. What am I missing here? @NickGerleman

[NickGerleman]

I updated some stuff regarding the edit text for paper but unfortunetaly it's not working. What am I missing here? @NickGerleman

Hard to tell without debugging. Does prop setter for ShadowNode get hit?

[matinzd]

I debugged it last week using a debugger, and it was being hit. I will do some more testing.

[matinzd]

This is old arch but still nothing is being applied for text input.

@NickGerleman

[react-native-bot]

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.

[matinzd]

I am gonna open another PR hopefully or fix the current one.

[react-native-bot]

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.

[react-native-bot]

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