feat[devtools]: display native tag for host components for Native

Author: hoxyq

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -808,6 +808,27 @@ function getPublicInstance(instance: HostInstance): HostInstance {
   return instance;
 }
 
+function getNativeTag(instance: HostInstance): number | null {
+  if (typeof instance !== 'object' || instance === null) {
+    return null;
+  }
+
+  // Modern. Fabric.
+  if (
+    instance.canonical != null &&
+    typeof instance.canonical.nativeTag === 'number'
+  ) {
+    return instance.canonical.nativeTag;
+  }
+
+  // Legacy.  Paper.
+  if (typeof instance._nativeTag === 'number') {
+    return instance._nativeTag;
+  }
+
+  return null;
+}
+
 function aquireHostInstance(
   nearestInstance: DevToolsInstance,
   hostInstance: HostInstance,
@@ -4298,6 +4319,11 @@ export function attach(
       componentLogsEntry = fiberToComponentLogsMap.get(fiber.alternate);
     }
 
+    let nativeTag = null;
+    if (elementType === ElementTypeHostComponent) {
+      nativeTag = getNativeTag(fiber.stateNode);
+    }
+
     return {
       id: fiberInstance.id,
 
@@ -4364,6 +4390,8 @@ export function attach(
       rendererVersion: renderer.version,
 
       plugins,
+
+      nativeTag,
     };
   }
 
@@ -4457,6 +4485,8 @@ export function attach(
       rendererVersion: renderer.version,
 
       plugins,
+
+      nativeTag: null,
     };
   }
 

packages/react-devtools-shared/src/backend/legacy/renderer.js

@@ -859,6 +859,8 @@ export function attach(
       plugins: {
         stylex: null,
       },
+
+      nativeTag: null,
     };
   }
 

packages/react-devtools-shared/src/backend/types.js

@@ -294,6 +294,9 @@ export type InspectedElement = {
 
   // UI plugins/visualizations for the inspected element.
   plugins: Plugins,
+
+  // React Native only.
+  nativeTag: number | null,
 };
 
 export const InspectElementErrorType = 'error';

packages/react-devtools-shared/src/backendAPI.js

@@ -239,6 +239,7 @@ export function convertInspectedElementBackendToFrontend(
     key,
     errors,
     warnings,
+    nativeTag,
   } = inspectedElementBackend;
 
   const inspectedElement: InspectedElementFrontend = {
@@ -273,6 +274,7 @@ export function convertInspectedElementBackendToFrontend(
     state: hydrateHelper(state),
     errors,
     warnings,
+    nativeTag,
   };
 
   return inspectedElement;

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementBadges.js

@@ -11,28 +11,33 @@ import * as React from 'react';
 
 import Badge from './Badge';
 import ForgetBadge from './ForgetBadge';
+import NativeTagBadge from './NativeTagBadge';
 
 import styles from './InspectedElementBadges.css';
 
 type Props = {
   hocDisplayNames: null | Array<string>,
   compiledWithForget: boolean,
+  nativeTag: number | null,
 };
 
 export default function InspectedElementBadges({
   hocDisplayNames,
   compiledWithForget,
+  nativeTag,
 }: Props): React.Node {
   if (
     !compiledWithForget &&
-    (hocDisplayNames == null || hocDisplayNames.length === 0)
+    (hocDisplayNames == null || hocDisplayNames.length === 0) &&
+    nativeTag === null
   ) {
     return null;
   }
 
   return (
     <div className={styles.Root}>
       {compiledWithForget && <ForgetBadge indexable={false} />}
+      {nativeTag !== null && <NativeTagBadge nativeTag={nativeTag} />}
 
       {hocDisplayNames !== null &&
         hocDisplayNames.map(hocDisplayName => (

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js

@@ -75,6 +75,7 @@ export default function InspectedElementView({
           <InspectedElementBadges
             hocDisplayNames={element.hocDisplayNames}
             compiledWithForget={element.compiledWithForget}
+            nativeTag={inspectedElement.nativeTag}
           />
         </div>
 

packages/react-devtools-shared/src/devtools/views/Components/NativeTagBadge.css

@@ -0,0 +1,11 @@
+.Toggle {
+  display: flex;
+}
+
+.Toggle > span { /* targets .ToggleContent */
+  padding: 0;
+}
+
+.Badge {
+  cursor: help;
+}

packages/react-devtools-shared/src/devtools/views/Components/NativeTagBadge.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+
+import Badge from './Badge';
+import Toggle from '../Toggle';
+
+import styles from './NativeTagBadge.css';
+
+type Props = {
+  nativeTag: number,
+};
+
+const noop = () => {};
+const title =
+  'Unique identifier for the corresponding native component. React Native only.';
+
+export default function ForgetBadge({nativeTag}: Props): React.Node {
+  return (
+    <Toggle onChange={noop} className={styles.Toggle} title={title}>
+      <Badge className={styles.Badge}>Tag {nativeTag}</Badge>
+    </Toggle>
+  );
+}

packages/react-devtools-shared/src/frontend/types.js

@@ -259,6 +259,9 @@ export type InspectedElement = {
 
   // UI plugins/visualizations for the inspected element.
   plugins: Plugins,
+
+  // React Native only.
+  nativeTag: number | null,
 };
 
 // TODO: Add profiling type