From 4530da87e296a3043c9176a7f2b1bfa0f42489ee Mon Sep 17 00:00:00 2001
From: Kevin Gozali <fkg@fb.com>
Date: Fri, 18 Nov 2016 01:31:14 -0800
Subject: [PATCH] make Modal pass rootTag to AppContainer

Summary:
Following up on https://github.com/facebook/react-native/commit/fb7fe2d4e8783232c73fc48b29ad63400a8b3420: when <Modal> is used in dev mode, it renders `<AppContainer>` to wrap the children so that the element inspector can show up correctly. In that scenario, we need pass the `rootTag` over the `<AppContainer>` so that the children can read the rootTag correctly. Otherwise, the children of <Modal> will see it as undefined.

With this, AppContainer can then declare `rootTag` as a required prop, as it should have been.

Note that this only affects DEV build because there's no AppContainer wrapping otherwise.

Reviewed By: jingc

Differential Revision: D4204011

fbshipit-source-id: 80edbc8d351d983786e6fc3c68dfa65a71b1ed3c
---
 Libraries/Modal/Modal.js              | 6 +++++-
 Libraries/ReactNative/AppContainer.js | 5 ++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/Libraries/Modal/Modal.js b/Libraries/Modal/Modal.js
index cc52068418..782ec78a33 100644
--- a/Libraries/Modal/Modal.js
+++ b/Libraries/Modal/Modal.js
@@ -128,6 +128,10 @@ class Modal extends React.Component {
     visible: true,
   };
 
+  static contextTypes = {
+    rootTag: React.PropTypes.number,
+  };
+
   render(): ?React.Element<any> {
     if (this.props.visible === false) {
       return null;
@@ -147,7 +151,7 @@ class Modal extends React.Component {
     }
 
     const innerChildren = __DEV__ ?
-      ( <AppContainer>
+      ( <AppContainer rootTag={this.context.rootTag}>
           {this.props.children}
         </AppContainer>) :
       this.props.children;
diff --git a/Libraries/ReactNative/AppContainer.js b/Libraries/ReactNative/AppContainer.js
index 8b3a76b8c4..d7680bd853 100644
--- a/Libraries/ReactNative/AppContainer.js
+++ b/Libraries/ReactNative/AppContainer.js
@@ -19,13 +19,12 @@ const ReactNative = require('ReactNative');
 const StyleSheet = require('StyleSheet');
 const View = require('View');
 
-// TODO (fkg): make rootTag required
 type Context = {
-  rootTag: ?number,
+  rootTag: number,
 };
 type Props = {
   children?: React.Children,
-  rootTag?: number,
+  rootTag: number,
 };
 type State = {
   inspector: ?React.Element<*>,