From 869c416a361eaf9075ced6304587b4d4d5225906 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Mon, 26 Jun 2023 17:22:23 -0700
Subject: [PATCH] [fix] Animated fix transforms on null values

Fix #2528
Fix #2523
Close #2546
Close #2530
---
 .../pages/animated/index.js                   | 59 +++++++++++++++++++
 .../Animated/nodes/AnimatedStyle.js           |  2 +-
 2 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-native-web-examples/pages/animated/index.js

diff --git a/packages/react-native-web-examples/pages/animated/index.js b/packages/react-native-web-examples/pages/animated/index.js
new file mode 100644
index 0000000000..f83c7a0604
--- /dev/null
+++ b/packages/react-native-web-examples/pages/animated/index.js
@@ -0,0 +1,59 @@
+import React, { useRef } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import Example from '../../shared/example';
+
+export default function AnimatedPage() {
+  const anim = useRef(new Animated.Value(0));
+
+  const animateBox = () => {
+    Animated.timing(anim.current, {
+      toValue: 1,
+      duration: 1000,
+      useNativeDriver: false
+    }).start();
+  };
+
+  const transform = anim.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['rotate(0deg)', 'rotate(45deg)']
+  });
+
+  return (
+    <Example title="Animated">
+      <View style={styles.container}>
+        <Animated.View style={[styles.animatedBox, { transform: transform }]} />
+        <Pressable
+          onPress={animateBox}
+          style={({ pressed }) => [
+            styles.button,
+            { opacity: pressed ? 0.4 : 1 }
+          ]}
+        >
+          <Text style={styles.buttonText}>Animate Box</Text>
+        </Pressable>
+      </View>
+    </Example>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  animatedBox: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'red',
+    alignSelf: 'center'
+  },
+  button: {
+    padding: 16,
+    paddingVertical: 8,
+    backgroundColor: 'blue',
+    borderRadius: 8,
+    marginTop: 24
+  },
+  buttonText: { color: 'white' }
+});
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 1b654319a2..fdfd2a78c5 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
@@ -24,7 +24,7 @@ function createAnimatedStyle(inputStyle: any): Object {
   const animatedStyles = {}
   for (const key in style) {
     const value = style[key];
-    if (key === 'transform') {
+    if (key === 'transform' && Array.isArray(value)) {
       animatedStyles[key] = new AnimatedTransform(value);
     }
     else if (value instanceof AnimatedNode) {