Skip to content

Commit

Permalink
Relax FlatList.onViewableItemsChanged validation (#39153)
Browse files Browse the repository at this point in the history
Summary:
Pull Request resolved: #39153

`FlatList`'s restriction on not changing the `onViewableItemsChanged` prop forces developers to violate the rules of React, risking bugs and blocking the rollout of other improvements such as React Forget.

This diff relaxes the validation specifically for the seemingly common case in which a developer passes just a onViewableItemsChanged prop instead of viewabilityConfigCallbackPairs. We use an anonymous closure to create a stable identity that will be passed down to the underlying VirtualizedList, where the closure calls the current `props.onViewableItemsChanged`. The intent of this diff is to alleviate the worst impacts of the current restriction with a correct if not ideal solution, giving us time to fix the API more holistically.

Feedback welcome!

## Changelog:
[Changed] - Allow passing different values to `FlatList.onViewableItemsChanged`

## Facebook

See https://fburl.com/workplace/9svfrytw for more context.

Reviewed By: NickGerleman

Differential Revision: D48656586

fbshipit-source-id: 5b0926deada25637786c4cf3b329607d9f515528
  • Loading branch information
Joe Savona authored and facebook-github-bot committed Aug 25, 2023
1 parent 7eacf27 commit 5cfa125
Showing 1 changed file with 13 additions and 3 deletions.
16 changes: 13 additions & 3 deletions packages/react-native/Libraries/Lists/FlatList.js
Original file line number Diff line number Diff line change
Expand Up @@ -436,7 +436,16 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
* see the error delete this comment and run Flow. */
viewabilityConfig: this.props.viewabilityConfig,
onViewableItemsChanged: this._createOnViewableItemsChanged(
this.props.onViewableItemsChanged,
// NOTE: we use a wrapper function to allow the actual callback to change
// while still keeping the function provided to native to be stable
(...args) => {
invariant(
this.props.onViewableItemsChanged,
'Changing the nullability of onViewableItemsChanged is not supported. ' +
'Once a function or null is supplied that cannot be changed.',
);
return this.props.onViewableItemsChanged(...args);
},
),
});
}
Expand All @@ -450,8 +459,9 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
'changing the number of columns to force a fresh render of the component.',
);
invariant(
prevProps.onViewableItemsChanged === this.props.onViewableItemsChanged,
'Changing onViewableItemsChanged on the fly is not supported',
(prevProps.onViewableItemsChanged == null) ===
(this.props.onViewableItemsChanged == null),
'Changing onViewableItemsChanged nullability on the fly is not supported',
);
invariant(
!deepDiffer(prevProps.viewabilityConfig, this.props.viewabilityConfig),
Expand Down

0 comments on commit 5cfa125

Please sign in to comment.