Add support for animating nested styles

Summary:
This adds the ability to nest animated styles and is a follow up to #11030 .

**Test plan (required)**
Verify a component with a shadowOffset animation animates.

Example:
```
<Animated.View
  style={{
    shadowOffset: {
      width: 0,
      height: this._pressAnim.interpolate({
        inputRange: [0, 1],
        outputRange: [20, 5],
      }),
    },
  }},
/>

```

![example](https://cloud.githubusercontent.com/assets/19673711/23878825/e29f6ae4-0806-11e7-8650-9cff1f591204.gif)
Closes https://github.com/facebook/react-native/pull/12909

Differential Revision: D4723933

fbshipit-source-id: 751d7ceb4f9bb22283fb14a5e597730ffd1d9ff6

Libraries/Animated/src/AnimatedImplementation.js

@@ -1508,32 +1508,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;
+  }
+
+  __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) {
+        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 updatedStyle;
   }
 
   __getAnimatedValue(): Object {
-    var style = {};
-    for (var key in this._style) {
-      var value = this._style[key];
-      if (value instanceof Animated) {
-        style[key] = value.__getAnimatedValue();
-      }
-    }
-    return style;
+    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,
+          },
         },
       });