From f26c908638cbf7a7708fc092e531447d4f26c4e5 Mon Sep 17 00:00:00 2001
From: Alex Kotliarskyi <frantic@fb.com>
Date: Wed, 8 Jun 2016 14:30:46 -0700
Subject: [PATCH] Extract AppContainer into its own module

Summary:
`renderApplication` is cluttered with unrelated Dev-only stuff
with duplicate code across iOS and Android. This is the first
diff in series of refactorings, with the end goal of making element
inspector work on Modals.

Reviewed By: spicyj

Differential Revision: D3381956

fbshipit-source-id: 4ac6525633e7482628d2b064eb894da2806daf8c
---
 Libraries/ReactIOS/AppContainer.js          | 82 +++++++++++++++++++++
 Libraries/ReactIOS/renderApplication.ios.js | 70 +-----------------
 2 files changed, 85 insertions(+), 67 deletions(-)
 create mode 100644 Libraries/ReactIOS/AppContainer.js

diff --git a/Libraries/ReactIOS/AppContainer.js b/Libraries/ReactIOS/AppContainer.js
new file mode 100644
index 000000000..43ecd2ef7
--- /dev/null
+++ b/Libraries/ReactIOS/AppContainer.js
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule AppContainer
+ * @noflow
+ */
+
+'use strict';
+
+var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
+var React = require('React');
+var ReactNative = require('ReactNative');
+var Subscribable = require('Subscribable');
+var StyleSheet = require('StyleSheet');
+var View = require('View');
+
+var Inspector = __DEV__ ? require('Inspector') : null;
+var YellowBox = __DEV__ ? require('YellowBox') : null;
+
+var AppContainer = React.createClass({
+  mixins: [Subscribable.Mixin],
+
+  getInitialState: function() {
+    return { inspector: null, mainKey: 1 };
+  },
+
+  toggleElementInspector: function() {
+    var inspector = !__DEV__ || this.state.inspector
+      ? null
+      : <Inspector
+          rootTag={this.props.rootTag}
+          inspectedViewTag={ReactNative.findNodeHandle(this.refs.main)}
+          onRequestRerenderApp={(updateInspectedViewTag) => {
+            this.setState(
+              (s) => ({mainKey: s.mainKey + 1}),
+              () => updateInspectedViewTag(ReactNative.findNodeHandle(this.refs.main))
+            );
+          }}
+        />;
+    this.setState({inspector});
+  },
+
+  componentDidMount: function() {
+    this.addListenerOn(
+      RCTDeviceEventEmitter,
+      'toggleElementInspector',
+      this.toggleElementInspector
+    );
+  },
+
+  render: function() {
+    let yellowBox = null;
+    if (__DEV__) {
+      yellowBox = <YellowBox />;
+    }
+    return (
+      <View style={styles.appContainer}>
+        <View
+          collapsable={false}
+          key={this.state.mainKey}
+          style={styles.appContainer} ref="main">
+          {this.props.children}
+        </View>
+        {yellowBox}
+        {this.state.inspector}
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  appContainer: {
+    flex: 1,
+  },
+});
+
+module.exports = AppContainer;
diff --git a/Libraries/ReactIOS/renderApplication.ios.js b/Libraries/ReactIOS/renderApplication.ios.js
index 1a7512800..cc6f7292f 100644
--- a/Libraries/ReactIOS/renderApplication.ios.js
+++ b/Libraries/ReactIOS/renderApplication.ios.js
@@ -7,75 +7,18 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  *
  * @providesModule renderApplication
- * @noflow
+ * @flow
  */
 
 'use strict';
 
-var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
+var AppContainer = require('AppContainer');
 var React = require('React');
 var ReactNative = require('ReactNative');
-var StyleSheet = require('StyleSheet');
-var Subscribable = require('Subscribable');
-var View = require('View');
 
 var invariant = require('fbjs/lib/invariant');
 
-var Inspector = __DEV__ ? require('Inspector') : null;
-var YellowBox = __DEV__ ? require('YellowBox') : null;
-
-var AppContainer = React.createClass({
-  mixins: [Subscribable.Mixin],
-
-  getInitialState: function() {
-    return { inspector: null, mainKey: 1 };
-  },
-
-  toggleElementInspector: function() {
-    var inspector = !__DEV__ || this.state.inspector
-      ? null
-      : <Inspector
-          rootTag={this.props.rootTag}
-          inspectedViewTag={ReactNative.findNodeHandle(this.refs.main)}
-          onRequestRerenderApp={(updateInspectedViewTag) => {
-            this.setState(
-              (s) => ({mainKey: s.mainKey + 1}),
-              () => updateInspectedViewTag(ReactNative.findNodeHandle(this.refs.main))
-            );
-          }}
-        />;
-    this.setState({inspector});
-  },
-
-  componentDidMount: function() {
-    this.addListenerOn(
-      RCTDeviceEventEmitter,
-      'toggleElementInspector',
-      this.toggleElementInspector
-    );
-  },
-
-  render: function() {
-    let yellowBox = null;
-    if (__DEV__) {
-      yellowBox = <YellowBox />;
-    }
-    return (
-      <View style={styles.appContainer}>
-        <View
-          collapsible={false}
-          key={this.state.mainKey}
-          style={styles.appContainer} ref="main">
-          {this.props.children}
-        </View>
-        {yellowBox}
-        {this.state.inspector}
-      </View>
-    );
-  }
-});
-
-function renderApplication<D, P, S>(
+function renderApplication<P>(
   RootComponent: ReactClass<P>,
   initialProps: P,
   rootTag: any
@@ -84,7 +27,6 @@ function renderApplication<D, P, S>(
     rootTag,
     'Expect to have a valid rootTag, instead got ', rootTag
   );
-  /* eslint-disable jsx-no-undef-with-namespace */
   ReactNative.render(
     <AppContainer rootTag={rootTag}>
       <RootComponent
@@ -94,13 +36,7 @@ function renderApplication<D, P, S>(
     </AppContainer>,
     rootTag
   );
-  /* eslint-enable jsx-no-undef-with-namespace */
 }
 
-var styles = StyleSheet.create({
-  appContainer: {
-    flex: 1,
-  },
-});
 
 module.exports = renderApplication;