Skip to content
Permalink
Browse files

fixup FlatList

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 authored and facebook-github-bot committed May 25, 2018
1 parent 26a1eba commit a90d0e3614c467c33cf85bcbe65be71903d5aecc
Showing with 44 additions and 49 deletions.
  1. +35 −31 Libraries/Lists/FlatList.js
  2. +9 −18 Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap
@@ -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');

@@ -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);
if (this.props.viewabilityConfigCallbackPairs) {
this._virtualizedListPairs = this.props.viewabilityConfigCallbackPairs.map(
pair => ({
@@ -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> = [];
@@ -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 {
@@ -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,
@@ -661,4 +661,8 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
}
}

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

module.exports = FlatList;
@@ -72,12 +72,9 @@ exports[`FlatList renders all the bells and whistles 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
undefined,
]
Object {
"flexDirection": "row",
}
}
>
<item
@@ -95,12 +92,9 @@ exports[`FlatList renders all the bells and whistles 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
undefined,
]
Object {
"flexDirection": "row",
}
}
>
<item
@@ -118,12 +112,9 @@ exports[`FlatList renders all the bells and whistles 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
undefined,
]
Object {
"flexDirection": "row",
}
}
>
<item

0 comments on commit a90d0e3

Please sign in to comment.
You can’t perform that action at this time.