status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Alexander Perepelitsyn 2018-08-22 12:16:53 -07:00 committed by Facebook Github Bot
parent b4a8630ea5
commit 2b6599e9c8
1 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
Libraries/Components/View/ViewStylePropTypes.js
View File

@ -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).