feat: Add string support for aspectRatio

[gabrieldonadel]

Summary

This updates aspectRatio to support string values and ratio formats, i.e., '16 / 9', thus aligning it with the CSS Box Sizing Module Level 4 specification as requested on #34425. This also adds unit tests to the processAspectRatio function ensuring the style processing works as expected.

Changelog

[General] [Added] - Add string support for aspectRatio

Test Plan

This can be tested either through processAspectRatio-tests or by using the following code:

<Viewstyle={{backgroundColor: '#527FE4',aspectRatio: '16 / 9',}}/>

Screen.Recording.2022-09-08.at.00.47.42.mov

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,727,589	+22
android	hermes	armeabi-v7a	7,130,459	+6
android	hermes	x86	8,034,135	+7
android	hermes	x86_64	8,007,425	+18
android	jsc	arm64-v8a	9,597,018	+100
android	jsc	armeabi-v7a	8,363,335	+106
android	jsc	x86	9,541,246	+95
android	jsc	x86_64	10,133,651	+104

Base commit: 8cdc9e7
Branch: main

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: 8cdc9e7
Branch: main

[facebook-github-bot]

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

[cipolleschi]

Quoting @jacdebug:

This regex is not easily maintainable also fails on values like auto 4 / 3, can we follow spec and check simple splitting by space will work?
https://css-tricks.com/almanac/properties/a/aspect-ratio/#aa-values
Also this transforms will add up and have some runtime cost, we should do static transforms at build time using babel

[gabrieldonadel]

@cipolleschi and @jacdebug react native does not really support auto as a value for aspectRatio, any ideas on how we should handle that? Should we default auto to some specific value?

[gabrieldonadel]

The main problem I can think of about using splitting by space is that it wouldn't be able to handle cases like '4/3', '4 /3' or '4/ 3'

[necolas]

auto can just do nothing since it's the default. And because there is no concept of a "replaced element" in RN, auto <ratio> should probably not be allowed. You can split on auto (to print warning), split on /, trim white space if needed, and parse the floats

[gabrieldonadel]

Updated

[necolas]

It actually looks like we don't need to trim, as Number apparently does that internally

[facebook-github-bot]

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

[cipolleschi]

Hi @gabrieldonadel, thanks for all your work with these PRs. We recently started to maintain the TypeScript types and it looks like that this PR touches the Flow types in the StyleSheetTypes.js. Could you update also the TypeScript definitions in this file?

[gabrieldonadel]

Hi @gabrieldonadel, thanks for all your work with these PRs. We recently started to maintain the TypeScript types and it looks like that this PR touches the Flow types in the StyleSheetTypes.js. Could you update also the TypeScript definitions in this file?

Hi @cipolleschi, thanks for reviewing this, I've just pushed a commit updating TS types

[facebook-github-bot]

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

[cipolleschi]

Hi @gabrieldonadel. We are almost there, many thanks for your patience.

[facebook-github-bot]

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

[react-native-bot]

This pull request was successfully merged by @gabrieldonadel in 14c91cd.

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