@office-iss/react-native-win32 0.0.0-canary.284 → 0.0.0-canary.285

package/src/private/webapis/dom/nodes/specs/NativeDOM.js

@@ -4,19 +4,26 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  */
 
-import type {
-  InternalInstanceHandle as InstanceHandle,
-  Node as ShadowNode,
-} from '../../../../../../Libraries/Renderer/shims/ReactNativeTypes';
+import type {RootTag} from '../../../../../../Libraries/ReactNative/RootTag';
+import type {Node as ShadowNode} from '../../../../../../Libraries/Renderer/shims/ReactNativeTypes';
 import type {TurboModule} from '../../../../../../Libraries/TurboModule/RCTExport';
+import type {InstanceHandle} from '../internals/NodeInternals';
 
 import * as TurboModuleRegistry from '../../../../../../Libraries/TurboModule/TurboModuleRegistry';
 import nullthrows from 'nullthrows';
 
+export opaque type NativeElementReference = ShadowNode;
+export opaque type NativeTextReference = ShadowNode;
+
+export type NativeNodeReference =
+  | NativeElementReference
+  | NativeTextReference
+  | RootTag;
+
 export type MeasureInWindowOnSuccessCallback = (
   x: number,
   y: number,
@@ -41,78 +48,108 @@ export type MeasureLayoutOnSuccessCallback = (
 ) => void;
 
 export interface Spec extends TurboModule {
-  +getParentNode: (
-    shadowNode: mixed /* ShadowNode */,
-  ) => mixed /* ?InstanceHandle */;
+  /*
+   * Methods from the `Node` interface (for `ReadOnlyNode`).
+   */
+
+  +compareDocumentPosition: (
+    nativeNodeReference: mixed /* NativeNodeReference */,
+    otherNativeNodeReference: mixed /* NativeNodeReference */,
+  ) => number;
 
   +getChildNodes: (
-    shadowNode: mixed /* ShadowNode */,
+    nativeNodeReference: mixed /* NativeNodeReference */,
   ) => $ReadOnlyArray<mixed> /* $ReadOnlyArray<InstanceHandle> */;
 
-  +isConnected: (shadowNode: mixed /* ShadowNode */) => boolean;
+  +getParentNode: (
+    nativeNodeReference: mixed /* NativeNodeReference */,
+  ) => mixed /* ?InstanceHandle */;
 
-  +compareDocumentPosition: (
-    shadowNode: mixed /* ShadowNode */,
-    otherShadowNode: mixed /* ShadowNode */,
-  ) => number;
+  +isConnected: (
+    nativeNodeReference: mixed /* NativeNodeReference */,
+  ) => boolean;
 
-  +getTextContent: (shadowNode: mixed /* ShadowNode */) => string;
+  /*
+   * Methods from the `Element` interface (for `ReactNativeElement`).
+   */
+
+  +getBorderWidth: (
+    nativeElementReference: mixed /* NativeElementReference */,
+  ) => $ReadOnlyArray<number> /* [topWidth: number, rightWidth: number, bottomWidth: number, leftWidth: number] */;
 
   +getBoundingClientRect: (
-    shadowNode: mixed /* ShadowNode */,
+    nativeElementReference: mixed /* NativeElementReference */,
     includeTransform: boolean,
   ) => $ReadOnlyArray<number> /* [x: number, y: number, width: number, height: number] */;
 
-  +getOffset: (
-    shadowNode: mixed /* ShadowNode */,
-  ) => $ReadOnlyArray<mixed> /* [offsetParent: ?InstanceHandle, top: number, left: number] */;
+  +getInnerSize: (
+    nativeElementReference: mixed /* NativeElementReference */,
+  ) => $ReadOnlyArray<number> /* [width: number, height: number] */;
 
   +getScrollPosition: (
-    shadowNode: mixed /* ShadowNode */,
+    nativeElementReference: mixed /* NativeElementReference */,
   ) => $ReadOnlyArray<number> /* [scrollLeft: number, scrollTop: number] */;
 
   +getScrollSize: (
-    shadowNode: mixed /* ShadowNode */,
+    nativeElementReference: mixed /* NativeElementReference */,
   ) => $ReadOnlyArray<number> /* [scrollWidth: number, scrollHeight: number] */;
 
-  +getInnerSize: (
-    shadowNode: mixed /* ShadowNode */,
-  ) => $ReadOnlyArray<number> /* [width: number, height: number] */;
-
-  +getBorderWidth: (
-    shadowNode: mixed /* ShadowNode */,
-  ) => $ReadOnlyArray<number> /* [topWidth: number, rightWidth: number, bottomWidth: number, leftWidth: number] */;
+  +getTagName: (
+    nativeElementReference: mixed /* NativeElementReference */,
+  ) => string;
 
-  +getTagName: (shadowNode: mixed /* ShadowNode */) => string;
+  +getTextContent: (
+    nativeElementReference: mixed /* NativeElementReference */,
+  ) => string;
 
   +hasPointerCapture: (
-    shadowNode: mixed /* ShadowNode */,
+    nativeElementReference: mixed /* NativeElementReference */,
     pointerId: number,
   ) => boolean;
 
-  +setPointerCapture: (
-    shadowNode: mixed /* ShadowNode */,
+  +releasePointerCapture: (
+    nativeElementReference: mixed /* NativeElementReference */,
     pointerId: number,
   ) => void;
 
-  +releasePointerCapture: (
-    shadowNode: mixed /* ShadowNode */,
+  +setPointerCapture: (
+    nativeElementReference: mixed /* NativeElementReference */,
     pointerId: number,
   ) => void;
 
+  /*
+   * Methods from the `HTMLElement` interface (for `ReactNativeElement`).
+   */
+
+  +getOffset: (
+    nativeElementReference: mixed /* NativeElementReference */,
+  ) => $ReadOnlyArray<mixed> /* [offsetParent: ?InstanceHandle, top: number, left: number] */;
+
+  /*
+   * Special methods to handle the root node.
+   */
+
+  +linkRootNode?: (
+    rootTag: number /* RootTag */,
+    instanceHandle: mixed /* InstanceHandle */,
+  ) => mixed /* ?NativeElementReference */;
+
   /**
-   * Legacy layout APIs
+   * Legacy layout APIs (for `ReactNativeElement`).
    */
 
-  +measure: (shadowNode: mixed, callback: MeasureOnSuccessCallback) => void;
+  +measure: (
+    nativeElementReference: mixed,
+    callback: MeasureOnSuccessCallback,
+  ) => void;
 
   +measureInWindow: (
-    shadowNode: mixed,
+    nativeElementReference: mixed,
     callback: MeasureInWindowOnSuccessCallback,
   ) => void;
 
   +measureLayout: (
-    shadowNode: mixed,
+    nativeElementReference: mixed,
     relativeNode: mixed,
     onFail: () => void,
     onSuccess: MeasureLayoutOnSuccessCallback,
@@ -124,15 +161,22 @@ const RawNativeDOM = (TurboModuleRegistry.get<Spec>('NativeDOMCxx'): ?Spec);
 // This is the actual interface of this module, but the native module codegen
 // isn't expressive enough yet.
 export interface RefinedSpec {
+  /*
+   * Methods from the `Node` interface (for `ReadOnlyNode`).
+   */
+
   /**
-   * This is a React Native implementation of `Node.prototype.parentNode`
-   * (see https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode).
+   * This is a React Native implementation of `Node.prototype.compareDocumentPosition`
+   * (see https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).
    *
-   * If a version of the given shadow node is present in the current revision of
-   * an active shadow tree, it returns the instance handle of its parent.
-   * Otherwise, it returns `null`.
+   * It uses the version of the shadow nodes that are present in the current
+   * revision of the shadow tree (if any). If any of the nodes is not present,
+   * it just indicates they are disconnected.
    */
-  +getParentNode: (shadowNode: ShadowNode) => ?InstanceHandle;
+  +compareDocumentPosition: (
+    nativeNodeReference: NativeNodeReference,
+    otherNativeNodeReference: NativeNodeReference,
+  ) => number;
 
   /**
    * This is a React Native implementation of `Node.prototype.childNodes`
@@ -142,7 +186,19 @@ export interface RefinedSpec {
    * of an active shadow tree, it returns an array of instance handles of its
    * children. Otherwise, it returns an empty array.
    */
-  +getChildNodes: (shadowNode: ShadowNode) => $ReadOnlyArray<InstanceHandle>;
+  +getChildNodes: (
+    nativeNodeReference: NativeNodeReference,
+  ) => $ReadOnlyArray<InstanceHandle>;
+
+  /**
+   * This is a React Native implementation of `Node.prototype.parentNode`
+   * (see https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode).
+   *
+   * If a version of the given shadow node is present in the current revision of
+   * an active shadow tree, it returns the instance handle of its parent.
+   * Otherwise, it returns `null`.
+   */
+  +getParentNode: (nativeNodeReference: NativeNodeReference) => ?InstanceHandle;
 
   /**
    * This is a React Native implementation of `Node.prototype.isConnected`
@@ -151,34 +207,34 @@ export interface RefinedSpec {
    * Indicates whether a version of the given shadow node is present in the
    * current revision of an active shadow tree.
    */
-  +isConnected: (shadowNode: ShadowNode) => boolean;
+  +isConnected: (nativeNodeReference: NativeNodeReference) => boolean;
 
-  /**
-   * This is a React Native implementation of `Node.prototype.compareDocumentPosition`
-   * (see https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).
-   *
-   * It uses the version of the shadow nodes that are present in the current
-   * revision of the shadow tree (if any). If any of the nodes is not present,
-   * it just indicates they are disconnected.
+  /*
+   * Methods from the `Element` interface (for `ReactNativeElement`).
    */
-  +compareDocumentPosition: (
-    shadowNode: ShadowNode,
-    otherShadowNode: ShadowNode,
-  ) => number;
 
   /**
-   * This is a React Native implementation of `Element.prototype.textContent`
-   * (see https://developer.mozilla.org/en-US/docs/Web/API/Element/textContent).
+   * This is a method to access the border size of a shadow node, to implement
+   * these methods:
+   *   - `Element.prototype.clientLeft`: see https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft.
+   *   - `Element.prototype.clientTop`: see https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop.
    *
    * It uses the version of the shadow node that is present in the current
-   * revision of the shadow tree.
-   * If the version is present, is traverses all its children in DFS and
-   * concatenates all the text contents. Otherwise, it returns an empty string.
-   *
-   * This is also used to access the text content of text nodes, which does not
-   * need any traversal.
+   * revision of the shadow tree. If the node is not present, it is not
+   * displayed (because any of its ancestors or itself have 'display: none'), or
+   * it has an inline display, it returns `undefined`. Otherwise, it returns its
+   * border size.
    */
-  +getTextContent: (shadowNode: ShadowNode) => string;
+  +getBorderWidth: (
+    nativeElementReference: NativeElementReference,
+  ) => $ReadOnly<
+    [
+      /* topWidth: */ number,
+      /* rightWidth: */ number,
+      /* bottomWidth: */ number,
+      /* leftWidth: */ number,
+    ],
+  >;
 
   /**
    * This is a React Native implementation of `Element.prototype.getBoundingClientRect`
@@ -192,7 +248,7 @@ export interface RefinedSpec {
    * and [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight).
    */
   +getBoundingClientRect: (
-    shadowNode: ShadowNode,
+    nativeElementReference: NativeElementReference,
     includeTransform: boolean,
   ) => $ReadOnly<
     [
@@ -204,28 +260,20 @@ export interface RefinedSpec {
   >;
 
   /**
-   * This is a method to access the offset information for a shadow node, to
-   * implement these methods:
-   *   - `HTMLElement.prototype.offsetParent`: see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent.
-   *   - `HTMLElement.prototype.offsetTop`: see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop.
-   *   - `HTMLElement.prototype.offsetLeft`: see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft.
+   * This is a method to access the inner size of a shadow node, to implement
+   * these methods:
+   *   - `Element.prototype.clientWidth`: see https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth.
+   *   - `Element.prototype.clientHeight`: see https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight.
    *
    * It uses the version of the shadow node that is present in the current
-   * revision of the shadow tree. If the node is not present or is not
-   * displayed (because any of its ancestors or itself have 'display: none'),
-   * it returns `undefined`. Otherwise, it returns its parent (as all nodes in
-   * React Native are currently "positioned") and its offset relative to its
-   * parent.
+   * revision of the shadow tree. If the node is not present, it is not
+   * displayed (because any of its ancestors or itself have 'display: none'), or
+   * it has an inline display, it returns `undefined`. Otherwise, it returns its
+   * inner size.
    */
-  +getOffset: (
-    shadowNode: ShadowNode,
-  ) => $ReadOnly<
-    [
-      /* offsetParent: */ ?InstanceHandle,
-      /* top: */ number,
-      /* left: */ number,
-    ],
-  >;
+  +getInnerSize: (
+    nativeElementReference: NativeElementReference,
+  ) => $ReadOnly<[/* width: */ number, /* height: */ number]>;
 
   /**
    * This is a method to access scroll information for a shadow node, to
@@ -239,7 +287,7 @@ export interface RefinedSpec {
    * `undefined`. Otherwise, it returns the scroll position.
    */
   +getScrollPosition: (
-    shadowNode: ShadowNode,
+    nativeElementReference: NativeElementReference,
   ) => $ReadOnly<[/* scrollLeft: */ number, /* scrollTop: */ number]>;
 
   /**
@@ -255,120 +303,165 @@ export interface RefinedSpec {
    * `undefined`. Otherwise, it returns the scroll size.
    */
   +getScrollSize: (
-    shadowNode: ShadowNode,
+    nativeElementReference: NativeElementReference,
   ) => $ReadOnly<[/* scrollWidth: */ number, /* scrollHeight: */ number]>;
 
   /**
-   * This is a method to access the inner size of a shadow node, to implement
-   * these methods:
-   *   - `Element.prototype.clientWidth`: see https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth.
-   *   - `Element.prototype.clientHeight`: see https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight.
+   * This is a method to access the normalized tag name of a shadow node, to
+   * implement `Element.prototype.tagName` (see https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName).
+   */
+  +getTagName: (nativeElementReference: NativeElementReference) => string;
+
+  /**
+   * This is a React Native implementation of `Element.prototype.textContent`
+   * (see https://developer.mozilla.org/en-US/docs/Web/API/Element/textContent).
    *
    * It uses the version of the shadow node that is present in the current
-   * revision of the shadow tree. If the node is not present, it is not
-   * displayed (because any of its ancestors or itself have 'display: none'), or
-   * it has an inline display, it returns `undefined`. Otherwise, it returns its
-   * inner size.
+   * revision of the shadow tree.
+   * If the version is present, is traverses all its children in DFS and
+   * concatenates all the text contents. Otherwise, it returns an empty string.
+   *
+   * This is also used to access the text content of text nodes, which does not
+   * need any traversal.
    */
-  +getInnerSize: (
-    shadowNode: ShadowNode,
-  ) => $ReadOnly<[/* width: */ number, /* height: */ number]>;
+  +getTextContent: (nativeNodeReference: NativeNodeReference) => string;
+
+  +hasPointerCapture: (
+    nativeElementReference: NativeElementReference,
+    pointerId: number,
+  ) => boolean;
+
+  +releasePointerCapture: (
+    nativeElementReference: NativeElementReference,
+    pointerId: number,
+  ) => void;
+
+  +setPointerCapture: (
+    nativeElementReference: NativeElementReference,
+    pointerId: number,
+  ) => void;
 
   /**
-   * This is a method to access the border size of a shadow node, to implement
-   * these methods:
-   *   - `Element.prototype.clientLeft`: see https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft.
-   *   - `Element.prototype.clientTop`: see https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop.
+   * This is a method to access the offset information for a shadow node, to
+   * implement these methods:
+   *   - `HTMLElement.prototype.offsetParent`: see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent.
+   *   - `HTMLElement.prototype.offsetTop`: see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop.
+   *   - `HTMLElement.prototype.offsetLeft`: see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft.
    *
    * It uses the version of the shadow node that is present in the current
-   * revision of the shadow tree. If the node is not present, it is not
-   * displayed (because any of its ancestors or itself have 'display: none'), or
-   * it has an inline display, it returns `undefined`. Otherwise, it returns its
-   * border size.
+   * revision of the shadow tree. If the node is not present or is not
+   * displayed (because any of its ancestors or itself have 'display: none'),
+   * it returns `undefined`. Otherwise, it returns its parent (as all nodes in
+   * React Native are currently "positioned") and its offset relative to its
+   * parent.
    */
-  +getBorderWidth: (
-    shadowNode: ShadowNode,
+  +getOffset: (
+    nativeElementReference: NativeElementReference,
   ) => $ReadOnly<
     [
-      /* topWidth: */ number,
-      /* rightWidth: */ number,
-      /* bottomWidth: */ number,
-      /* leftWidth: */ number,
+      /* offsetParent: */ ?InstanceHandle,
+      /* top: */ number,
+      /* left: */ number,
     ],
   >;
 
-  /**
-   * This is a method to access the normalized tag name of a shadow node, to
-   * implement `Element.prototype.tagName` (see https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName).
+  /*
+   * Special methods to handle the root node.
    */
-  +getTagName: (shadowNode: ShadowNode) => string;
 
   /**
-   * Pointer Capture APIs
+   * In React Native, surfaces that represent trees (similar to a `Document` on
+   * Web) are created in native first, and then populated from JavaScript.
+   *
+   * Because React does not create this special node, we need a way to link
+   * the JavaScript instance with that node, which is what this method allows.
+   *
+   * It also allows the implementation of `Node.prototype.ownerDocument` and
+   * `Node.prototype.getRootNode`
+   * (see https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument and
+   * https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode).
+   *
+   * Returns a shadow node representing the root node if it is still mounted.
    */
-
-  +hasPointerCapture: (shadowNode: ShadowNode, pointerId: number) => boolean;
-
-  +setPointerCapture: (shadowNode: ShadowNode, pointerId: number) => void;
-
-  +releasePointerCapture: (shadowNode: ShadowNode, pointerId: number) => void;
+  +linkRootNode: (
+    rootTag: RootTag,
+    instanceHandle: InstanceHandle,
+  ) => ?NativeElementReference;
 
   /**
    * Legacy layout APIs
    */
 
   +measure: (
-    shadowNode: ShadowNode,
+    nativeElementReference: NativeElementReference,
     callback: MeasureOnSuccessCallback,
   ) => void;
 
   +measureInWindow: (
-    shadowNode: ShadowNode,
+    nativeElementReference: NativeElementReference,
     callback: MeasureInWindowOnSuccessCallback,
   ) => void;
 
   +measureLayout: (
-    shadowNode: ShadowNode,
-    relativeNode: ShadowNode,
+    nativeElementReference: NativeElementReference,
+    relativeNode: NativeElementReference,
     onFail: () => void,
     onSuccess: MeasureLayoutOnSuccessCallback,
   ) => void;
 }
 
 const NativeDOM: RefinedSpec = {
-  getParentNode(shadowNode) {
-    // $FlowExpectedError[incompatible-cast]
-    return (nullthrows(RawNativeDOM).getParentNode(
-      shadowNode,
-    ): ?InstanceHandle);
+  /*
+   * Methods from the `Node` interface (for `ReadOnlyNode`).
+   */
+
+  compareDocumentPosition(nativeNodeReference, otherNativeNodeReference) {
+    return nullthrows(RawNativeDOM).compareDocumentPosition(
+      nativeNodeReference,
+      otherNativeNodeReference,
+    );
   },
 
-  getChildNodes(shadowNode) {
+  getChildNodes(nativeNodeReference) {
     // $FlowExpectedError[incompatible-cast]
     return (nullthrows(RawNativeDOM).getChildNodes(
-      shadowNode,
+      nativeNodeReference,
     ): $ReadOnlyArray<InstanceHandle>);
   },
 
-  isConnected(shadowNode) {
-    return nullthrows(RawNativeDOM).isConnected(shadowNode);
+  getParentNode(nativeNodeReference) {
+    // $FlowExpectedError[incompatible-cast]
+    return (nullthrows(RawNativeDOM).getParentNode(
+      nativeNodeReference,
+    ): ?InstanceHandle);
   },
 
-  compareDocumentPosition(shadowNode, otherShadowNode) {
-    return nullthrows(RawNativeDOM).compareDocumentPosition(
-      shadowNode,
-      otherShadowNode,
-    );
+  isConnected(nativeNodeReference) {
+    return nullthrows(RawNativeDOM).isConnected(nativeNodeReference);
   },
 
-  getTextContent(shadowNode) {
-    return nullthrows(RawNativeDOM).getTextContent(shadowNode);
+  /*
+   * Methods from the `Element` interface (for `ReactNativeElement`).
+   */
+
+  getBorderWidth(nativeNodeReference) {
+    // $FlowExpectedError[incompatible-cast]
+    return (nullthrows(RawNativeDOM).getBorderWidth(
+      nativeNodeReference,
+    ): $ReadOnly<
+      [
+        /* topWidth: */ number,
+        /* rightWidth: */ number,
+        /* bottomWidth: */ number,
+        /* leftWidth: */ number,
+      ],
+    >);
   },
 
-  getBoundingClientRect(shadowNode, includeTransform: boolean) {
+  getBoundingClientRect(nativeNodeReference, includeTransform: boolean) {
     // $FlowExpectedError[incompatible-cast]
     return (nullthrows(RawNativeDOM).getBoundingClientRect(
-      shadowNode,
+      nativeNodeReference,
       includeTransform,
     ): $ReadOnly<
       [
@@ -380,84 +473,102 @@ const NativeDOM: RefinedSpec = {
     >);
   },
 
-  getOffset(shadowNode) {
-    // $FlowExpectedError[incompatible-cast]
-    return (nullthrows(RawNativeDOM).getOffset(shadowNode): $ReadOnly<
-      [
-        /* offsetParent: */ ?InstanceHandle,
-        /* top: */ number,
-        /* left: */ number,
-      ],
-    >);
-  },
-
-  getScrollPosition(shadowNode) {
+  getInnerSize(nativeNodeReference) {
     // $FlowExpectedError[incompatible-cast]
-    return (nullthrows(RawNativeDOM).getScrollPosition(shadowNode): $ReadOnly<
-      [/* scrollLeft: */ number, /* scrollTop: */ number],
-    >);
+    return (nullthrows(RawNativeDOM).getInnerSize(
+      nativeNodeReference,
+    ): $ReadOnly<[/* width: */ number, /* height: */ number]>);
   },
 
-  getScrollSize(shadowNode) {
+  getScrollPosition(nativeNodeReference) {
     // $FlowExpectedError[incompatible-cast]
-    return (nullthrows(RawNativeDOM).getScrollSize(shadowNode): $ReadOnly<
-      [/* scrollWidth: */ number, /* scrollHeight: */ number],
-    >);
+    return (nullthrows(RawNativeDOM).getScrollPosition(
+      nativeNodeReference,
+    ): $ReadOnly<[/* scrollLeft: */ number, /* scrollTop: */ number]>);
   },
 
-  getInnerSize(shadowNode) {
+  getScrollSize(nativeNodeReference) {
     // $FlowExpectedError[incompatible-cast]
-    return (nullthrows(RawNativeDOM).getInnerSize(shadowNode): $ReadOnly<
-      [/* width: */ number, /* height: */ number],
-    >);
+    return (nullthrows(RawNativeDOM).getScrollSize(
+      nativeNodeReference,
+    ): $ReadOnly<[/* scrollWidth: */ number, /* scrollHeight: */ number]>);
   },
 
-  getBorderWidth(shadowNode) {
-    // $FlowExpectedError[incompatible-cast]
-    return (nullthrows(RawNativeDOM).getBorderWidth(shadowNode): $ReadOnly<
-      [
-        /* topWidth: */ number,
-        /* rightWidth: */ number,
-        /* bottomWidth: */ number,
-        /* leftWidth: */ number,
-      ],
-    >);
+  getTagName(nativeNodeReference) {
+    return nullthrows(RawNativeDOM).getTagName(nativeNodeReference);
   },
 
-  getTagName(shadowNode) {
-    return nullthrows(RawNativeDOM).getTagName(shadowNode);
+  getTextContent(nativeNodeReference) {
+    return nullthrows(RawNativeDOM).getTextContent(nativeNodeReference);
   },
 
-  hasPointerCapture(shadowNode, pointerId) {
-    return nullthrows(RawNativeDOM).hasPointerCapture(shadowNode, pointerId);
+  hasPointerCapture(nativeNodeReference, pointerId) {
+    return nullthrows(RawNativeDOM).hasPointerCapture(
+      nativeNodeReference,
+      pointerId,
+    );
   },
 
-  setPointerCapture(shadowNode, pointerId) {
-    return nullthrows(RawNativeDOM).setPointerCapture(shadowNode, pointerId);
+  releasePointerCapture(nativeNodeReference, pointerId) {
+    return nullthrows(RawNativeDOM).releasePointerCapture(
+      nativeNodeReference,
+      pointerId,
+    );
   },
 
-  releasePointerCapture(shadowNode, pointerId) {
-    return nullthrows(RawNativeDOM).releasePointerCapture(
-      shadowNode,
+  setPointerCapture(nativeNodeReference, pointerId) {
+    return nullthrows(RawNativeDOM).setPointerCapture(
+      nativeNodeReference,
       pointerId,
     );
   },
 
+  /*
+   * Methods from the `HTMLElement` interface (for `ReactNativeElement`).
+   */
+
+  getOffset(nativeNodeReference) {
+    // $FlowExpectedError[incompatible-cast]
+    return (nullthrows(RawNativeDOM).getOffset(nativeNodeReference): $ReadOnly<
+      [
+        /* offsetParent: */ ?InstanceHandle,
+        /* top: */ number,
+        /* left: */ number,
+      ],
+    >);
+  },
+
+  /*
+   * Special methods to handle the root node.
+   */
+
+  linkRootNode(rootTag, instanceHandle) {
+    // $FlowExpectedError[incompatible-cast]
+    return (nullthrows(RawNativeDOM?.linkRootNode)(
+      // $FlowExpectedError[incompatible-call]
+      rootTag,
+      instanceHandle,
+    ): ?NativeElementReference);
+  },
+
   /**
    * Legacy layout APIs
    */
 
-  measure(shadowNode, callback) {
-    return nullthrows(RawNativeDOM).measure(shadowNode, callback);
+  measure(nativeNodeReference, callback) {
+    return nullthrows(RawNativeDOM).measure(nativeNodeReference, callback);
   },
 
-  measureInWindow(shadowNode, callback) {
-    return nullthrows(RawNativeDOM).measureInWindow(shadowNode, callback);
+  measureInWindow(nativeNodeReference, callback) {
+    return nullthrows(RawNativeDOM).measureInWindow(
+      nativeNodeReference,
+      callback,
+    );
   },
 
-  measureLayout(shadowNode, relativeNode, onFail, onSuccess) {
+  measureLayout(nativeNodeReference, relativeNode, onFail, onSuccess) {
     return nullthrows(RawNativeDOM).measureLayout(
-      shadowNode,
+      nativeNodeReference,
       relativeNode,
       onFail,
       onSuccess,