From 2ea3b9378498913b85691c69bad29acd89c08334 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sema@fb.com>
Date: Tue, 6 Oct 2015 15:19:58 -0700
Subject: [PATCH] Add warning to setNativeProps and Animated for non-nested
 styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 16 +++++++++++++++-
 Libraries/ReactIOS/NativeMethodsMixin.js         | 16 ++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/Libraries/Animated/src/AnimatedImplementation.js b/Libraries/Animated/src/AnimatedImplementation.js
index 94e5fd918..aa3e3388b 100644
--- a/Libraries/Animated/src/AnimatedImplementation.js
+++ b/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;
 }
diff --git a/Libraries/ReactIOS/NativeMethodsMixin.js b/Libraries/ReactIOS/NativeMethodsMixin.js
index 909327f98..6d158338f 100644
--- a/Libraries/ReactIOS/NativeMethodsMixin.js
+++ b/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