[React Native] Add getInspectorDataForViewAtPoint

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

@@ -8,7 +8,7 @@
  */
 
 import type {Fiber} from 'react-reconciler/src/ReactFiber';
-import type {TouchedViewDataAtPoint} from './ReactNativeTypes';
+import type {TouchedViewDataAtPoint, InspectorData} from './ReactNativeTypes';
 
 import {
   findCurrentHostFiber,
@@ -82,16 +82,42 @@ if (__DEV__) {
   const createHierarchy = function(fiberHierarchy) {
     return fiberHierarchy.map(fiber => ({
       name: getComponentName(fiber.type),
-      getInspectorData: findNodeHandle => ({
-        measure: callback =>
-          UIManager.measure(getHostNode(fiber, findNodeHandle), callback),
-        props: getHostProps(fiber),
-        source: fiber._debugSource,
-      }),
+      getInspectorData: findNodeHandle => {
+        return {
+          props: getHostProps(fiber),
+          source: fiber._debugSource,
+          measure: callback => {
+            // If this is Fabric, we'll find a ShadowNode and use that to measure.
+            const hostFiber = findCurrentHostFiber(fiber);
+            const shadowNode =
+              hostFiber != null &&
+              hostFiber.stateNode !== null &&
+              hostFiber.stateNode.node;
+
+            if (shadowNode) {
+              nativeFabricUIManager.measure(shadowNode, function(
+                x,
+                y,
+                width,
+                height,
+                pageX,
+                pageY,
+              ) {
+                callback(x, y, width, height, pageX, pageY);
+              });
+            } else {
+              return UIManager.measure(
+                getHostNode(fiber, findNodeHandle),
+                callback,
+              );
+            }
+          },
+        };
+      },
     }));
   };
 
-  const getInspectorDataForInstance = function(closestInstance, frame): Object {
+  const getInspectorDataForInstance = function(closestInstance): InspectorData {
     // Handle case where user clicks outside of ReactNative
     if (!closestInstance) {
       return {
@@ -112,7 +138,6 @@ if (__DEV__) {
 
     return {
       hierarchy,
-      frame,
       props,
       selection,
       source,
@@ -156,35 +181,31 @@ if (__DEV__) {
     callback: (viewData: TouchedViewDataAtPoint) => mixed,
   ): void {
     let closestInstance = null;
-    let frame = {
-      left: 0,
-      top: 0,
-      width: 0,
-      height: 0,
-    };
 
     if (inspectedView._internalInstanceHandle != null) {
       // For Fabric we can look up the instance handle directly and measure it.
       nativeFabricUIManager.findNodeAtPoint(
         inspectedView._internalInstanceHandle.stateNode.node,
         locationX,
         locationY,
-        shadowNode => {
-          if (shadowNode == null) {
-            callback(getInspectorDataForInstance(closestInstance, frame));
+        internalInstanceHandle => {
+          if (internalInstanceHandle == null) {
+            callback({
+              pointerY: locationY,
+              frame: {left: 0, top: 0, width: 0, height: 0},
+              ...getInspectorDataForInstance(closestInstance),
+            });
           }
 
           closestInstance =
-            shadowNode.stateNode.canonical._internalInstanceHandle;
+            internalInstanceHandle.stateNode.canonical._internalInstanceHandle;
           nativeFabricUIManager.measure(
-            shadowNode.stateNode.node,
+            internalInstanceHandle.stateNode.node,
             (x, y, width, height, pageX, pageY) => {
-              const inspectorData = getInspectorDataForInstance(
-                closestInstance,
-              );
               callback({
-                ...inspectorData,
+                pointerY: locationY,
                 frame: {left: pageX, top: pageY, width, height},
+                ...getInspectorDataForInstance(closestInstance),
               });
             },
           );
@@ -201,6 +222,7 @@ if (__DEV__) {
           );
           callback({
             ...inspectorData,
+            pointerY: locationY,
             frame: {left, top, width, height},
             touchedViewTag: nativeViewTag,
           });

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

@@ -100,22 +100,44 @@ type SecretInternalsType = {
   ...
 };
 
+type InspectorDataProps = $ReadOnly<{
+  [propName: string]: string,
+  ...,
+}>;
+
+type InspectorDataSource = $ReadOnly<{|
+  fileName?: string,
+  lineNumber?: number,
+|}>;
+
+type InspectorDataGetter = (
+  (componentOrHandle: any) => ?number,
+) => $ReadOnly<{|
+  measure: Function,
+  props: InspectorDataProps,
+  source: InspectorDataSource,
+|}>;
+
+export type InspectorData = $ReadOnly<{
+  hierarchy: Array<{|
+    name: ?string,
+    getInspectorData: InspectorDataGetter,
+  |}>,
+  selection: ?number,
+  props: InspectorDataProps,
+  source: ?InspectorDataSource,
+}>;
+
 export type TouchedViewDataAtPoint = $ReadOnly<{
-  hierarchy?: ?Array<{|name: string|}>,
   pointerY: number,
-  touchedViewTag?: ?number,
-  props: $ReadOnly<{[propName: string]: string, ...}>,
-  selection: number,
-  source: $ReadOnly<{|
-    fileName?: string,
-    lineNumber?: number,
-  |}>,
-  frame?: ?$ReadOnly<{|
-    top?: ?number,
-    left?: ?number,
-    width?: ?number,
-    height: ?number,
+  touchedViewTag?: number,
+  frame: $ReadOnly<{|
+    top: number,
+    left: number,
+    width: number,
+    height: number,
   |}>,
+  ...InspectorData,
 }>;
 
 /**

scripts/error-codes/codes.json

@@ -347,5 +347,5 @@
   "346": "An event responder context was used outside of an event cycle.",
   "347": "Maps are not valid as a React child (found: %s). Consider converting children to an array of keyed ReactElements instead.",
   "348": "ensureListeningTo(): received a container that was not an element node. This is likely a bug in React.",
-  "349": "getInspectorDataForViewAtPoint() is not available in production"
+  "349": "getInspectorDataForViewAtPoint() is not available in production."
 }