[animation] Add support for animating nested styles

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 {

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,
+          },
         },
       });