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/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