Add warning to setNativeProps and Animated for non-nested styles

Summary: These were accidentally supported because they were merged at a lower
level. That's an implementation detail. setNativeProps should still
normalize the API.

I fixed some callers.

Setting props the normal way used to ignore these. Unfortunately we can't
warn for those cases because lots of extra props are spread. (The classic
transferPropsTo issue.)

@​public

Reviewed By: @vjeux

Differential Revision: D2514228

fb-gh-sync-id: 00ed6073827dc1924da20f3d80cbdf68d8a8a8fc

Libraries/Animated/src/AnimatedImplementation.js

@@ -17,9 +17,10 @@ var Interpolation = require('Interpolation');
 var React = require('React');
 var Set = require('Set');
 var SpringConfig = require('SpringConfig');
-var invariant = require('invariant');
+var ViewStylePropTypes = require('ViewStylePropTypes');
 
 var flattenStyle = require('flattenStyle');
+var invariant = require('invariant');
 var requestAnimationFrame = require('requestAnimationFrame');
 
 import type InterpolationConfigType from 'Interpolation';
@@ -1078,6 +1079,19 @@ function createAnimatedComponent(Component: any): any {
       );
     }
   }
+  AnimatedComponent.propTypes = {
+    style: function(props, propName, componentName) {
+      for (var key in ViewStylePropTypes) {
+        if (!Component.propTypes[key] && props[key] !== undefined) {
+          console.error(
+            'You are setting the style `{ ' + key + ': ... }` as a prop. You ' +
+            'should nest it in a style object. ' +
+            'E.g. `{ style: { ' + key + ': ... } }`'
+          );
+        }
+      }
+    }
+  };
 
   return AnimatedComponent;
 }