Skip to content

Commit

Permalink
fixup FlatList
Browse files Browse the repository at this point in the history 
Summary:
StrictMode compliance is important for Async Rendering and other Future Tech(tm).

Also clean up some lint.

== Test Plan ==
* No more StrictMode warnings for `FlatList` (`VirtualizedList` is another story....).
* props warnings still show up when appropriate.

Reviewed By: sophiebits

Differential Revision: D8026333

fbshipit-source-id: e6fa2f02d546b883df6f3cff8776c26c6ef91bc9
  • Loading branch information
@sahrens @facebook-github-bot
sahrens authored and facebook-github-bot committed May 25, 2018
1 parent 26a1eba commit a90d0e3
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 49 deletions.
66 changes: 35 additions & 31 deletions Libraries/Lists/FlatList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const React = require('React');
const View = require('View');
const VirtualizedList = require('VirtualizedList');
const ListView = require('ListView');
const StyleSheet = require('StyleSheet');

const invariant = require('fbjs/lib/invariant');

Expand Down Expand Up @@ -421,41 +422,15 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
}
}

setNativeProps(props: Object) {
setNativeProps(props: {[string]: mixed}) {
if (this._listRef) {
this._listRef.setNativeProps(props);
}
}

UNSAFE_componentWillMount() {
this._checkProps(this.props);
}

UNSAFE_componentWillReceiveProps(nextProps: Props<ItemT>) {
invariant(
nextProps.numColumns === this.props.numColumns,
'Changing numColumns on the fly is not supported. Change the key prop on FlatList when ' +
'changing the number of columns to force a fresh render of the component.',
);
invariant(
nextProps.onViewableItemsChanged === this.props.onViewableItemsChanged,
'Changing onViewableItemsChanged on the fly is not supported',
);
invariant(
nextProps.viewabilityConfig === this.props.viewabilityConfig,
'Changing viewabilityConfig on the fly is not supported',
);
invariant(
nextProps.viewabilityConfigCallbackPairs ===
this.props.viewabilityConfigCallbackPairs,
'Changing viewabilityConfigCallbackPairs on the fly is not supported',
);

this._checkProps(nextProps);
}

constructor(props: Props<*>) {
constructor(props: Props<ItemT>) {
super(props);
this._checkProps(this.props);

This comment has been minimized.

Sign in to view

Copy link
@milyiyo

milyiyo Mar 3, 2020

Hi @sahrens,

In some scenarios this.props is undefined even if props has a value.

I faced that problem running a test in a component that uses FlatList.
The error was this one:

● CustomSideMenu component › CustomSideMenu empty snapshot test › should render correctly TypeError: Cannot read property 'getItem' of undefined at FlatList._checkProps (node_modules/react-native/Libraries/Lists/FlatList.js:519:7) at new FlatList (node_modules/react-native/Libraries/Lists/FlatList.js:464:10)

The way I solved was assigning this.props = props before the this._checkProps(this.props), but I can not do that in the React Native library.

I am using react: 16.9.0 and react-native: 0.61.4.

Do you know why am I getting this problem here?

Thanks in advance,
Carmo
if (this.props.viewabilityConfigCallbackPairs) {
this._virtualizedListPairs = this.props.viewabilityConfigCallbackPairs.map(
pair => ({
Expand All @@ -478,6 +453,29 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
}
}

componentDidUpdate(prevProps: Props<ItemT>) {
invariant(
prevProps.numColumns === this.props.numColumns,
'Changing numColumns on the fly is not supported. Change the key prop on FlatList when ' +
'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',
);
invariant(
prevProps.viewabilityConfig === this.props.viewabilityConfig,
'Changing viewabilityConfig on the fly is not supported',
);
invariant(
prevProps.viewabilityConfigCallbackPairs ===
this.props.viewabilityConfigCallbackPairs,
'Changing viewabilityConfigCallbackPairs on the fly is not supported',
);

this._checkProps(this.props);
}

_hasWarnedLegacy = false;
_listRef: null | VirtualizedList | ListView | MetroListView;
_virtualizedListPairs: Array<ViewabilityConfigCallbackPair> = [];
Expand Down Expand Up @@ -537,7 +535,9 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
const ret = [];
for (let kk = 0; kk < numColumns; kk++) {
const item = data[index * numColumns + kk];
item && ret.push(item);
if (item != null) {
ret.push(item);
}
}
return ret;
} else {
Expand Down Expand Up @@ -614,7 +614,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
'Expected array of items with numColumns > 1',
);
return (
<View style={[{flexDirection: 'row'}, columnWrapperStyle]}>
<View style={StyleSheet.compose(styles.row, columnWrapperStyle)}>
{item.map((it, kk) => {
const element = renderItem({
item: it,
Expand Down Expand Up @@ -661,4 +661,8 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
}
}

const styles = StyleSheet.create({
row: {flexDirection: 'row'},
});

module.exports = FlatList;
27 changes: 9 additions & 18 deletions Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,12 +72,9 @@ exports[`FlatList renders all the bells and whistles 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
undefined,
]
Object {
"flexDirection": "row",
}
}
>
<item
Expand All @@ -95,12 +92,9 @@ exports[`FlatList renders all the bells and whistles 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
undefined,
]
Object {
"flexDirection": "row",
}
}
>
<item
Expand All @@ -118,12 +112,9 @@ exports[`FlatList renders all the bells and whistles 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
undefined,
]
Object {
"flexDirection": "row",
}
}
>
<item
Expand Down

0 comments on commit a90d0e3

Please sign in to comment.