diff --git a/Libraries/Inspector/DevtoolsOverlay.js b/Libraries/Inspector/DevtoolsOverlay.js index 1cd51d3bef3..7336241162c 100644 --- a/Libraries/Inspector/DevtoolsOverlay.js +++ b/Libraries/Inspector/DevtoolsOverlay.js @@ -121,8 +121,12 @@ export default function DevtoolsOverlay({ locationX, locationY, viewData => { - const {touchedViewTag} = viewData; - if (touchedViewTag != null) { + const {touchedViewTag, closestInstance} = viewData; + if (closestInstance != null) { + // Fabric + agent.selectNode(closestInstance); + return true; + } else if (touchedViewTag != null) { agent.selectNode(findNodeHandle(touchedViewTag)); return true; } diff --git a/Libraries/Inspector/Inspector.js b/Libraries/Inspector/Inspector.js index ffa638e6d6e..0c2b873cb7e 100644 --- a/Libraries/Inspector/Inspector.js +++ b/Libraries/Inspector/Inspector.js @@ -136,13 +136,19 @@ class Inspector extends React.Component< frame, pointerY, touchedViewTag, + closestInstance, } = viewData; // Sync the touched view with React DevTools. // Note: This is Paper only. To support Fabric, // DevTools needs to be updated to not rely on view tags. - if (this.state.devtoolsAgent && touchedViewTag) { - this.state.devtoolsAgent.selectNode(findNodeHandle(touchedViewTag)); + if (this.state.devtoolsAgent) { + if (closestInstance != null) { + // Fabric + this.state.devtoolsAgent.selectNode(closestInstance); + } else if (touchedViewTag != null) { + this.state.devtoolsAgent.selectNode(findNodeHandle(touchedViewTag)); + } } this.setState({