fix: Patch AnimatedStyle to avoid discarding the initial style info

[gabrieldonadel]

Summary

This PR patches AnimatedStyle to avoid discarding the initial style information which destroys the output of web-style compilers and breaks rendering, as requested on https://github.com/facebook/react-native/issues/34425. This uses a slightly modified version of a patch used by react-native-web https://github.com/necolas/react-native-web/commit/4c678d2912bddf30ad3d1f2c9a71f453d29427f0.

Changelog

[General] [Fixed] - Patch AnimatedStyle to avoid discarding the initial style info

Test Plan

Run yarn jest Animated and ensure CI is green

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,070,315	-31,948
android	hermes	armeabi-v7a	6,442,768	-28,676
android	hermes	x86	7,485,557	-34,042
android	hermes	x86_64	7,345,103	-32,923
android	jsc	arm64-v8a	8,934,976	-32,057
android	jsc	armeabi-v7a	7,669,092	-28,785
android	jsc	x86	8,995,029	-34,166
android	jsc	x86_64	9,473,961	-33,049

Base commit: e504141583fc2b695fb42a1037edf92c89ae552a Branch: main

[analysis-bot]

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

Base commit: e504141583fc2b695fb42a1037edf92c89ae552a Branch: main

[pull-bot]

PR build artifact for bdc981993f6df4424ac597c03b0b4db57d2ee460 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

[javache]

Please provide a unit tests that shows how this behaviour was broken before and how this change resolves it. This will help me understand the goal here and prevent us from breaking it in the future :)

[gabrieldonadel]

Please provide a unit tests that shows how this behaviour was broken before and how this change resolves it. This will help me understand the goal here and prevent us from breaking it in the future :)

@necolas would you mind helping me with this one? I know that the problem is described on https://github.com/necolas/react-native-web/issues/2387 but I'm not completely sure how to recreate that scenario on this repo

[necolas]

Please provide a unit tests that shows how this behaviour was broken before and how this change resolves it. This will help me understand the goal here and prevent us from breaking it in the future :)

The behavior is broken on web because using flattenStyle is fundamentally incompatible with any approach to compiling styles to CSS. https://github.com/necolas/react-native-web/issues/2387

A unit test for this change in RN would only show that Animated nodes are duplicated in a new style object appended to the input styles, and that the return from the Style node is an array instead of an object. There would be no functional difference on native.

[pull-bot]

PR build artifact for c47a9f4750ead68dd966168feb1682c81c5286b3 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

[pull-bot]

PR build artifact for c45bf58f477128dd5db35347065bb731c8874a89 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

[pull-bot]

PR build artifact for b45837a04cf827897697b34ae9e6fd92e52d9901 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

[javache]

Does this correctly handle scenarios like this?

style={[
   {backgroundColor: animatedValue},
   {backgroundColor: 'red'},
]}

The expected outcome would be that animatedValue is not used.

[necolas]

Yes, it does. The first thing we do is a flatten, and then extract any animated values that are left

[pull-bot]

PR build artifact for 45e8c021b6079d27853353714793a75e52f78236 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

[gabrieldonadel]

@necolas FYI this should be good for another review round

[pull-bot]

PR build artifact for 5b6fede91f03c245d714066eecc51d644b4b85e1 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

[pull-bot]

PR build artifact for 650c45e3d9a28b7fc6d7c929ca4acaef235f0007 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

[pull-bot]

PR build artifact for 11daeda29996745f841699dba5e6410605ab278b is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

[gabrieldonadel]

Hi @cipolleschi, do you mind importing this PR? 😅

[facebook-github-bot]

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