Skip to content

Commit

Permalink
FlatList - Add dev validation of the object returned by getItemLayout
Browse files Browse the repository at this point in the history
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 a2b0ee0
Showing 1 changed file with 13 additions and 0 deletions.
13 changes: 13 additions & 0 deletions Libraries/Lists/VirtualizedList.js
Expand Up @@ -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;
Expand Down

0 comments on commit a2b0ee0

Please sign in to comment.