Permalink
Browse files

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 #14111

Differential Revision: D5283942

Pulled By: sahrens

fbshipit-source-id: 8909532dfddd8628b7fb3380c198f0dfa88f240a
  • Loading branch information...
janicduplessis authored and facebook-github-bot committed Jun 20, 2017
1 parent 407ec00 commit a2b0ee0fc3423be94021d56c8f8141cb9b587836
Showing with 13 additions and 0 deletions.
  1. +13 −0 Libraries/Lists/VirtualizedList.js
@@ -1097,6 +1097,19 @@ class VirtualizedList extends React.PureComponent<OptionalProps, Props, State> {
if (!frame || frame.index !== index) {
if (getItemLayout) {
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;

0 comments on commit a2b0ee0

Please sign in to comment.