Skip to content

Commit 2b6599e

Browse files
Alexander Perepelitsynfacebook-github-bot
authored andcommitted
Make Flow and PropType types checks consistent for view style props. (facebook#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: facebook#20773 Differential Revision: D9464634 Pulled By: TheSavior fbshipit-source-id: fa21f706cb890dbeec136f1c4fab468904cd284b
1 parent b4a8630 commit 2b6599e

File tree

1 file changed

+16
-15
lines changed

1 file changed

+16
-15
lines changed

Libraries/Components/View/ViewStylePropTypes.js

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
'use strict';
1212

13+
const AnimatedNode = require('AnimatedNode');
1314
const ColorPropType = require('ColorPropType');
1415
const LayoutPropTypes = require('LayoutPropTypes');
1516
const ReactPropTypes = require('prop-types');
@@ -32,22 +33,22 @@ const ViewStylePropTypes = {
3233
borderLeftColor: ColorPropType,
3334
borderStartColor: ColorPropType,
3435
borderEndColor: ColorPropType,
35-
borderRadius: ReactPropTypes.number,
36-
borderTopLeftRadius: ReactPropTypes.number,
37-
borderTopRightRadius: ReactPropTypes.number,
38-
borderTopStartRadius: ReactPropTypes.number,
39-
borderTopEndRadius: ReactPropTypes.number,
40-
borderBottomLeftRadius: ReactPropTypes.number,
41-
borderBottomRightRadius: ReactPropTypes.number,
42-
borderBottomStartRadius: ReactPropTypes.number,
43-
borderBottomEndRadius: ReactPropTypes.number,
36+
borderRadius: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
37+
borderTopLeftRadius: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
38+
borderTopRightRadius: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
39+
borderTopStartRadius: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
40+
borderTopEndRadius: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
41+
borderBottomLeftRadius: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
42+
borderBottomRightRadius: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
43+
borderBottomStartRadius: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
44+
borderBottomEndRadius: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
4445
borderStyle: ReactPropTypes.oneOf(['solid', 'dotted', 'dashed']),
45-
borderWidth: ReactPropTypes.number,
46-
borderTopWidth: ReactPropTypes.number,
47-
borderRightWidth: ReactPropTypes.number,
48-
borderBottomWidth: ReactPropTypes.number,
49-
borderLeftWidth: ReactPropTypes.number,
50-
opacity: ReactPropTypes.number,
46+
borderWidth: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
47+
borderTopWidth: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
48+
borderRightWidth: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
49+
borderBottomWidth: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
50+
borderLeftWidth: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
51+
opacity: ReactPropTypes.oneOfType([ReactPropTypes.number, ReactPropTypes.instanceOf(AnimatedNode)]),
5152
/**
5253
* (Android-only) Sets the elevation of a view, using Android's underlying
5354
* [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation).

0 commit comments

Comments
 (0)