FlatList - Add dev validation of the object returned by getItemLayout
Summary: Returning an object that doesn't have all the required properties from `getItemLayout` doesn't cause a flow error (maybe because we are using `createAnimatedComponent`) and caused ALL items to be rendered which caused perf issues that were hard to debug (typo lenght -> length -_-). This adds a simple warning in DEV mode using checkPropTypes. **Test plan** Tested in RNTester by passing a bad `getItemLayout` function. ![image](https://cloud.githubusercontent.com/assets/2677334/26329030/5b32ba90-3f13-11e7-9190-08f05a5c0682.png) Closes https://github.com/facebook/react-native/pull/14111 Differential Revision: D5283942 Pulled By: sahrens fbshipit-source-id: 8909532dfddd8628b7fb3380c198f0dfa88f240a
This commit is contained in:
parent
407ec0023f
commit
a2b0ee0fc3
|
@ -1097,6 +1097,19 @@ class VirtualizedList extends React.PureComponent<OptionalProps, Props, State> {
|
||||||
if (!frame || frame.index !== index) {
|
if (!frame || frame.index !== index) {
|
||||||
if (getItemLayout) {
|
if (getItemLayout) {
|
||||||
frame = getItemLayout(data, index);
|
frame = getItemLayout(data, index);
|
||||||
|
if (__DEV__) {
|
||||||
|
const frameType = PropTypes.shape({
|
||||||
|
length: PropTypes.number.isRequired,
|
||||||
|
offset: PropTypes.number.isRequired,
|
||||||
|
index: PropTypes.number.isRequired,
|
||||||
|
}).isRequired;
|
||||||
|
PropTypes.checkPropTypes(
|
||||||
|
{frame: frameType},
|
||||||
|
{frame},
|
||||||
|
'frame',
|
||||||
|
'VirtualizedList.getItemLayout'
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return frame;
|
return frame;
|
||||||
|
|
Loading…
Reference in New Issue