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

Libraries/Lists/FlatList.js

@@ -156,6 +156,12 @@ type OptionalProps<ItemT> = {
    * 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<ItemT> extends React.PureComponent<DefaultProps, Props<ItemT>, void> {
   static defaultProps: DefaultProps = defaultProps;

Libraries/Lists/SectionList.js

@@ -140,6 +140,12 @@ type OptionalProps<SectionT: SectionBase<any>> = {
    * 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<SectionT: SectionBase<any>>
   extends React.PureComponent<DefaultProps, Props<SectionT>, void>

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<OptionalProps, Props, State> {
   props: Props;
@@ -270,7 +266,6 @@ class VirtualizedList extends React.PureComponent<OptionalProps, Props, State> {
     },
     maxToRenderPerBatch: 10,
     onEndReachedThreshold: 2, // multiples of length
-    removeClippedSubviews: true,
     renderScrollComponent: (props: Props) => {
       if (props.onRefresh) {
         invariant(

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}

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}