diff --git a/Libraries/Inspector/DevtoolsOverlay.js b/Libraries/Inspector/DevtoolsOverlay.js
index f98400e93bf..a4711672f6c 100644
--- a/Libraries/Inspector/DevtoolsOverlay.js
+++ b/Libraries/Inspector/DevtoolsOverlay.js
@@ -12,6 +12,7 @@ import type {PressEvent} from '../Types/CoreEventTypes';
import type {HostRef} from './getInspectorDataForViewAtPoint';
import View from '../Components/View/View';
+import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
import StyleSheet from '../StyleSheet/StyleSheet';
import Dimensions from '../Utilities/Dimensions';
import ElementBox from './ElementBox';
@@ -115,39 +116,33 @@ export default function DevtoolsOverlay({
};
}, []);
- const findViewForTouchEvent = useCallback(
- (e: PressEvent) => {
+ const findViewForLocation = useCallback(
+ (x: number, y: number) => {
const agent = devToolsAgentRef.current;
if (agent == null) {
return;
}
- const {locationX, locationY} = e.nativeEvent.touches[0];
- getInspectorDataForViewAtPoint(
- inspectedView,
- locationX,
- locationY,
- viewData => {
- const {touchedViewTag, closestInstance, frame} = viewData;
- if (closestInstance != null || touchedViewTag != null) {
- if (closestInstance != null) {
- // Fabric
- agent.selectNode(closestInstance);
- } else {
- agent.selectNode(findNodeHandle(touchedViewTag));
- }
- setInspected({
- frame,
- });
- return true;
+ getInspectorDataForViewAtPoint(inspectedView, x, y, viewData => {
+ const {touchedViewTag, closestInstance, frame} = viewData;
+ if (closestInstance != null || touchedViewTag != null) {
+ if (closestInstance != null) {
+ // Fabric
+ agent.selectNode(closestInstance);
+ } else {
+ agent.selectNode(findNodeHandle(touchedViewTag));
}
- return false;
- },
- );
+ setInspected({
+ frame,
+ });
+ return true;
+ }
+ return false;
+ });
},
[inspectedView],
);
- const onResponderRelease = useCallback(() => {
+ const stopInspecting = useCallback(() => {
const agent = devToolsAgentRef.current;
if (agent == null) {
return;
@@ -157,23 +152,49 @@ export default function DevtoolsOverlay({
setInspected(null);
}, []);
+ const onPointerMove = useCallback(
+ e => {
+ findViewForLocation(e.nativeEvent.x, e.nativeEvent.y);
+ },
+ [findViewForLocation],
+ );
+
+ const onResponderMove = useCallback(
+ e => {
+ findViewForLocation(
+ e.nativeEvent.touches[0].locationX,
+ e.nativeEvent.touches[0].locationY,
+ );
+ },
+ [findViewForLocation],
+ );
+
const shouldSetResponser = useCallback(
(e: PressEvent): boolean => {
- findViewForTouchEvent(e);
+ onResponderMove(e);
return true;
},
- [findViewForTouchEvent],
+ [onResponderMove],
);
let highlight = inspected ? : null;
if (isInspecting) {
+ const events = ReactNativeFeatureFlags.shouldEmitW3CPointerEvents
+ ? {
+ onPointerMove,
+ onPointerDown: onPointerMove,
+ onPointerUp: stopInspecting,
+ }
+ : {
+ onStartShouldSetResponder: shouldSetResponser,
+ onResponderMove: onResponderMove,
+ onResponderRelease: stopInspecting,
+ };
return (
+ style={[styles.inspector, {height: Dimensions.get('window').height}]}
+ {...events}>
{highlight}
);