[ReactNative] Better error message when forgetting to wrap Animated

Libraries/StyleSheet/flattenStyle.js

@@ -13,7 +13,6 @@
 
 var StyleSheetRegistry = require('StyleSheetRegistry');
 var invariant = require('invariant');
-var mergeIntoFast = require('mergeIntoFast');
 
 type Atom = number | bool | Object | Array<?Atom>
 type StyleObj = Atom | Array<?StyleObj>
@@ -25,10 +24,7 @@ function getStyle(style) {
   return style;
 }
 
-// TODO: Flow 0.7.0 doesn't refine bools properly so we have to use `any` to
-// tell it that this can't be a bool anymore. Should be fixed in 0.8.0,
-// after which this can take a ?StyleObj.
-function flattenStyle(style: any): ?Object {
+function flattenStyle(style: ?StyleObj): ?Object {
   if (!style) {
     return undefined;
   }
@@ -42,7 +38,19 @@ function flattenStyle(style: any): ?Object {
   for (var i = 0; i < style.length; ++i) {
     var computedStyle = flattenStyle(style[i]);
     if (computedStyle) {
-      mergeIntoFast(result, computedStyle);
+      for (var key in computedStyle) {
+        result[key] = computedStyle[key];
+
+        if (__DEV__) {
+          var value = computedStyle[key];
+          invariant(
+            !value || typeof value !== 'object' || !value.getValue,
+              'You passed an Animated.Value to a normal component. ' +
+              'You need to wrap that component in an Animated. For example, ' +
+              'replace <View /> by <Animated.View />.'
+          );
+        }
+      }
     }
   }
   return result;

Libraries/StyleSheet/precomputeStyle.js

@@ -127,7 +127,7 @@ function _convertToRadians(value: string): number {
 function _validateTransform(key, value, transformation) {
   invariant(
     !value.getValue,
-    'You passed an animated value or spring to a normal component. ' +
+    'You passed an Animated.Value to a normal component. ' +
     'You need to wrap that component in an Animated. For example, ' +
     'replace <View /> by <Animated.View />.'
   );