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;
 }

Libraries/ReactIOS/NativeMethodsMixin.js

@@ -39,6 +39,18 @@ type MeasureLayoutOnSuccessCallback = (
 ) => void
 
 
+function warnForStyleProps(props, validAttributes) {
+  for (var key in validAttributes.style) {
+    if (!(validAttributes[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 + ': ... } }`'
+      );
+    }
+  }
+}
+
 var NativeMethodsMixin = {
   measure: function(callback: MeasureOnSuccessCallback) {
     RCTUIManager.measure(
@@ -66,6 +78,10 @@ var NativeMethodsMixin = {
    * next render, they will remain active.
    */
   setNativeProps: function(nativeProps: Object) {
+    if (__DEV__) {
+      warnForStyleProps(nativeProps, this.viewConfig.validAttributes);
+    }
+
     var updatePayload = ReactNativeAttributePayload.create(
       nativeProps,
       this.viewConfig.validAttributes