diff --git a/Examples/UIExplorer/js/FlatListExample.js b/Examples/UIExplorer/js/FlatListExample.js
index 90263d70a..6ff92e6dc 100644
--- a/Examples/UIExplorer/js/FlatListExample.js
+++ b/Examples/UIExplorer/js/FlatListExample.js
@@ -133,9 +133,9 @@ class FlatListExample extends React.PureComponent {
= {
data: ?Array,
};
type OptionalProps = {
+ /**
+ * Rendered in between each item, but not at the top or bottom.
+ */
+ ItemSeparatorComponent?: ?ReactClass,
/**
* Rendered at the bottom of all the items.
*/
- FooterComponent?: ?ReactClass,
+ ListFooterComponent?: ?ReactClass,
/**
* Rendered at the top of all the items.
*/
- HeaderComponent?: ?ReactClass,
- /**
- * Rendered in between each item, but not at the top or bottom.
- */
- SeparatorComponent?: ?ReactClass,
+ ListHeaderComponent?: ?ReactClass,
/**
* `getItemLayout` is an optional optimizations that let us skip measurement of dynamic content if
* you know the height of items a priori. `getItemLayout` is the most efficient, and is easy to
@@ -88,7 +88,7 @@ type OptionalProps = {
* )}
*
* Remember to include separator length (height or width) in your offset calculation if you
- * specify `SeparatorComponent`.
+ * specify `ItemSeparatorComponent`.
*/
getItemLayout?: (data: ?Array, index: number) =>
{length: number, offset: number, index: number},
@@ -132,13 +132,6 @@ type OptionalProps = {
* Optional custom style for multi-item rows generated when numColumns > 1
*/
columnWrapperStyle?: StyleObj,
- /**
- * Optional optimization to minimize re-rendering items.
- */
- shouldItemUpdate: (
- prevInfo: {item: ItemT, index: number},
- nextInfo: {item: ItemT, index: number}
- ) => boolean,
/**
* See `ViewabilityHelper` for flow type and further documentation.
*/
diff --git a/Libraries/CustomComponents/Lists/SectionList.js b/Libraries/CustomComponents/Lists/SectionList.js
index 2b6daefe7..2bc66a65a 100644
--- a/Libraries/CustomComponents/Lists/SectionList.js
+++ b/Libraries/CustomComponents/Lists/SectionList.js
@@ -183,16 +183,8 @@ class SectionList>
static defaultProps: DefaultProps = VirtualizedSectionList.defaultProps;
render() {
- const {ListFooterComponent, ListHeaderComponent, ItemSeparatorComponent} = this.props;
const List = this.props.legacyImplementation ? MetroListView : VirtualizedSectionList;
- return (
-
- );
+ return
;
}
}
diff --git a/Libraries/CustomComponents/Lists/VirtualizedList.js b/Libraries/CustomComponents/Lists/VirtualizedList.js
index 206a1f2d8..9040fcf1b 100644
--- a/Libraries/CustomComponents/Lists/VirtualizedList.js
+++ b/Libraries/CustomComponents/Lists/VirtualizedList.js
@@ -59,9 +59,6 @@ type RequiredProps = {
data?: any,
};
type OptionalProps = {
- FooterComponent?: ?ReactClass,
- HeaderComponent?: ?ReactClass,
- SeparatorComponent?: ?ReactClass,
/**
* `debug` will turn on extra logging and visual overlays to aid with debugging both usage and
* implementation, but with a significant perf hit.
@@ -305,6 +302,7 @@ class VirtualizedList extends React.PureComponent {
'Components based on VirtualizedList must be wrapped with Animated.createAnimatedComponent ' +
'to support native onScroll events with useNativeDriver',
);
+
this._updateCellsToRenderBatcher = new Batchinator(
this._updateCellsToRender,
this.props.updateCellsBatchingPeriod,
@@ -334,7 +332,7 @@ class VirtualizedList extends React.PureComponent {
}
_pushCells(cells, first, last) {
- const {SeparatorComponent, data, getItem, getItemCount, keyExtractor} = this.props;
+ const {ItemSeparatorComponent, data, getItem, getItemCount, keyExtractor} = this.props;
const end = getItemCount(data) - 1;
last = Math.min(end, last);
for (let ii = first; ii <= last; ii++) {
@@ -352,19 +350,19 @@ class VirtualizedList extends React.PureComponent {
parentProps={this.props}
/>
);
- if (SeparatorComponent && ii < end) {
- cells.push();
+ if (ItemSeparatorComponent && ii < end) {
+ cells.push();
}
}
}
render() {
- const {FooterComponent, HeaderComponent} = this.props;
+ const {ListFooterComponent, ListHeaderComponent} = this.props;
const {data, disableVirtualization, horizontal} = this.props;
const cells = [];
- if (HeaderComponent) {
+ if (ListHeaderComponent) {
cells.push(
-
+
);
}
@@ -404,10 +402,10 @@ class VirtualizedList extends React.PureComponent {
);
}
}
- if (FooterComponent) {
+ if (ListFooterComponent) {
cells.push(
-
+
);
}
diff --git a/Libraries/CustomComponents/Lists/VirtualizedSectionList.js b/Libraries/CustomComponents/Lists/VirtualizedSectionList.js
index 84ec2c2c3..317891c4d 100644
--- a/Libraries/CustomComponents/Lists/VirtualizedSectionList.js
+++ b/Libraries/CustomComponents/Lists/VirtualizedSectionList.js
@@ -84,7 +84,7 @@ type OptionalProps = {
renderSectionHeader?: ?({section: SectionT}) => ?React.Element<*>,
/**
* Rendered at the bottom of every Section, except the very last one, in place of the normal
- * SeparatorComponent.
+ * ItemSeparatorComponent.
*/
SectionSeparatorComponent?: ?ReactClass<*>,
/**