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 62fe9ac9..1b654319 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 { + return [ + this._inputStyle, + this._walkStyleAndGetValues(this._style) + ]; } // Recursively get animated values for nested styles (like iOS's shadowOffset)