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
This commit is contained in:
parent
16b955bd1f
commit
8799047dd0
|
@ -129,6 +129,18 @@ class Modal extends React.Component<Object> {
|
||||||
this._identifier = uniqueModalIdentifier++;
|
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() {
|
componentDidMount() {
|
||||||
if (ModalEventEmitter) {
|
if (ModalEventEmitter) {
|
||||||
this._eventSubscription = ModalEventEmitter.addListener(
|
this._eventSubscription = ModalEventEmitter.addListener(
|
||||||
|
|
Loading…
Reference in New Issue