[React Native] Add getInspectorDataForViewAtPoint #18233
Conversation
Details of bundled changes.Comparing: 024a764...aa3719a react-native-renderer
Size changes (stable) |
Details of bundled changes.Comparing: 024a764...aa3719a react-native-renderer
Size changes (experimental) |
packages/react-native-renderer/src/ReactNativeFiberInspector.js
Outdated
Show resolved
Hide resolved
packages/react-native-renderer/src/ReactNativeFiberInspector.js
Outdated
Show resolved
Hide resolved
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit aa3719a:
|
packages/react-native-renderer/src/ReactNativeFiberInspector.js
Outdated
Show resolved
Hide resolved
packages/react-native-renderer/src/ReactNativeFiberInspector.js
Outdated
Show resolved
Hide resolved
packages/react-native-renderer/src/ReactNativeFiberInspector.js
Outdated
Show resolved
Hide resolved
| @@ -10,6 +10,7 @@ | |||
| import type {Fiber} from './ReactFiber'; | |||
| import type {FiberRoot} from './ReactFiberRoot'; | |||
| import type {RootTag} from 'shared/ReactRootTags'; | |||
| import type {TouchedViewDataAtPoint} from 'react-native-renderer/src/ReactNativeTypes'; | |||
There was a problem hiding this comment.
This import is causing CI to fail.
There was a problem hiding this comment.
We can't have dependencies on RN from the reconciler bundle. The folders are checked independently.
Also from a layering perspective it's probably not right.
There was a problem hiding this comment.
I'm a little confused that some of the commits seemed to pass CI
|
|
||
| export type TouchedViewDataAtPoint = $ReadOnly<{| | ||
| pointerY: number, | ||
| touchedViewTag?: number, |
There was a problem hiding this comment.
What is this used for? I thought we're getting rid of all these tags so seems odd to add new users of it and expose more implementation details about to change to future work. Shouldn't there be another mechanism?
There was a problem hiding this comment.
This is to support the current devtools behavior in Paper where tapping in the app will open the element in the tree. I was thinking we would add this now to prevent the regression, while we figure out the correct solution for Fabric and Paper moving forward.
What do you think?
This reverts commit bf35108.
|
I reverted this to unblock the sync but it's probably an easy fix. Feel free to reland after fixing the Flow errors etc. |
| @@ -109,6 +110,13 @@ type DevToolsConfig = {| | |||
| // This API is unfortunately RN-specific. | |||
| // TODO: Change it to accept Fiber instead and type it properly. | |||
| getInspectorDataForViewTag?: (tag: number) => Object, | |||
| // Used by RN in-app inspector. | |||
| getInspectorDataForViewAtPoint?: ( | |||
There was a problem hiding this comment.
I don't think either of these two should be part of this type because they're not actually used by the core DevTools protocol. It's kind of an adhoc RN specific addition.
Instead we should make this a renderer specific object.
rendererConfig: RendererInspectionConfig
Then you can define the type for RendererInspectionConfig through the HostConfig mechanism. So that each renderer gets their own type. That can then be safely referenced in the react-native folder.
So Fabric and RN host configs gets this type:
export type RendererInspectionConfig = {
getInspectorDataForViewTag?: (tag: number) => Object,
getInspectorDataForViewAtPoint?: (...) => ...;
};
You then import that from here using:
import type {RendererInspectionConfig} from './ReactFiberHostConfig';
Summary
This diff adds
getInspectorDataForViewAtPoint, accessible through the DevTools hook, which provides an interface to return inspector data about the view touched at a given point. This allows the React Native inspector to ask React for information about a view at an x,y touch point without any knowledge of how each renderer gets the information.Implementation
Paper
For Paper we've just moved the logic from the InspectorOverlay into React Core. This will allow us to delete
getInspectorDataForViewTagcalled here which is necessary since Fabric does not support React tags.Fabric
For Fabric we add a new strategy which queries native for a node using
findNodeAtPoint, passes the shadow node tomeasure, and then asks React for the fiber information.Test Plan