diff --git a/Libraries/Inspector/Inspector.js b/Libraries/Inspector/Inspector.js index a68160ad86d..97d33c59237 100644 --- a/Libraries/Inspector/Inspector.js +++ b/Libraries/Inspector/Inspector.js @@ -23,6 +23,8 @@ const View = require('../Components/View/View'); const invariant = require('invariant'); +import type {HostComponent} from '../Renderer/shims/ReactNativeTypes'; + export type ReactRenderer = { getInspectorDataForViewTag: (viewTag: number) => Object, ... @@ -65,10 +67,14 @@ function getInspectorDataForViewTag(touchedViewTag: number) { } throw new Error('Expected to find at least one React renderer.'); } + +type HostRef = React.ElementRef>; + class Inspector extends React.Component< { - inspectedViewTag: ?number, - onRequestRerenderApp: (callback: (tag: ?number) => void) => void, + isFabric: boolean, + inspectedView: ?HostRef, + onRequestRerenderApp: (callback: (instance: ?HostRef) => void) => void, ... }, { @@ -79,7 +85,7 @@ class Inspector extends React.Component< selection: ?number, perfing: boolean, inspected: any, - inspectedViewTag: any, + inspectedView: ?HostRef, networking: boolean, ... }, @@ -98,7 +104,7 @@ class Inspector extends React.Component< perfing: false, inspected: null, selection: null, - inspectedViewTag: this.props.inspectedViewTag, + inspectedView: this.props.inspectedView, networking: false, }; } @@ -119,7 +125,7 @@ class Inspector extends React.Component< } UNSAFE_componentWillReceiveProps(newProps: Object) { - this.setState({inspectedViewTag: newProps.inspectedViewTag}); + this.setState({inspectedView: newProps.inspectedView}); } _attachToDevtools = (agent: Object) => { @@ -241,8 +247,8 @@ class Inspector extends React.Component< setTouchTargeting(val: boolean) { Touchable.TOUCH_TARGET_DEBUG = val; - this.props.onRequestRerenderApp(inspectedViewTag => { - this.setState({inspectedViewTag}); + this.props.onRequestRerenderApp(inspectedView => { + this.setState({inspectedView}); }); } @@ -264,8 +270,9 @@ class Inspector extends React.Component< {this.state.inspecting && ( )} diff --git a/Libraries/Inspector/InspectorOverlay.js b/Libraries/Inspector/InspectorOverlay.js index 878ee5e6ca1..caaa38700d2 100644 --- a/Libraries/Inspector/InspectorOverlay.js +++ b/Libraries/Inspector/InspectorOverlay.js @@ -14,9 +14,11 @@ const Dimensions = require('../Utilities/Dimensions'); const ElementBox = require('./ElementBox'); const React = require('react'); const StyleSheet = require('../StyleSheet/StyleSheet'); +const ReactNative = require('../Renderer/shims/ReactNative'); const UIManager = require('../ReactNative/UIManager'); const View = require('../Components/View/View'); +import type {HostComponent} from '../Renderer/shims/ReactNativeTypes'; import type {ViewStyleProp} from '../StyleSheet/StyleSheet'; import type {PressEvent} from '../Types/CoreEventTypes'; @@ -26,8 +28,9 @@ type Inspected = $ReadOnly<{| |}>; type Props = $ReadOnly<{| + isFabric: boolean, inspected?: Inspected, - inspectedViewTag?: ?number, + inspectedView?: ?React.ElementRef>, onTouchViewTag: (tag: number, frame: Object, pointerY: number) => mixed, |}>; @@ -35,7 +38,7 @@ class InspectorOverlay extends React.Component { findViewForTouchEvent: (e: PressEvent) => void = (e: PressEvent) => { const {locationX, locationY} = e.nativeEvent.touches[0]; UIManager.findSubviewIn( - this.props.inspectedViewTag, + ReactNative.findNodeHandle(this.props.inspectedView), [locationX, locationY], (nativeViewTag, left, top, width, height) => { this.props.onTouchViewTag( diff --git a/Libraries/ReactNative/AppContainer.js b/Libraries/ReactNative/AppContainer.js index eab3b420958..e67bd0742a0 100644 --- a/Libraries/ReactNative/AppContainer.js +++ b/Libraries/ReactNative/AppContainer.js @@ -14,7 +14,6 @@ const EmitterSubscription = require('../vendor/emitter/EmitterSubscription'); const PropTypes = require('prop-types'); const RCTDeviceEventEmitter = require('../EventEmitter/RCTDeviceEventEmitter'); const React = require('react'); -const ReactNative = require('../Renderer/shims/ReactNative'); const RootTagContext = require('./RootTagContext'); const StyleSheet = require('../StyleSheet/StyleSheet'); const View = require('../Components/View/View'); @@ -68,14 +67,12 @@ class AppContainer extends React.Component { const Inspector = require('../Inspector/Inspector'); const inspector = this.state.inspector ? null : ( { + isFabric={this.props.fabric === true} + inspectedView={this._mainRef} + onRequestRerenderApp={updateInspectedView => { this.setState( s => ({mainKey: s.mainKey + 1}), - () => - updateInspectedViewTag( - ReactNative.findNodeHandle(this._mainRef), - ), + () => updateInspectedView(this._mainRef), ); }} />