From e86c7ddde86eec8973ac533d5f37e22cd9a333e4 Mon Sep 17 00:00:00 2001 From: Bruno Lemos Date: Sun, 20 Oct 2019 17:34:20 -0300 Subject: [PATCH] Re-add patch to fix VirtualizedList memoization https://github.com/facebook/react-native/pull/21163 --- patches/react-native+0.61.2.patch | 131 ++++++++++++++++++++++++++ patches/react-native-web+0.11.7.patch | 112 ++++++++++++++++++++++ 2 files changed, 243 insertions(+) create mode 100644 patches/react-native+0.61.2.patch diff --git a/patches/react-native+0.61.2.patch b/patches/react-native+0.61.2.patch new file mode 100644 index 000000000..92502bcee --- /dev/null +++ b/patches/react-native+0.61.2.patch @@ -0,0 +1,131 @@ +diff --git a/node_modules/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js b/node_modules/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js +index c9a967f..bb5c547 100644 +--- a/node_modules/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js ++++ b/node_modules/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js +@@ -59,7 +59,7 @@ class ScrollViewStickyHeader extends React.Component { + this.props.onLayout(event); + const child = React.Children.only(this.props.children); + if (child.props.onLayout) { +- child.props.onLayout(event); ++ child.props.onLayout(event, child.props.cellKey, child.props.index); + } + }; + +diff --git a/node_modules/react-native/Libraries/Lists/VirtualizedList.js b/node_modules/react-native/Libraries/Lists/VirtualizedList.js +index 7dffc17..ebc0fc6 100644 +--- a/node_modules/react-native/Libraries/Lists/VirtualizedList.js ++++ b/node_modules/react-native/Libraries/Lists/VirtualizedList.js +@@ -746,11 +746,16 @@ class VirtualizedList extends React.PureComponent { + const { + CellRendererComponent, + ItemSeparatorComponent, ++ ListItemComponent, + data, ++ debug, ++ extraData, + getItem, + getItemCount, ++ getItemLayout, + horizontal, + keyExtractor, ++ renderItem, + } = this.props; + const stickyOffset = this.props.ListHeaderComponent ? 1 : 0; + const end = getItemCount(data) - 1; +@@ -776,9 +781,13 @@ class VirtualizedList extends React.PureComponent { + key={key} + prevCellKey={prevCellKey} + onUpdateSeparators={this._onUpdateSeparators} +- onLayout={e => this._onCellLayout(e, key, ii)} ++ onLayout={this._onCellLayout} + onUnmount={this._onCellUnmount} +- parentProps={this.props} ++ getItemLayout={getItemLayout} ++ renderItem={renderItem} ++ ListItemComponent={ListItemComponent} ++ extraData={extraData} ++ debug={debug} + ref={ref => { + this._cellRefs[key] = ref; + }} +@@ -1184,7 +1193,7 @@ class VirtualizedList extends React.PureComponent { + } + }; + +- _onCellLayout(e, cellKey, index) { ++ _onCellLayout = (e, cellKey, index): void => { + const layout = e.nativeEvent.layout; + const next = { + offset: this._selectOffset(layout), +@@ -1225,7 +1234,7 @@ class VirtualizedList extends React.PureComponent { + + this._computeBlankness(); + this._updateViewableItems(this.props.data); +- } ++ }; + + _onCellUnmount = (cellKey: string) => { + const curr = this._frames[cellKey]; +@@ -1760,14 +1769,13 @@ type CellRendererProps = { + index: number, + inversionStyle: ViewStyleProp, + item: Item, +- onLayout: (event: Object) => void, // This is extracted by ScrollViewStickyHeader ++ onLayout: (event: Object, key: string, index: number) => void, // This is extracted by ScrollViewStickyHeader + onUnmount: (cellKey: string) => void, + onUpdateSeparators: (cellKeys: Array, props: Object) => void, +- parentProps: { +- getItemLayout?: ?Function, +- renderItem?: ?RenderItemType, +- ListItemComponent?: ?(React.ComponentType | React.Element), +- }, ++ getItemLayout?: ?Function, ++ renderItem: $PropertyType, ++ ListItemComponent?: ?(React.ComponentType | React.Element), ++ debug: ?boolean, + prevCellKey: ?string, + }; + +@@ -1849,6 +1857,10 @@ class CellRenderer extends React.Component< + this.props.onUnmount(this.props.cellKey); + } + ++ _onLayout = (e): void => ++ this.props.onLayout && ++ this.props.onLayout(e, this.props.cellKey, this.props.index); ++ + _renderElement(renderItem, ListItemComponent, item, index) { + if (renderItem && ListItemComponent) { + console.warn( +@@ -1883,14 +1895,16 @@ class CellRenderer extends React.Component< + const { + CellRendererComponent, + ItemSeparatorComponent, ++ ListItemComponent, ++ debug, + fillRateHelper, ++ getItemLayout, + horizontal, +- item, + index, + inversionStyle, +- parentProps, ++ item, ++ renderItem, + } = this.props; +- const {renderItem, getItemLayout, ListItemComponent} = parentProps; + const element = this._renderElement( + renderItem, + ListItemComponent, +@@ -1902,9 +1916,9 @@ class CellRenderer extends React.Component< + /* $FlowFixMe(>=0.68.0 site=react_native_fb) This comment suppresses an + * error found when Flow v0.68 was deployed. To see the error delete this + * comment and run Flow. */ +- getItemLayout && !parentProps.debug && !fillRateHelper.enabled() ++ getItemLayout && !debug && !fillRateHelper.enabled() + ? undefined +- : this.props.onLayout; ++ : this._onLayout; + // NOTE: that when this is a sticky header, `onLayout` will get automatically extracted and + // called explicitly by `ScrollViewStickyHeader`. + const itemSeparator = ItemSeparatorComponent && ( diff --git a/patches/react-native-web+0.11.7.patch b/patches/react-native-web+0.11.7.patch index d0b3c2137..03e0b35c4 100644 --- a/patches/react-native-web+0.11.7.patch +++ b/patches/react-native-web+0.11.7.patch @@ -924,3 +924,115 @@ index c08437e..4bc0ae2 100644 }); export default VirtualizedList; \ No newline at end of file +diff --git a/node_modules/react-native-web/src/vendor/react-native/VirtualizedList/index.js b/node_modules/react-native-web/src/vendor/react-native/VirtualizedList/index.js +index 7a2b1d0..1dc38c1 100644 +--- a/node_modules/react-native-web/src/vendor/react-native/VirtualizedList/index.js ++++ b/node_modules/react-native-web/src/vendor/react-native/VirtualizedList/index.js +@@ -642,11 +642,16 @@ class VirtualizedList extends React.PureComponent { + const { + CellRendererComponent, + ItemSeparatorComponent, ++ ListItemComponent, + data, ++ debug, ++ extraData, + getItem, + getItemCount, ++ getItemLayout, + horizontal, + keyExtractor, ++ renderItem, + } = this.props; + const stickyOffset = this.props.ListHeaderComponent ? 1 : 0; + const end = getItemCount(data) - 1; +@@ -672,9 +677,11 @@ class VirtualizedList extends React.PureComponent { + key={key} + prevCellKey={prevCellKey} + onUpdateSeparators={this._onUpdateSeparators} +- onLayout={e => this._onCellLayout(e, key, ii)} ++ onLayout={this._onCellLayout} + onUnmount={this._onCellUnmount} +- parentProps={this.props} ++ ListItemComponent={ListItemComponent} ++ extraData={extraData} ++ debug={debug} + ref={ref => { + this._cellRefs[key] = ref; + }} +@@ -1018,7 +1025,7 @@ class VirtualizedList extends React.PureComponent { + } + }; + +- _onCellLayout(e, cellKey, index) { ++ _onCellLayout = (e, cellKey, index): void => { + const layout = e.nativeEvent.layout; + const next = { + offset: this._selectOffset(layout), +@@ -1047,7 +1054,7 @@ class VirtualizedList extends React.PureComponent { + this._frames[cellKey].inLayout = true; + } + this._computeBlankness(); +- } ++ }; + + _onCellUnmount = (cellKey: string) => { + const curr = this._frames[cellKey]; +@@ -1554,13 +1561,13 @@ class CellRenderer extends React.Component< + index: number, + inversionStyle: ?DangerouslyImpreciseStyleProp, + item: Item, +- onLayout: (event: Object) => void, // This is extracted by ScrollViewStickyHeader ++ onLayout: (event: Object, key: string, index: number) => void, // This is extracted by ScrollViewStickyHeader + onUnmount: (cellKey: string) => void, + onUpdateSeparators: (cellKeys: Array, props: Object) => void, +- parentProps: { +- getItemLayout?: ?Function, +- renderItem: renderItemType, +- }, ++ getItemLayout?: ?Function, ++ renderItem: $PropertyType, ++ ListItemComponent?: ?(React.ComponentType | React.Element), ++ debug: ?boolean, + prevCellKey: ?string + }, + $FlowFixMeState, +@@ -1620,18 +1627,24 @@ class CellRenderer extends React.Component< + this.props.onUnmount(this.props.cellKey); + } + ++ _onLayout = (e): void => ++ this.props.onLayout && ++ this.props.onLayout(e, this.props.cellKey, this.props.index); ++ + render() { + const { + CellRendererComponent, + ItemSeparatorComponent, ++ ListItemComponent, ++ debug, + fillRateHelper, ++ getItemLayout, + horizontal, +- item, + index, + inversionStyle, +- parentProps, ++ item, ++ renderItem, + } = this.props; +- const {renderItem, getItemLayout} = parentProps; + invariant(renderItem, 'no renderItem!'); + const element = renderItem({ + item, +@@ -1639,9 +1652,9 @@ class CellRenderer extends React.Component< + separators: this._separators, + }); + const onLayout = +- getItemLayout && !parentProps.debug && !fillRateHelper.enabled() ++ getItemLayout && !debug && !fillRateHelper.enabled() + ? undefined +- : this.props.onLayout; ++ : this._onLayout; + // NOTE: that when this is a sticky header, `onLayout` will get automatically extracted and + // called explicitly by `ScrollViewStickyHeader`. + const itemSeparator = ItemSeparatorComponent && (