diff --git a/Libraries/Components/Touchable/Touchable.js b/Libraries/Components/Touchable/Touchable.js
index 6bf9b976f..d465bfe04 100644
--- a/Libraries/Components/Touchable/Touchable.js
+++ b/Libraries/Components/Touchable/Touchable.js
@@ -724,7 +724,7 @@ var TouchableMixin = {
var Touchable = {
Mixin: TouchableMixin,
- TOUCH_TARGET_DEBUG: false, // Set this locally to help debug touch targets.
+ TOUCH_TARGET_DEBUG: false, // Highlights all touchable targets. Toggle with Inspector.
/**
* Renders a debugging overlay to visualize touch target with hitSlop (might not work on Android).
*/
diff --git a/Libraries/Inspector/Inspector.js b/Libraries/Inspector/Inspector.js
index d65bc3e99..ac5ff34e9 100644
--- a/Libraries/Inspector/Inspector.js
+++ b/Libraries/Inspector/Inspector.js
@@ -18,6 +18,7 @@ var InspectorUtils = require('InspectorUtils');
var React = require('React');
var ReactNative = require('ReactNative');
var StyleSheet = require('StyleSheet');
+var Touchable = require('Touchable');
var UIManager = require('NativeModules').UIManager;
var View = require('View');
@@ -38,6 +39,7 @@ class Inspector extends React.Component {
inspecting: true,
perfing: false,
inspected: null,
+ inspectedViewTag: this.props.inspectedViewTag,
};
}
@@ -61,6 +63,10 @@ class Inspector extends React.Component {
}
}
+ componentWillReceiveProps(newProps: Object) {
+ this.setState({inspectedViewTag: newProps.inspectedViewTag});
+ }
+
attachToDevtools(agent: Object) {
var _hideWait = null;
var hlSub = agent.sub('highlight', ({node, name, props}) => {
@@ -148,6 +154,13 @@ class Inspector extends React.Component {
});
}
+ setTouchTargetting(val: bool) {
+ Touchable.TOUCH_TARGET_DEBUG = val;
+ this.props.onRequestRerenderApp((inspectedViewTag) => {
+ this.setState({inspectedViewTag});
+ });
+ }
+
render() {
var panelContainerStyle = (this.state.panelPos === 'bottom') ? {bottom: 0} : {top: 0};
return (
@@ -156,7 +169,7 @@ class Inspector extends React.Component {
}
@@ -170,6 +183,8 @@ class Inspector extends React.Component {
hierarchy={this.state.hierarchy}
selection={this.state.selection}
setSelection={this.setSelection.bind(this)}
+ touchTargetting={Touchable.TOUCH_TARGET_DEBUG}
+ setTouchTargetting={this.setTouchTargetting.bind(this)}
/>
diff --git a/Libraries/Inspector/InspectorPanel.js b/Libraries/Inspector/InspectorPanel.js
index 2009aa213..0b62999d1 100644
--- a/Libraries/Inspector/InspectorPanel.js
+++ b/Libraries/Inspector/InspectorPanel.js
@@ -70,10 +70,11 @@ class InspectorPanel extends React.Component {
pressed={this.props.perfing}
onClick={this.props.setPerfing}
/>
+
-
- {'Touchable.TOUCH_TARGET_DEBUG is ' + Touchable.TOUCH_TARGET_DEBUG}
-
);
}
@@ -86,6 +87,8 @@ InspectorPanel.propTypes = {
inspected: PropTypes.object,
perfing: PropTypes.bool,
setPerfing: PropTypes.func,
+ touchTargetting: PropTypes.bool,
+ setTouchTargetting: PropTypes.func,
};
class Button extends React.Component {
diff --git a/Libraries/ReactIOS/renderApplication.android.js b/Libraries/ReactIOS/renderApplication.android.js
index f386f0aed..99b0bd51a 100644
--- a/Libraries/ReactIOS/renderApplication.android.js
+++ b/Libraries/ReactIOS/renderApplication.android.js
@@ -32,10 +32,10 @@ var AppContainer = React.createClass({
getInitialState: function() {
return {
- enabled: __DEV__,
inspectorVisible: false,
rootNodeHandle: null,
rootImportanceForAccessibility: 'auto',
+ mainKey: 1,
};
},
@@ -61,6 +61,12 @@ var AppContainer = React.createClass({
{
+ this.setState(
+ (s) => ({mainKey: s.mainKey + 1}),
+ () => updateInspectedViewTag(ReactNative.findNodeHandle(this.refs.main))
+ );
+ }}
/> :
null;
},
@@ -84,6 +90,7 @@ var AppContainer = React.createClass({
var appView =
;
- let yellowBox = null;
- if (__DEV__) {
- yellowBox = ;
- }
- return this.state.enabled ?
+ return __DEV__ ?
{appView}
- {yellowBox}
+
{this.renderInspector()}
:
appView;
diff --git a/Libraries/ReactIOS/renderApplication.ios.js b/Libraries/ReactIOS/renderApplication.ios.js
index d4f835d5f..1a7512800 100644
--- a/Libraries/ReactIOS/renderApplication.ios.js
+++ b/Libraries/ReactIOS/renderApplication.ios.js
@@ -28,7 +28,7 @@ var AppContainer = React.createClass({
mixins: [Subscribable.Mixin],
getInitialState: function() {
- return { inspector: null };
+ return { inspector: null, mainKey: 1 };
},
toggleElementInspector: function() {
@@ -37,6 +37,12 @@ var AppContainer = React.createClass({
: {
+ this.setState(
+ (s) => ({mainKey: s.mainKey + 1}),
+ () => updateInspectedViewTag(ReactNative.findNodeHandle(this.refs.main))
+ );
+ }}
/>;
this.setState({inspector});
},
@@ -56,7 +62,10 @@ var AppContainer = React.createClass({
}
return (
-
+
{this.props.children}
{yellowBox}