Skip to content

Commit

Permalink
Remove defaultProps from FlatList (#31798)
Browse files Browse the repository at this point in the history
Summary:
Issue facebook/react-native#31602. Remove `defaultProps` from `FlatList`.

## Changelog

[JavaScript] [Changed] - Remove defaultProps from FlatList

Pull Request resolved: facebook/react-native#31798

Test Plan:
All test for `FlatList` pass.

https://user-images.githubusercontent.com/57131123/124164691-4066c980-daa1-11eb-8653-5c51640fe63e.mov

Reviewed By: charlesbdudley

Differential Revision: D29619867

Pulled By: lunaleaps

fbshipit-source-id: 8d8a6f095f80374407a55bac0b4e899bae04c577
  • Loading branch information
daschaa authored and facebook-github-bot committed Jul 20, 2021
1 parent 16bb2ae commit 7d5895d
Showing 1 changed file with 43 additions and 26 deletions.
69 changes: 43 additions & 26 deletions Libraries/Lists/FlatList.js
Original file line number Diff line number Diff line change
Expand Up @@ -125,14 +125,39 @@ type OptionalProps<ItemT> = {|
/**
* Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a
* `flexWrap` layout. Items should all be the same height - masonry layouts are not supported.
*
* The default value is 1.
*/
numColumns: number,
numColumns?: number,
/**
* Note: may have bugs (missing content) in some circumstances - use at your own risk.
*
* This may improve scroll performance for large lists.
*
* The default value is true for Android.
*/
removeClippedSubviews?: boolean,
/**
* See `ScrollView` for flow type and further documentation.
*/
fadingEdgeLength?: ?number,
|};

/**
* Default Props Helper Functions
* Use the following helper functions for default values
*/

// removeClippedSubviewsOrDefault(this.props.removeClippedSubviews)
function removeClippedSubviewsOrDefault(removeClippedSubviews: ?boolean) {
return removeClippedSubviews ?? Platform.OS === 'android';
}

// numColumnsOrDefault(this.props.numColumns)
function numColumnsOrDefault(numColumns: ?number) {
return numColumns ?? 1;
}

type FlatListProps<ItemT> = {|
...RequiredProps<ItemT>,
...OptionalProps<ItemT>,
Expand All @@ -156,17 +181,6 @@ export type Props<ItemT> = {
...
};

const defaultProps = {
numColumns: 1,
/**
* Enabling this prop on Android greatly improves scrolling performance with no known issues.
* The alternative is that scrolling on Android is unusably bad. Enabling it on iOS has a few
* known issues.
*/
removeClippedSubviews: Platform.OS === 'android',
};
export type DefaultProps = typeof defaultProps;

/**
* A performant interface for rendering simple, flat lists, supporting the most handy features:
*
Expand Down Expand Up @@ -276,7 +290,6 @@ export type DefaultProps = typeof defaultProps;
* Also inherits [ScrollView Props](docs/scrollview.html#props), unless it is nested in another FlatList of same orientation.
*/
class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
static defaultProps: DefaultProps = defaultProps;
props: Props<ItemT>;
/**
* Scrolls to the end of the content. May be janky without `getItemLayout` prop.
Expand Down Expand Up @@ -453,11 +466,11 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
// $FlowFixMe[prop-missing] this prop doesn't exist, is only used for an invariant
getItemCount,
horizontal,
numColumns,
columnWrapperStyle,
onViewableItemsChanged,
viewabilityConfigCallbackPairs,
} = props;
const numColumns = numColumnsOrDefault(this.props.numColumns);
invariant(
!getItem && !getItemCount,
'FlatList does not support custom data formats.',
Expand All @@ -478,7 +491,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
}

_getItem = (data: Array<ItemT>, index: number) => {
const {numColumns} = this.props;
const numColumns = numColumnsOrDefault(this.props.numColumns);
if (numColumns > 1) {
const ret = [];
for (let kk = 0; kk < numColumns; kk++) {
Expand All @@ -495,15 +508,15 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {

_getItemCount = (data: ?Array<ItemT>): number => {
if (data) {
const {numColumns} = this.props;
const numColumns = numColumnsOrDefault(this.props.numColumns);
return numColumns > 1 ? Math.ceil(data.length / numColumns) : data.length;
} else {
return 0;
}
};

_keyExtractor = (items: ItemT | Array<ItemT>, index: number) => {
const {numColumns} = this.props;
const numColumns = numColumnsOrDefault(this.props.numColumns);
const keyExtractor = this.props.keyExtractor ?? defaultKeyExtractor;

if (numColumns > 1) {
Expand All @@ -528,7 +541,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
};

_pushMultiColumnViewable(arr: Array<ViewToken>, v: ViewToken): void {
const {numColumns} = this.props;
const numColumns = numColumnsOrDefault(this.props.numColumns);
const keyExtractor = this.props.keyExtractor ?? defaultKeyExtractor;
v.item.forEach((item, ii) => {
invariant(v.index != null, 'Missing index!');
Expand All @@ -549,7 +562,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
changed: Array<ViewToken>,
...
}) => {
const {numColumns} = this.props;
const numColumns = numColumnsOrDefault(this.props.numColumns);
if (onViewableItemsChanged) {
if (numColumns > 1) {
const changed = [];
Expand All @@ -567,12 +580,8 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
}

_renderer = () => {
const {
ListItemComponent,
renderItem,
numColumns,
columnWrapperStyle,
} = this.props;
const {ListItemComponent, renderItem, columnWrapperStyle} = this.props;
const numColumns = numColumnsOrDefault(this.props.numColumns);

let virtualizedListRenderKey = ListItemComponent
? 'ListItemComponent'
Expand Down Expand Up @@ -625,7 +634,12 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
};

render(): React.Node {
const {numColumns, columnWrapperStyle, ...restProps} = this.props;
const {
numColumns,
columnWrapperStyle,
removeClippedSubviews: _removeClippedSubviews,
...restProps
} = this.props;

return (
<VirtualizedList
Expand All @@ -635,6 +649,9 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
keyExtractor={this._keyExtractor}
ref={this._captureRef}
viewabilityConfigCallbackPairs={this._virtualizedListPairs}
removeClippedSubviews={removeClippedSubviewsOrDefault(
_removeClippedSubviews,
)}
{...this._renderer()}
/>
);
Expand Down

0 comments on commit 7d5895d

Please sign in to comment.