make Modal pass rootTag to AppContainer

Summary:
Following up on fb7fe2d4e8: 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

@@ -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;

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<*>,