From 7e26e0270b5d9f8490320af563a4943d24d269ea Mon Sep 17 00:00:00 2001
From: Gabriel Donadel Dall'Agnol <donadeldev@gmail.com>
Date: Wed, 25 Oct 2023 05:59:19 -0700
Subject: [PATCH] Fix `createAnimatedStyle` when providing undefined transform
 style (#41176)

Summary:
https://github.com/facebook/react-native/pull/35198 introduced a regression where if an `{transform: undefined}` style is provided to an Animated View a `Cannot read property 'map' of undefined` type error is thrown

<img src="https://github.com/facebook/react-native/assets/11707729/bb87781e-1ba7-40ec-879d-a57cef3e10d9" height="200" />

## Changelog:

[GENERAL] [FIXED] - Fix `createAnimatedStyle` when providing an undefined transform style

Pull Request resolved: https://github.com/facebook/react-native/pull/41176

Test Plan:
<details>
  <summary>Render an `Animated.View` passing `style={{transform: undefined}}`</summary>

E.g.

```
const UndefinedTransform = () => {
  return (
    <View>
      <Animated.View style={{transform: undefined}} />
    </View>
  );
};
```
</details>

### RNTester
1. Open the RNTester app and navigate to the Animated page
2. Navigate to the Transform Styles page
3. App should not throw any errors

<table>
    <tr><th>Before</th><th>After</th></tr>
    <tr>
        <td><video src="https://github.com/facebook/react-native/assets/11707729/92ba9c3b-60b0-4805-8080-0e7fb7c00345"/></td>
        <td><video src="https://github.com/facebook/react-native/assets/11707729/80e2bba8-6ff6-4cf5-bcb8-26de0b869036"/></td>
    </tr>
</table>

Reviewed By: fabriziocucci

Differential Revision: D50638415

Pulled By: javache

fbshipit-source-id: 0ee949f019a77b8bef557888694e0e8404810105
---
 .../react-native/Libraries/Animated/nodes/AnimatedStyle.js | 2 +-
 .../js/examples/Animated/TransformStylesExample.js         | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/react-native/Libraries/Animated/nodes/AnimatedStyle.js b/packages/react-native/Libraries/Animated/nodes/AnimatedStyle.js
index 8fdc6532aeb2e3..8766d5e913b796 100644
--- a/packages/react-native/Libraries/Animated/nodes/AnimatedStyle.js
+++ b/packages/react-native/Libraries/Animated/nodes/AnimatedStyle.js
@@ -30,7 +30,7 @@ function createAnimatedStyle(
   const animatedStyles: any = {};
   for (const key in style) {
     const value = style[key];
-    if (key === 'transform') {
+    if (value != null && key === 'transform') {
       animatedStyles[key] =
         ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
           ? new AnimatedObject(value)
diff --git a/packages/rn-tester/js/examples/Animated/TransformStylesExample.js b/packages/rn-tester/js/examples/Animated/TransformStylesExample.js
index 60a90bc107a55a..d9467354097d0e 100644
--- a/packages/rn-tester/js/examples/Animated/TransformStylesExample.js
+++ b/packages/rn-tester/js/examples/Animated/TransformStylesExample.js
@@ -123,6 +123,10 @@ function AnimatedTransformStyleExample(): React.Node {
           property => properties[property].selected,
         )}
       />
+      <View style={styles.section}>
+        <Text>{'Should not crash when transform style key is undefined'}</Text>
+        <Animated.View style={[styles.animatedView, {transform: undefined}]} />
+      </View>
     </View>
   );
 }
@@ -149,6 +153,9 @@ const styles = StyleSheet.create({
     marginBottom: 6,
     borderBottomWidth: 1,
   },
+  section: {
+    marginTop: 20,
+  },
 });
 
 export default ({