Implement id property in ReadOnlyElement (#37755)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/37755

This implements the `id` property in `ReadOnlyElement` as an alias for the `id` or `nativeID` props of the element.

This is currently implemented using an internal API in React but we should find an alternative solution for this in Fabric in the near future. Adding this now because it's useful for debugging.

Changelog: [internal]

Reviewed By: javache

Differential Revision: D46518381

fbshipit-source-id: 1a72fe0349c248744f49b795022b6fdb3359885d

packages/react-native/Libraries/DOM/Nodes/ReadOnlyElement.js

@@ -15,7 +15,11 @@ import type HTMLCollection from '../OldStyleCollections/HTMLCollection';
 import {getFabricUIManager} from '../../ReactNative/FabricUIManager';
 import DOMRect from '../Geometry/DOMRect';
 import {createHTMLCollection} from '../OldStyleCollections/HTMLCollection';
-import ReadOnlyNode, {getChildNodes, getShadowNode} from './ReadOnlyNode';
+import ReadOnlyNode, {
+  getChildNodes,
+  getInstanceHandle,
+  getShadowNode,
+} from './ReadOnlyNode';
 import {getElementSibling} from './Utilities/Traversal';
 import nullthrows from 'nullthrows';
 
@@ -55,7 +59,11 @@ export default class ReadOnlyElement extends ReadOnlyNode {
   }
 
   get id(): string {
-    throw new TypeError('Unimplemented');
+    const instanceHandle = getInstanceHandle(this);
+    // TODO: migrate off this private React API
+    // $FlowExpectedError[incompatible-use]
+    const props = instanceHandle?.stateNode?.canonical?.currentProps;
+    return props?.id ?? props?.nativeID ?? '';
   }
 
   get lastElementChild(): ReadOnlyElement | null {

packages/react-native/Libraries/DOM/Nodes/ReadOnlyNode.js

@@ -293,7 +293,7 @@ export default class ReadOnlyNode {
 
 const INSTANCE_HANDLE_KEY = Symbol('internalInstanceHandle');
 
-function getInstanceHandle(node: ReadOnlyNode): InternalInstanceHandle {
+export function getInstanceHandle(node: ReadOnlyNode): InternalInstanceHandle {
   // $FlowExpectedError[prop-missing]
   return node[INSTANCE_HANDLE_KEY];
 }