[Animated] Regression runtime error if passing undefined to Animated.View style

[Kudo]

Is there an existing issue for this?

• I have searched the existing issues

Describe the issue

If passing undefined to Animated.View style, there will be a runtime error. This issue does not happen on react-native-web 0.18. I think this should be a regression issue.

Example code:

function App() {
  return (
    <View style={{ flex: 1 }}>
      <Animated.View style={{ height: 64, transform: undefined }}>
        <View style={{ width: 50, height: 50, backgroundColor: "green" }} />
      </Animated.View>
    </View>
  );
}

Error stacktrace:

AnimatedTransform.js:62 Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')
    at AnimatedTransform.__attach (AnimatedTransform.js:62:1)
    at AnimatedTransform.__addChild (AnimatedWithChildren.js:34:1)
    at AnimatedStyle.__attach (AnimatedStyle.js:86:1)
    at AnimatedStyle.__addChild (AnimatedWithChildren.js:34:1)
    at AnimatedProps.__attach (AnimatedProps.js:63:1)
    at new AnimatedProps (AnimatedProps.js:29:1)
    at useAnimatedProps.js:29:1
    at mountMemo (react-dom.development.js:17225:1)
    at Object.useMemo (react-dom.development.js:17670:1)
    at useMemo (react.development.js:1650:1)

Expected behavior

the undefined style should not raise runtime error.

Steps to reproduce

I have a minimal reproducible example created from create-react-app

$ git clone https://github.com/Kudo/repro-rn-web-animated-transform.git
$ cd repro-rn-web-animated-transform
$ npm i
$ npm start

Test case

https://github.com/Kudo/repro-rn-web-animated-transform/

Additional comments

No response

[necolas]

In the future, please create test cases using the link provided in the issue template. It saves me a lot of time and inconvenience. Creating a separate repo isn't helpful

[Kudo]

sorry for the inconvenience. i did follow the issue template. in the "Test case" field, does it require a codesandbox rather than a separate repo?

  - type: input
    attributes:
      label: Test case
      description: Please provide a link to a reduced test case that reproduces the issue.
      placeholder: "https://codesandbox.io/s/6lx6ql1w5r"
    validations:
      required: true

[necolas]

It's ok. There's a test case for the same issue in #2528

[Kudo]

cool, using codesandbox makes the repro much easier. will try to do that next time. thanks!

[dan-doyon-endear]

I don't do PRs but here is a patch that works for us.

diff --git a/node_modules/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedTransform.js b/node_modules/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedTransform.js
index 66072d9..b92ada1 100644
--- a/node_modules/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedTransform.js
+++ b/node_modules/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedTransform.js
@@ -16,7 +16,7 @@ import NativeAnimatedHelper from '../NativeAnimatedHelper';
 class AnimatedTransform extends AnimatedWithChildren {
   constructor(transforms) {
     super();
-    this._transforms = transforms;
+    this._transforms = transforms || [];
   }
   __makeNative() {
     this._transforms.forEach(transform => {

[Kudo]

much appreciated for the fix and releasing 0.19.6, thanks @necolas!