feat: Add string support to the transform property

[gabrieldonadel]

Summary

This updates the transform property to support string values as requested on #34425. This also updates the existing unit tests of the processTransform function ensuring the style processing works as expected and updates the TransformExample on RNTester in order to facilitate the manual QA of this.

Changelog

[General] [Added] - Add string support to the transform property

Test Plan

1. Open the RNTester app and navigate to the Transforms page
2. Check the transform style through the Transform using a string section

Screen.Recording.2022-09-11.at.18.57.17.mov

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,644,136	-37,477
android	hermes	armeabi-v7a	7,056,169	-30,204
android	hermes	x86	7,945,632	-39,038
android	hermes	x86_64	7,917,550	-40,026
android	jsc	arm64-v8a	9,516,313	-37,028
android	jsc	armeabi-v7a	8,291,915	-29,692
android	jsc	x86	9,455,641	-38,506
android	jsc	x86_64	10,046,708	-39,376

Base commit: bfb36c2
Branch: main

[analysis-bot]

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

Base commit: bfb36c2
Branch: main

[facebook-github-bot]

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

[facebook-github-bot]

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

[necolas]

The tests for existing RN syntax include 3 args, but noticed that doesnt seem to be in the type def.

[gabrieldonadel]

Yeah, actually I couldn't find any reference to the translate param in the official docs https://reactnative.dev/docs/next/transforms#transform, maybe it's something used internally?

[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 34db2d4.

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

[kelset]

@gabrieldonadel / @necolas I just tested in 0.71 branch and in RNTester, when I try to the test page, it crashes:

[gabrieldonadel]

@gabrieldonadel / @necolas I just tested in 0.71 branch and in RNTester, when I try to the test page, it crashes

@kelset seems that I forgot to update [0] on RN-Tester, gonna open a PR in few updating that to use px

[0] https://github.com/gabrieldonadel/react-native/blob/8d17c5e7cac50279fc92b9de29b6cbe2036cc06c/packages/rn-tester/js/examples/Transform/TransformExample.js#L211

[acoates-ms]

I hit this when integrating 0.71 into react-native-windows. Our automation hit this crash, so I've had to manually disable this test page in our tests for now. The main thing I want to be sure of is that any transform value that was valid before this change is still valid. -- Maybe we want to enforce units on transforms going forward, but failures there should be yellowboxes not invariants during the transition period. Otherwise, it will be very hard for any package that wants to support multiple versions of RN.

[gabrieldonadel]

The main thing I want to be sure of is that any transform value that was valid before this change is still valid.

That shouldn't be a problem as we're only requiring units for string values, everything that was valid before is still going to be valid.

[gabrieldonadel]

Thanks for the report @kelset, I've just opened a PR fixing this #35292.

This also fixes your problem @acoates-ms

[necolas]

failures there should be yellowboxes not invariants during the transition period

Yes I think invalid values should be yellowboxes, mostly because soft failures with warnings are better for styling than crashes. But we still shouldn't allow invalid syntax/values to work as if it were valid