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} /> +