Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

React Fabric: Support passing nativeViewTag to getInspectorDataForViewAtPoint callback, for React DevTools compat #21080

Merged
merged 3 commits into from
Mar 25, 2021
Merged

React Fabric: Support passing nativeViewTag to getInspectorDataForViewAtPoint callback, for React DevTools compat #21080

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e1840e1
React Fabric: Support passing nativeViewTag to getInspectorDataForVie…
JoshuaGross Mar 24, 2021
d6dbb6c
update
JoshuaGross Mar 25, 2021
9543825
prettier
JoshuaGross Mar 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion packages/react-native-renderer/src/ReactNativeFiberInspector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,13 +190,22 @@ if (__DEV__) {

closestInstance =
internalInstanceHandle.stateNode.canonical._internalInstanceHandle;

// Note: this is deprecated and we want to remove it ASAP. Keeping it here for React DevTools compatibility for now.
const nativeViewTag =
internalInstanceHandle.stateNode.canonical._nativeTag;

nativeFabricUIManager.measure(
internalInstanceHandle.stateNode.node,
(x, y, width, height, pageX, pageY) => {
const inspectorData = getInspectorDataForInstance(
closestInstance,
);
callback({
Copy link
Contributor

@bvaughn bvaughn Mar 25, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Regarding why this might not work, is it possible that the code path a few lines up is actually the one being called? (I can breakpoint this later and actually see, just a drive by comment)

react/packages/react-native-renderer/src/ReactNativeFiberInspector.js

Lines 183 to 189 in 4a99c5c

if (internalInstanceHandle == null) {
callback({
pointerY: locationY,
frame: {left: 0, top: 0, width: 0, height: 0},
...getInspectorDataForInstance(closestInstance),
});
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I verified that the expected code-path is being hit, so that shouldn't be the root-cause. At that point it would require knowledge of/debugging the DevTools themselves (or the websocket bridget?) so I didn't get much further. But we are getting to this point, and we do have the correct nativeTag, so I'm not sure what's up

...inspectorData,
pointerY: locationY,
frame: {left: pageX, top: pageY, width, height},
...getInspectorDataForInstance(closestInstance),
touchedViewTag: nativeViewTag,
});
},
);
Expand Down