Animating shadowOffset doesn’t work

[swashcap]

Do you want to request a feature or report a bug?

🐛 Bug!

What is the current behavior?

Animating shadowOffset’s height or width doesn’t work.

Example code (see below for full demo link):

class Hello extends React.Component {}
  constructor(p, c) {
    super(p, c);
    this.state = {
      shadow: new ReactNative.Animated.Value(0)
    };
  }
  // ...
  render() {
    return (
      <ReactNative.Animated.View style={{
        shadowOffset: {
          height: this.state.shadow.interpolate({
            inputRange: [0, 1],
            outputRange: [2, 10]
          }),
          width: 0
        }
      }}
      >
        {/* ... */}
      </ReactNative.Animated.View>
    );
  }
}

This error manifests in a JSON.stringify error logged to the console:

Warning: Failed prop type: cyclic object value
    in View (created by AnimatedComponent)
    in AnimatedComponent (at Button.js:92)
    in TouchableWithoutFeedback (at Button.js:85)
    in Button (at index.js:12)
    in div (created by View)
    in View (at index.js:11)

This comes from src/propTypes/createStrictShapeTypeChecker’s JSON.stringify call. The real problem is the propTypes validation error:

It looks like props.style.shadowOffset.height is an AnimatedInterpolation instance, and its current value isn't being assigned to the height property. I dug around looking for how animation classes are passed to animated and retrieved. Can we fix the “FlattenStyle” injection so animated can detect/interpolate its deeply nested classes?

If the current behavior is a bug, please provide the steps to reproduce and
if a minimal demo of the problem via Glitch or similar (template:
https://glitch.com/edit/#!/react-native-web-playground).

I made an example project to show the bug. Specifically, check out swashcap/react-native-shadow-animation/Button.js

What is the expected behavior?

I expect animating shadowOffset’s height and width would work, and display similar to react-native (see example project GIF).

Environment (include versions). Did this work in previous versions?

• OS: macOS 10.12.16
• Device: 15" rMBP
• Browser: Firefox 56.0
• React Native for Web (version): 0.1.9
• React (version): 16.0.0-alpha.12

[swashcap]

Related: animatedjs/animated#55

[swashcap]

This is a duplicate of #353. Bad issue browsing on my part. I agree, this likely belongs in animated, but shadowOffset could be an exception as it’s react-native specific. What would you think about manually mapping the shadowOffset object to box-shadow to fix the issue, bypassing animated for this property?

[necolas]

Does this work in react-native?

[swashcap]

Yeah, totally does (GIF from demo).

[necolas]

Yeah the problem is upstream in the animatedjs/animated library as per #55. You can see that the React Native implementation handles the shadowOffset.

AnimatedStyle (animatedjs/animated):

AnimatedStyle (facebook/react-native)

Since the animated package is not well maintained and missing most recent changes, I will probably have to go back to copy-pasting the Animated implementation out of React Native. Perhaps one day the RN project can publish the animated package separately too.

[swashcap]

Hmm, I see. Looks react-native has a package.json and build process, but it's not being built/published with the rest of react-native. I’ll open an issue and see if they're open to fixing their build script and publishing react-animated alongside react-native.

[necolas]

Closing / folding this issue into #716