From 4c678d2912bddf30ad3d1f2c9a71f453d29427f0 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@fb.com>
Date: Mon, 29 Aug 2022 13:07:44 -0700
Subject: [PATCH] [fix] Animated works with compiled styles

Animated should now work with compiled and extracted styles. The
original styles are passed to components, rather than being flattened
into a new object that cannot be used by the style runtime to either
lookup the results of StyleSheet.create calls or consume extracted
styles. Inline styles that use AnimatedValue are moved into a seperate
object that is appended to the original styles.

Fix #2387
---
 .../Animated/nodes/AnimatedStyle.js           | 36 +++++++++++++------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedStyle.js b/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedStyle.js
index 62fe9ac945..1b654319a2 100644
--- a/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedStyle.js
+++ b/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedStyle.js
@@ -19,19 +19,32 @@ import StyleSheet from '../../../../exports/StyleSheet';
 
 const flattenStyle = StyleSheet.flatten;
 
+function createAnimatedStyle(inputStyle: any): Object {
+  const style = flattenStyle(inputStyle);
+  const animatedStyles = {}
+  for (const key in style) {
+    const value = style[key];
+    if (key === 'transform') {
+      animatedStyles[key] = new AnimatedTransform(value);
+    }
+    else if (value instanceof AnimatedNode) {
+      animatedStyles[key] = value;
+    }
+    else if (value && !Array.isArray(value) && typeof value === 'object') {
+      animatedStyles[key] = createAnimatedStyle(value);
+    }
+  }
+  return animatedStyles;
+}
+
 class AnimatedStyle extends AnimatedWithChildren {
+  _inputStyle: any;
   _style: Object;
 
   constructor(style: any) {
     super();
-    style = flattenStyle(style) || {};
-    if (style.transform) {
-      style = {
-        ...style,
-        transform: new AnimatedTransform(style.transform),
-      };
-    }
-    this._style = style;
+    this._inputStyle = style;
+    this._style = createAnimatedStyle(style);
   }
 
   // Recursively get values for nested styles (like iOS's shadowOffset)
@@ -55,8 +68,11 @@ class AnimatedStyle extends AnimatedWithChildren {
     return updatedStyle;
   }
 
-  __getValue(): Object {
-    return this._walkStyleAndGetValues(this._style);
+  __getValue(): Array<Object> {
+    return [
+      this._inputStyle,
+      this._walkStyleAndGetValues(this._style)
+    ];
   }
 
   // Recursively get animated values for nested styles (like iOS's shadowOffset)