diff --git a/Libraries/Animated/src/AnimatedImplementation.js b/Libraries/Animated/src/AnimatedImplementation.js index e0860eced71cac..ab45496d97cd45 100644 --- a/Libraries/Animated/src/AnimatedImplementation.js +++ b/Libraries/Animated/src/AnimatedImplementation.js @@ -1485,32 +1485,48 @@ class AnimatedStyle extends AnimatedWithChildren { this._style = style; } - __getValue(): Object { - var style = {}; - for (var key in this._style) { - var value = this._style[key]; + // Recursively get values for nested styles (like iOS's shadowOffset) + __walkStyleAndGetValues(style) { + let updatedStyle = {}; + for (let key in style) { + let value = style[key]; if (value instanceof Animated) { if (!value.__isNative) { // We cannot use value of natively driven nodes this way as the value we have access from // JS may not be up to date. - style[key] = value.__getValue(); + updatedStyle[key] = value.__getValue(); } + } else if (value && !Array.isArray(value) && typeof value === 'object') { + // Support animating nested values (for example: shadowOffset.height) + updatedStyle[key] = this.__walkStyleAndGetValues(value); } else { - style[key] = value; + updatedStyle[key] = value; } } - return style; + return updatedStyle; } - __getAnimatedValue(): Object { - var style = {}; - for (var key in this._style) { - var value = this._style[key]; + __getValue(): Object { + return this.__walkStyleAndGetValues(this._style); + } + + // Recursively get animated values for nested styles (like iOS's shadowOffset) + __walkStyleAndGetAnimatedValues(style) { + let updatedStyle = {}; + for (let key in style) { + let value = style[key]; if (value instanceof Animated) { - style[key] = value.__getAnimatedValue(); + updatedStyle[key] = value.__getAnimatedValue(); + } else if (value && !Array.isArray(value) && typeof value === 'object') { + // Support animating nested values (for example: shadowOffset.height) + updatedStyle[key] = this.__walkStyleAndGetAnimatedValues(value); } } - return style; + return updatedStyle; + } + + __getAnimatedValue(): Object { + return this.__walkStyleAndGetAnimatedValues(this._style); } __attach(): void { diff --git a/Libraries/Animated/src/__tests__/Animated-test.js b/Libraries/Animated/src/__tests__/Animated-test.js index fc313a8af0582b..909fc0f44b5ae5 100644 --- a/Libraries/Animated/src/__tests__/Animated-test.js +++ b/Libraries/Animated/src/__tests__/Animated-test.js @@ -33,7 +33,11 @@ describe('Animated tests', () => { outputRange: [100, 200], })}, {scale: anim}, - ] + ], + shadowOffset: { + width: anim, + height: anim, + }, } }, callback); @@ -47,6 +51,10 @@ describe('Animated tests', () => { {translateX: 100}, {scale: 0}, ], + shadowOffset: { + width: 0, + height: 0, + }, }, }); @@ -62,6 +70,10 @@ describe('Animated tests', () => { {translateX: 150}, {scale: 0.5}, ], + shadowOffset: { + width: 0.5, + height: 0.5, + }, }, });