From 2b6599e9c8b393bb20bf04e206d8982f587e75dd Mon Sep 17 00:00:00 2001
From: Alexander Perepelitsyn <alexander.perepelitsyn@agileengine.com>
Date: Wed, 22 Aug 2018 12:16:53 -0700
Subject: [PATCH] Make Flow and PropType types checks consistent for view style
 props. (#20773)

Summary:
Description:
------------
While creating a custom component I added a prop `style: ?ViewStyleProp`. When I tried to pass the following object
```
style={{
  opacity: new Animated.Value(0),
}}
```
to this `style` prop I received a yellow box with the warning:
```
Warning: Failed prop type: Invalid prop `opacity` of type `object` supplied to `MyComponent`, expected `number`.
```

Then I browsed through the source code and found an inconsistency in types checks. Namely,
https://github.com/facebook/react-native/blob/master/Libraries/StyleSheet/StyleSheetTypes.js#L158 has the following declaration `opacity?: number | AnimatedNode`, whereas https://github.com/facebook/react-native/blob/master/Libraries/Components/View/ViewStylePropTypes.js#L50 is willing to accept **only** a `number`: `opacity: ReactPropTypes.number`.
Pull Request resolved: https://github.com/facebook/react-native/pull/20773

Differential Revision: D9464634

Pulled By: TheSavior

fbshipit-source-id: fa21f706cb890dbeec136f1c4fab468904cd284b
---
 .../Components/View/ViewStylePropTypes.js     | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/Libraries/Components/View/ViewStylePropTypes.js b/Libraries/Components/View/ViewStylePropTypes.js
index 8f690fb32f6..b0f0b18b2f0 100644
--- a/Libraries/Components/View/ViewStylePropTypes.js
+++ b/Libraries/Components/View/ViewStylePropTypes.js
@@ -10,6 +10,7 @@
 
 'use strict';
 
+const AnimatedNode = require('AnimatedNode');
 const ColorPropType = require('ColorPropType');
 const LayoutPropTypes = require('LayoutPropTypes');
 const ReactPropTypes = require('prop-types');
@@ -32,22 +33,22 @@ const ViewStylePropTypes = {
   borderLeftColor: ColorPropType,
   borderStartColor: ColorPropType,
   borderEndColor: ColorPropType,
-  borderRadius: ReactPropTypes.number,
-  borderTopLeftRadius: ReactPropTypes.number,
-  borderTopRightRadius: ReactPropTypes.number,
-  borderTopStartRadius: ReactPropTypes.number,
-  borderTopEndRadius: ReactPropTypes.number,
-  borderBottomLeftRadius: ReactPropTypes.number,
-  borderBottomRightRadius: ReactPropTypes.number,
-  borderBottomStartRadius: ReactPropTypes.number,
-  borderBottomEndRadius: ReactPropTypes.number,
+  borderRadius: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
+  borderTopLeftRadius: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
+  borderTopRightRadius: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
+  borderTopStartRadius: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
+  borderTopEndRadius: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
+  borderBottomLeftRadius: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
+  borderBottomRightRadius: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
+  borderBottomStartRadius: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
+  borderBottomEndRadius: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
   borderStyle: ReactPropTypes.oneOf(['solid', 'dotted', 'dashed']),
-  borderWidth: ReactPropTypes.number,
-  borderTopWidth: ReactPropTypes.number,
-  borderRightWidth: ReactPropTypes.number,
-  borderBottomWidth: ReactPropTypes.number,
-  borderLeftWidth: ReactPropTypes.number,
-  opacity: ReactPropTypes.number,
+  borderWidth: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
+  borderTopWidth: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
+  borderRightWidth: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
+  borderBottomWidth: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
+  borderLeftWidth: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
+  opacity: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
   /**
    * (Android-only) Sets the elevation of a view, using Android's underlying
    * [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation).