status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-01-27 01:40:08 +00:00
Code Issues Projects Releases Wiki Activity

Extract AppContainer into its own module

Browse Source 
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
This commit is contained in:
Alex Kotliarskyi 2016-06-08 14:30:46 -07:00 committed by Facebook Github Bot 8
parent 8324e92f76
commit f26c908638
2 changed files with 85 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
Libraries/ReactIOS/AppContainer.js Normal file
View File

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

70
Libraries/ReactIOS/renderApplication.ios.js
View File

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