From 8799047dd0bc8dd93f05fa97d4b9a59f7dfeb324 Mon Sep 17 00:00:00 2001
From: Spencer Ahrens <sahrens@fb.com>
Date: Wed, 9 May 2018 13:09:44 -0700
Subject: [PATCH] Fix Modal + FlatList scrolling

Summary:
`FlatList` (actually `VirtualizedList`) allows recursive nesting of itself for easy and complex composition of lists such that it can support seemless virtualization and VPV events. It does this by only rendering a `ScrollView` for the outermost `VirtualizedList` and simply stacking `View`s for all the internal ones.

However, if a `Modal` is in a `FlatList` and also hosts a `FlatList`, e.g.:
```
<FlatList ListFooterComponent={<Modal><Foo /></Modal>} />
```
Then React context will propogate through to the inner `FlatList` and cause it to render as a plain `View`. Because the `Modal` actually portals the views into a different native hierarchy, one without a `ScrollView`, the `FlatList` won't scroll as expected.

The fix is to wipe out the context - not sure if there is a better way, but this doesn't seem terrible.

Differential Revision: D7863625

fbshipit-source-id: 38f41d72ed32b9f0eb1c9c82893f21d83a83f9ad
---
 Libraries/Modal/Modal.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/Libraries/Modal/Modal.js b/Libraries/Modal/Modal.js
index b1cc4a1cb7b..52ed8c7a2b9 100644
--- a/Libraries/Modal/Modal.js
+++ b/Libraries/Modal/Modal.js
@@ -129,6 +129,18 @@ class Modal extends React.Component<Object> {
     this._identifier = uniqueModalIdentifier++;
   }
 
+  static childContextTypes = {
+    virtualizedList: PropTypes.object,
+  };
+
+  getChildContext() {
+    // Reset the context so VirtualizedList doesn't get confused by nesting
+    // in the React tree that doesn't reflect the native component heirarchy.
+    return {
+      virtualizedList: null,
+    };
+  }
+
   componentDidMount() {
     if (ModalEventEmitter) {
       this._eventSubscription = ModalEventEmitter.addListener(