Breaking API change - abandon ItemComponent in favor of renderItem

Summary:
After a fair bit of use, we have concluded that the `ItemComponent` mechanism is not worth the
hassle. Flow has trouble type checking it thoroughly, requiring an 'item' prop is annoying, and it
is very common to need to capture `this` anyway, e.g. for an `onPress` handler. A common pattern was
something like:

  _renderItem = ({item}) => <MyItem foo={item.foo} onPress={() => this._onPress(item)} />};
  ...
  ItemComponent={this._renderItem}

which wouldn't flow check the props and doesn't benefit from reusing components.

If we find some specific patterns that would benefit from the `ItemComponent` pattern, we can create
a new component that provides that API and wraps `FlatList` under the hood.

I'm going to do `SectionList` in a stacked diff.

Reviewed By: bvaughn

Differential Revision: D4625338

fbshipit-source-id: a4901f1c9d77e0115b0b8032b8c210f624e97ea3
This commit is contained in:
Spencer Ahrens
2017-02-28 02:09:09 -08:00
committed by Facebook Github Bot
parent f7d1060418
commit 2a1ab36257
11 changed files with 154 additions and 143 deletions

View File

@@ -99,7 +99,6 @@ class MultiColumnExample extends React.PureComponent {
<FlatList
FooterComponent={FooterComponent}
HeaderComponent={HeaderComponent}
ItemComponent={this._renderItemComponent}
SeparatorComponent={SeparatorComponent}
getItemLayout={this.state.fixedHeight ? this._getItemLayout : undefined}
data={filteredData}
@@ -107,6 +106,7 @@ class MultiColumnExample extends React.PureComponent {
numColumns={this.state.numColumns || 1}
onRefresh={() => alert('onRefresh: nothing to refresh :P')}
refreshing={false}
renderItem={this._renderItemComponent}
shouldItemUpdate={this._shouldItemUpdate}
disableVirtualization={!this.state.virtualized}
onViewableItemsChanged={this._onViewableItemsChanged}