diff --git a/Libraries/Inspector/ElementProperties.js b/Libraries/Inspector/ElementProperties.js index bbbf248407c304..c0b11a3882e62b 100644 --- a/Libraries/Inspector/ElementProperties.js +++ b/Libraries/Inspector/ElementProperties.js @@ -73,7 +73,7 @@ var ElementProperties = React.createClass({ style={[styles.breadItem, i === selection && styles.selected]} onPress={() => this.props.setSelection(i)}> - {item.getName ? item.getName() : 'Unknown'} + {getInstanceName(item)} ), @@ -107,6 +107,16 @@ var ElementProperties = React.createClass({ }, }); +function getInstanceName(instance) { + if (instance.getName) { + return instance.getName(); + } + if (instance.constructor && instance.constructor.displayName) { + return instance.constructor.displayName; + } + return 'Unknown'; +} + var styles = StyleSheet.create({ breadSep: { fontSize: 8, diff --git a/Libraries/Inspector/Inspector.js b/Libraries/Inspector/Inspector.js index 0f8276f5bc2268..3726597a9f050e 100644 --- a/Libraries/Inspector/Inspector.js +++ b/Libraries/Inspector/Inspector.js @@ -142,11 +142,17 @@ class Inspector extends React.Component { }); } - onTouchInstance(instance: Object, frame: Object, pointerY: number) { + onTouchInstance(touched: Object, frame: Object, pointerY: number) { + // Most likely the touched instance is a native wrapper (like RCTView) + // which is not very interesting. Most likely user wants a composite + // instance that contains it (like View) + var hierarchy = InspectorUtils.getOwnerHierarchy(touched); + var instance = InspectorUtils.lastNotNativeInstance(hierarchy); + if (this.state.devtoolsAgent) { this.state.devtoolsAgent.selectFromReactInstance(instance, true); } - var hierarchy = InspectorUtils.getOwnerHierarchy(instance); + // if we inspect a stateless component we can't use the getPublicInstance method // therefore we use the internal _instance property directly. var publicInstance = instance['_instance'] || {}; @@ -154,7 +160,7 @@ class Inspector extends React.Component { var source = instance['_currentElement'] && instance['_currentElement']['_source']; this.setState({ panelPos: pointerY > Dimensions.get('window').height / 2 ? 'top' : 'bottom', - selection: hierarchy.length - 1, + selection: hierarchy.indexOf(instance), hierarchy, inspected: { style: props.style || {}, diff --git a/Libraries/Inspector/InspectorUtils.js b/Libraries/Inspector/InspectorUtils.js index 17c03e30390062..75fb42bf4efab9 100644 --- a/Libraries/Inspector/InspectorUtils.js +++ b/Libraries/Inspector/InspectorUtils.js @@ -29,4 +29,14 @@ function getOwnerHierarchy(instance) { return hierarchy; } -module.exports = {findInstanceByNativeTag, getOwnerHierarchy}; +function lastNotNativeInstance(hierarchy) { + for (let i = hierarchy.length - 1; i > 1; i--) { + const instance = hierarchy[i]; + if (!instance.viewConfig) { + return instance; + } + } + return hierarchy[0]; +} + +module.exports = {findInstanceByNativeTag, getOwnerHierarchy, lastNotNativeInstance};