diff --git a/packages/react-native/Libraries/DOM/Nodes/ReadOnlyElement.js b/packages/react-native/Libraries/DOM/Nodes/ReadOnlyElement.js index b6ecccb0c84..321bf454027 100644 --- a/packages/react-native/Libraries/DOM/Nodes/ReadOnlyElement.js +++ b/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 { diff --git a/packages/react-native/Libraries/DOM/Nodes/ReadOnlyNode.js b/packages/react-native/Libraries/DOM/Nodes/ReadOnlyNode.js index e92a298be91..8a95751f8e4 100644 --- a/packages/react-native/Libraries/DOM/Nodes/ReadOnlyNode.js +++ b/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]; }