diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js index af8511e66..ca00b5621 100644 --- a/Libraries/Lists/FlatList.js +++ b/Libraries/Lists/FlatList.js @@ -156,6 +156,12 @@ type OptionalProps = { * Set this true while waiting for new data from a refresh. */ refreshing?: ?boolean, + /** + * Note: may have bugs (missing content) in some circumstances - use at your own risk. + * + * This may improve scroll performance for large lists. + */ + removeClippedSubviews?: boolean, /** * See `ViewabilityHelper` for flow type and further documentation. */ @@ -273,10 +279,6 @@ type DefaultProps = typeof defaultProps; * - By default, the list looks for a `key` prop on each item and uses that for the React key. * Alternatively, you can provide a custom `keyExtractor` prop. * - * NOTE: `removeClippedSubviews` might not be necessary and may cause bugs. If you see issues with - * content not rendering, e.g when using `LayoutAnimation`, try setting - * `removeClippedSubviews={false}`, and we may change the default in the future after more - * experimentation in production apps. */ class FlatList extends React.PureComponent, void> { static defaultProps: DefaultProps = defaultProps; diff --git a/Libraries/Lists/SectionList.js b/Libraries/Lists/SectionList.js index c73d121b8..0643994d2 100644 --- a/Libraries/Lists/SectionList.js +++ b/Libraries/Lists/SectionList.js @@ -140,6 +140,12 @@ type OptionalProps> = { * Set this true while waiting for new data from a refresh. */ refreshing?: ?boolean, + /** + * Note: may have bugs (missing content) in some circumstances - use at your own risk. + * + * This may improve scroll performance for large lists. + */ + removeClippedSubviews?: boolean, /** * Rendered at the top of each section. These stick to the top of the `ScrollView` by default on * iOS. See `stickySectionHeadersEnabled`. @@ -217,10 +223,6 @@ type DefaultProps = typeof defaultProps; * - By default, the list looks for a `key` prop on each item and uses that for the React key. * Alternatively, you can provide a custom `keyExtractor` prop. * - * NOTE: `removeClippedSubviews` might not be necessary and may cause bugs. If you see issues with - * content not rendering, e.g when using `LayoutAnimation`, try setting - * `removeClippedSubviews={false}`, and we may change the default in the future after more - * experimentation in production apps. */ class SectionList> extends React.PureComponent, void> diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js index b03d8198a..2a909e1c8 100644 --- a/Libraries/Lists/VirtualizedList.js +++ b/Libraries/Lists/VirtualizedList.js @@ -110,9 +110,9 @@ type OptionalProps = { */ refreshing?: ?boolean, /** - * A native optimization that removes clipped subviews (those outside the parent) from the view - * hierarchy to offload work from the native rendering system. They are still kept around so no - * memory is saved and state is preserved. + * Note: may have bugs (missing content) in some circumstances - use at your own risk. + * + * This may improve scroll performance for large lists. */ removeClippedSubviews?: boolean, /** @@ -167,10 +167,6 @@ type State = {first: number, last: number}; * - By default, the list looks for a `key` prop on each item and uses that for the React key. * Alternatively, you can provide a custom `keyExtractor` prop. * - * NOTE: `removeClippedSubviews` might not be necessary and may cause bugs. If you see issues with - * content not rendering, e.g when using `LayoutAnimation`, try setting - * `removeClippedSubviews={false}`, and we may change the default in the future after more - * experimentation in production apps. */ class VirtualizedList extends React.PureComponent { props: Props; @@ -270,7 +266,6 @@ class VirtualizedList extends React.PureComponent { }, maxToRenderPerBatch: 10, onEndReachedThreshold: 2, // multiples of length - removeClippedSubviews: true, renderScrollComponent: (props: Props) => { if (props.onRefresh) { invariant( diff --git a/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap b/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap index db1a896ae..9d6860f5b 100644 --- a/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap +++ b/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap @@ -47,7 +47,6 @@ exports[`FlatList renders all the bells and whistles 1`] = ` /> } refreshing={false} - removeClippedSubviews={true} renderItem={[Function]} renderScrollComponent={[Function]} scrollEventThrottle={50} @@ -150,7 +149,6 @@ exports[`FlatList renders empty list 1`] = ` onScroll={[Function]} onScrollBeginDrag={[Function]} onViewableItemsChanged={undefined} - removeClippedSubviews={true} renderItem={[Function]} renderScrollComponent={[Function]} scrollEventThrottle={50} @@ -179,7 +177,6 @@ exports[`FlatList renders null list 1`] = ` onScroll={[Function]} onScrollBeginDrag={[Function]} onViewableItemsChanged={undefined} - removeClippedSubviews={true} renderItem={[Function]} renderScrollComponent={[Function]} scrollEventThrottle={50} @@ -220,7 +217,6 @@ exports[`FlatList renders simple list 1`] = ` onScroll={[Function]} onScrollBeginDrag={[Function]} onViewableItemsChanged={undefined} - removeClippedSubviews={true} renderItem={[Function]} renderScrollComponent={[Function]} scrollEventThrottle={50} diff --git a/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap b/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap index 62ef2dfb9..409523f84 100644 --- a/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap +++ b/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap @@ -31,7 +31,6 @@ exports[`SectionList rendering empty section headers is fine 1`] = ` onScroll={[Function]} onScrollBeginDrag={[Function]} onViewableItemsChanged={undefined} - removeClippedSubviews={true} renderItem={[Function]} renderScrollComponent={[Function]} renderSectionHeader={[Function]} @@ -138,7 +137,6 @@ exports[`SectionList renders all the bells and whistles 1`] = ` /> } refreshing={false} - removeClippedSubviews={true} renderItem={[Function]} renderScrollComponent={[Function]} renderSectionHeader={[Function]} @@ -271,7 +269,6 @@ exports[`SectionList renders empty list 1`] = ` onScroll={[Function]} onScrollBeginDrag={[Function]} onViewableItemsChanged={undefined} - removeClippedSubviews={true} renderItem={[Function]} renderScrollComponent={[Function]} scrollEventThrottle={50}