warn if VirtualizedList is embedded in a plain ScrollView

Summary:
This breaks virtualization, viewability callbacks, and other features, so should be warned against.

Hopefully this would have made D15890785 trivial to figure out.

Reviewed By: PeteTheHeat

Differential Revision: D16040939

fbshipit-source-id: 593cd5da9891450fdcb501aef41455cf2d7baa4f

Libraries/Components/ScrollView/ScrollView.js

@@ -573,6 +573,10 @@ function createScrollResponder(
   return scrollResponder;
 }
 
+type ContextType = {||} | null;
+const Context = React.createContext<ContextType>(null);
+const standardContext: ContextType = Object.freeze({}); // not null with option value to add more info in the future
+
 /**
  * Component that wraps platform ScrollView while providing
  * integration with touch locking "responder" system.
@@ -609,6 +613,7 @@ function createScrollResponder(
  * supports out of the box.
  */
 class ScrollView extends React.Component<Props, State> {
+  static Context = Context;
   /**
    * Part 1: Removing ScrollResponder.Mixin:
    *
@@ -999,6 +1004,9 @@ class ScrollView extends React.Component<Props, State> {
         }
       });
     }
+    children = (
+      <Context.Provider value={standardContext}>{children}</Context.Provider>
+    );
 
     const hasStickyHeaders =
       Array.isArray(stickyHeaderIndices) && stickyHeaderIndices.length > 0;

Libraries/Lists/VirtualizedList.js

@@ -968,7 +968,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     this._hasMore =
       this.state.last < this.props.getItemCount(this.props.data) - 1;
 
-    const ret = React.cloneElement(
+    const innerRet = React.cloneElement(
       (this.props.renderScrollComponent || this._defaultRenderScrollComponent)(
         scrollProps,
       ),
@@ -977,6 +977,27 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       },
       cells,
     );
+    let ret = innerRet;
+    if (__DEV__) {
+      ret = (
+        <ScrollView.Context.Consumer>
+          {scrollContext => {
+            if (
+              scrollContext != null &&
+              !this._hasWarned.nesting &&
+              this.context.virtualizedList == null
+            ) {
+              // TODO (T46547044): use React.warn once 16.9 is sync'd: https://github.com/facebook/react/pull/15170
+              console.warn(
+                'VirtualizedLists should never be nested inside a plain ScrollView - use another VirtualizedList-backed container instead.',
+              );
+              this._hasWarned.nesting = true;
+            }
+            return innerRet;
+          }}
+        </ScrollView.Context.Consumer>
+      );
+    }
     if (this.props.debug) {
       return (
         <View style={styles.debug}>