disable removeClippedSubviews by default

Summary:
It's just causing problems (e.g. when combined with transform animations like those used
in some navigators) and hopefully it's not necessary with JS-side windowing. If people need the
perf, they can turn it on themselves.

Should fix https://github.com/facebook/react-native/issues/13316 and related issues.

Reviewed By: achen1

Differential Revision: D4884147

fbshipit-source-id: 95c82448581076c0d0b2c80b1cd80cc294898174
This commit is contained in:
Spencer Ahrens 2017-04-13 15:56:50 -07:00 committed by Facebook Github Bot
parent 569525d6e4
commit 3bf7856700
5 changed files with 15 additions and 23 deletions

View File

@ -156,6 +156,12 @@ type OptionalProps<ItemT> = {
* Set this true while waiting for new data from a refresh. * Set this true while waiting for new data from a refresh.
*/ */
refreshing?: ?boolean, 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. * 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. * - 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. * 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<ItemT> extends React.PureComponent<DefaultProps, Props<ItemT>, void> { class FlatList<ItemT> extends React.PureComponent<DefaultProps, Props<ItemT>, void> {
static defaultProps: DefaultProps = defaultProps; static defaultProps: DefaultProps = defaultProps;

View File

@ -140,6 +140,12 @@ type OptionalProps<SectionT: SectionBase<any>> = {
* Set this true while waiting for new data from a refresh. * Set this true while waiting for new data from a refresh.
*/ */
refreshing?: ?boolean, 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 * Rendered at the top of each section. These stick to the top of the `ScrollView` by default on
* iOS. See `stickySectionHeadersEnabled`. * 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. * - 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. * 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<SectionT: SectionBase<any>> class SectionList<SectionT: SectionBase<any>>
extends React.PureComponent<DefaultProps, Props<SectionT>, void> extends React.PureComponent<DefaultProps, Props<SectionT>, void>

View File

@ -110,9 +110,9 @@ type OptionalProps = {
*/ */
refreshing?: ?boolean, refreshing?: ?boolean,
/** /**
* A native optimization that removes clipped subviews (those outside the parent) from the view * Note: may have bugs (missing content) in some circumstances - use at your own risk.
* hierarchy to offload work from the native rendering system. They are still kept around so no *
* memory is saved and state is preserved. * This may improve scroll performance for large lists.
*/ */
removeClippedSubviews?: boolean, 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. * - 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. * 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<OptionalProps, Props, State> { class VirtualizedList extends React.PureComponent<OptionalProps, Props, State> {
props: Props; props: Props;
@ -270,7 +266,6 @@ class VirtualizedList extends React.PureComponent<OptionalProps, Props, State> {
}, },
maxToRenderPerBatch: 10, maxToRenderPerBatch: 10,
onEndReachedThreshold: 2, // multiples of length onEndReachedThreshold: 2, // multiples of length
removeClippedSubviews: true,
renderScrollComponent: (props: Props) => { renderScrollComponent: (props: Props) => {
if (props.onRefresh) { if (props.onRefresh) {
invariant( invariant(

View File

@ -47,7 +47,6 @@ exports[`FlatList renders all the bells and whistles 1`] = `
/> />
} }
refreshing={false} refreshing={false}
removeClippedSubviews={true}
renderItem={[Function]} renderItem={[Function]}
renderScrollComponent={[Function]} renderScrollComponent={[Function]}
scrollEventThrottle={50} scrollEventThrottle={50}
@ -150,7 +149,6 @@ exports[`FlatList renders empty list 1`] = `
onScroll={[Function]} onScroll={[Function]}
onScrollBeginDrag={[Function]} onScrollBeginDrag={[Function]}
onViewableItemsChanged={undefined} onViewableItemsChanged={undefined}
removeClippedSubviews={true}
renderItem={[Function]} renderItem={[Function]}
renderScrollComponent={[Function]} renderScrollComponent={[Function]}
scrollEventThrottle={50} scrollEventThrottle={50}
@ -179,7 +177,6 @@ exports[`FlatList renders null list 1`] = `
onScroll={[Function]} onScroll={[Function]}
onScrollBeginDrag={[Function]} onScrollBeginDrag={[Function]}
onViewableItemsChanged={undefined} onViewableItemsChanged={undefined}
removeClippedSubviews={true}
renderItem={[Function]} renderItem={[Function]}
renderScrollComponent={[Function]} renderScrollComponent={[Function]}
scrollEventThrottle={50} scrollEventThrottle={50}
@ -220,7 +217,6 @@ exports[`FlatList renders simple list 1`] = `
onScroll={[Function]} onScroll={[Function]}
onScrollBeginDrag={[Function]} onScrollBeginDrag={[Function]}
onViewableItemsChanged={undefined} onViewableItemsChanged={undefined}
removeClippedSubviews={true}
renderItem={[Function]} renderItem={[Function]}
renderScrollComponent={[Function]} renderScrollComponent={[Function]}
scrollEventThrottle={50} scrollEventThrottle={50}

View File

@ -31,7 +31,6 @@ exports[`SectionList rendering empty section headers is fine 1`] = `
onScroll={[Function]} onScroll={[Function]}
onScrollBeginDrag={[Function]} onScrollBeginDrag={[Function]}
onViewableItemsChanged={undefined} onViewableItemsChanged={undefined}
removeClippedSubviews={true}
renderItem={[Function]} renderItem={[Function]}
renderScrollComponent={[Function]} renderScrollComponent={[Function]}
renderSectionHeader={[Function]} renderSectionHeader={[Function]}
@ -138,7 +137,6 @@ exports[`SectionList renders all the bells and whistles 1`] = `
/> />
} }
refreshing={false} refreshing={false}
removeClippedSubviews={true}
renderItem={[Function]} renderItem={[Function]}
renderScrollComponent={[Function]} renderScrollComponent={[Function]}
renderSectionHeader={[Function]} renderSectionHeader={[Function]}
@ -271,7 +269,6 @@ exports[`SectionList renders empty list 1`] = `
onScroll={[Function]} onScroll={[Function]}
onScrollBeginDrag={[Function]} onScrollBeginDrag={[Function]}
onViewableItemsChanged={undefined} onViewableItemsChanged={undefined}
removeClippedSubviews={true}
renderItem={[Function]} renderItem={[Function]}
renderScrollComponent={[Function]} renderScrollComponent={[Function]}
scrollEventThrottle={50} scrollEventThrottle={50}