Add React DevTools support for Inspector in Fabric

rickhanlonii · May 12, 2020 · f72d1a5 · f72d1a5
1 parent 61f2a56
commit f72d1a5
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/packages/react-native-renderer/src/ReactNativeFiberInspector.js b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
@@ -128,6 +128,7 @@ if (__DEV__) {
     const selectedIndex = fiberHierarchy.indexOf(instance);
 
     return {
+      instance: closestInstance,
       hierarchy,
       props,
       selectedIndex,

diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js
@@ -9,6 +9,7 @@
  */
 
 import type {ElementRef, AbstractComponent} from 'react';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 
 export type MeasureOnSuccessCallback = (
   x: number,
@@ -128,17 +129,31 @@ export type InspectorData = $ReadOnly<{|
   source: ?InspectorDataSource,
 |}>;
 
-export type TouchedViewDataAtPoint = $ReadOnly<{|
-  pointerY: number,
-  touchedViewTag?: number,
-  frame: $ReadOnly<{|
-    top: number,
-    left: number,
-    width: number,
-    height: number,
-  |}>,
-  ...InspectorData,
-|}>;
+export type TouchedViewDataAtPoint =
+  // Fabric data.
+  | $ReadOnly<{|
+      pointerY: number,
+      instance?: Fiber, // Should this be a host instance (ShadowNode)?
+      frame: $ReadOnly<{|
+        top: number,
+        left: number,
+        width: number,
+        height: number,
+      |}>,
+      ...InspectorData,
+    |}>
+  // Paper data.
+  | $ReadOnly<{|
+      pointerY: number,
+      touchedViewTag?: number, // Deprecated, paper only.
+      frame: $ReadOnly<{|
+        top: number,
+        left: number,
+        width: number,
+        height: number,
+      |}>,
+      ...InspectorData,
+    |}>;
 
 /**
  * Flat ReactNative renderer bundles are too big for Flow to parse efficiently.