@office-iss/react-native-win32 0.0.0-canary.302 → 0.0.0-canary.303

package/src/private/animated/NativeAnimatedHelper.win32.js

@@ -127,7 +127,7 @@ function createNativeOperations(): $NonMaybeType<typeof NativeAnimatedModule> {
       };
     }
   }
-  // $FlowExpectedError[incompatible-return] - Dynamism.
+  // $FlowExpectedError[incompatible-type] - Dynamism.
   return nativeOperations;
 }
 
@@ -145,7 +145,7 @@ const API = {
         if (saveValueCallback) {
           eventListenerGetValueCallbacks[tag] = saveValueCallback;
         }
-        /* $FlowExpectedError[incompatible-call] - `saveValueCallback` is handled
+        /* $FlowExpectedError[incompatible-type] - `saveValueCallback` is handled
             differently when `isSingleOpBatching` is enabled. */
         NativeOperations.getValue(tag);
       }
@@ -274,7 +274,7 @@ const API = {
         if (endCallback) {
           eventListenerAnimationFinishedCallbacks[animationId] = endCallback;
         }
-        /* $FlowExpectedError[incompatible-call] - `endCallback` is handled
+        /* $FlowExpectedError[incompatible-type] - `endCallback` is handled
             differently when `isSingleOpBatching` is enabled. */
         NativeOperations.startAnimatingNode(animationId, nodeTag, config);
       }

package/src/private/animated/createAnimatedPropsHook.js

@@ -108,7 +108,7 @@ export default function createAnimatedPropsHook(
       (instance: TInstance) => {
         // NOTE: This may be called more often than necessary (e.g. when `props`
         // changes), but `setNativeView` already optimizes for that.
-        // $FlowFixMe[incompatible-call]
+        // $FlowFixMe[incompatible-type]
         node.setNativeView(instance);
 
         // NOTE: When using the JS animation driver, this callback is called on
@@ -125,13 +125,11 @@ export default function createAnimatedPropsHook(
           if (node.__isNative) {
             // Check 2: this is an animation driven by native.
             // In native driven animations, this callback is only called once the animation completes.
-            if (
-              isFabricNode &&
-              !(
-                ReactNativeFeatureFlags.cxxNativeAnimatedEnabled() &&
-                ReactNativeFeatureFlags.cxxNativeAnimatedRemoveJsSync()
-              )
-            ) {
+            const shouldRemoveJsSync =
+              ReactNativeFeatureFlags.cxxNativeAnimatedEnabled() &&
+              !ReactNativeFeatureFlags.disableFabricCommitInCXXAnimated() &&
+              ReactNativeFeatureFlags.cxxNativeAnimatedRemoveJsSync();
+            if (isFabricNode && !shouldRemoveJsSync) {
               // Call `scheduleUpdate` to synchronise Fiber and Shadow tree.
               // Must not be called in Paper.
               scheduleUpdate();
@@ -149,7 +147,7 @@ export default function createAnimatedPropsHook(
 
           if (!isFabricNode) {
             // Check 4: this is a paper instance, call setNativeProps.
-            // $FlowIgnore[not-a-function] - Assume it's still a function.
+            // $FlowFixMe[not-a-function] - Assume it's still a function.
             // $FlowFixMe[incompatible-use]
             return instance.setNativeProps(node.__getAnimatedValue());
           }
@@ -161,7 +159,7 @@ export default function createAnimatedPropsHook(
 
           // This is a Fabric instance and setNativeProps is supported.
 
-          // $FlowIgnore[not-a-function] - Assume it's still a function.
+          // $FlowFixMe[not-a-function] - Assume it's still a function.
           // $FlowFixMe[incompatible-use]
           instance.setNativeProps(node.__getAnimatedValue());
 
@@ -190,7 +188,7 @@ export default function createAnimatedPropsHook(
 
         for (const [propName, propValue] of eventTuples) {
           propValue.__attach(target, propName);
-          // $FlowFixMe[incompatible-call] - the `addListenersToPropsValue` drills down the propValue.
+          // $FlowFixMe[incompatible-type] - the `addListenersToPropsValue` drills down the propValue.
           addListenersToPropsValue(propValue, animatedValueListeners);
         }
 

package/src/private/animated/createAnimatedPropsMemoHook.js

@@ -264,9 +264,9 @@ export function areCompositeKeysEqual(
       // We know style components are objects with non-mixed values.
       if (
         !areCompositeKeyComponentsEqual(
-          // $FlowIgnore[incompatible-cast]
+          // $FlowFixMe[incompatible-type]
           prevComponent as $ReadOnlyCompositeKeyComponent,
-          // $FlowIgnore[incompatible-cast]
+          // $FlowFixMe[incompatible-type]
           nextComponent as $ReadOnlyCompositeKeyComponent,
         )
       ) {
@@ -289,9 +289,9 @@ export function areCompositeKeysEqual(
       } else {
         if (
           !areCompositeKeyComponentsEqual(
-            // $FlowIgnore[incompatible-cast]
+            // $FlowFixMe[incompatible-type]
             prevComponent as $ReadOnlyCompositeKeyComponent,
-            // $FlowIgnore[incompatible-cast]
+            // $FlowFixMe[incompatible-type]
             nextComponent as $ReadOnlyCompositeKeyComponent,
           )
         ) {
@@ -353,8 +353,8 @@ function areCompositeKeyComponentsEqual(
 
 // Supported versions of JSC do not implement the newer Object.hasOwn. Remove
 // this shim when they do.
-// $FlowIgnore[method-unbinding]
+// $FlowFixMe[method-unbinding]
 const _hasOwnProp = Object.prototype.hasOwnProperty;
 const hasOwn: (obj: $ReadOnly<{...}>, prop: string) => boolean =
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
   Object.hasOwn ?? ((obj, prop) => _hasOwnProp.call(obj, prop));

package/src/private/components/virtualview/VirtualView.js

@@ -10,7 +10,7 @@
 
 import type {ViewStyleProp} from '../../../../Libraries/StyleSheet/StyleSheet';
 import type {NativeSyntheticEvent} from '../../../../Libraries/Types/CoreEventTypes';
-import type ReadOnlyElement from '../../webapis/dom/nodes/ReadOnlyElement';
+import type {HostInstance} from '../../types/HostInstance';
 import type {NativeModeChangeEvent} from './VirtualViewNativeComponent';
 
 import StyleSheet from '../../../../Libraries/StyleSheet/StyleSheet';
@@ -44,7 +44,7 @@ export type Rect = $ReadOnly<{
 export type ModeChangeEvent = $ReadOnly<{
   ...Omit<NativeModeChangeEvent, 'mode'>,
   mode: VirtualViewMode,
-  target: ReadOnlyElement,
+  target: HostInstance,
 }>;
 
 type VirtualViewComponent = component(
@@ -53,6 +53,7 @@ type VirtualViewComponent = component(
   ref?: ?React.RefSetter<React.ElementRef<typeof VirtualViewNativeComponent>>,
   style?: ?ViewStyleProp,
   onModeChange?: (event: ModeChangeEvent) => void,
+  removeClippedSubviews?: boolean,
 );
 
 type HiddenHeight = number;
@@ -76,6 +77,7 @@ function createVirtualView(
     ref?: ?React.RefSetter<React.ElementRef<typeof VirtualViewNativeComponent>>,
     style?: ?ViewStyleProp,
     onModeChange?: (event: ModeChangeEvent) => void,
+    removeClippedSubviews?: boolean,
   ) {
     const [state, setState] = useState<State>(initialState);
     if (__DEV__) {
@@ -92,8 +94,8 @@ function createVirtualView(
           ? null
           : onModeChange.bind(null, {
               mode,
-              // $FlowIgnore[incompatible-cast]
-              target: event.currentTarget as ReadOnlyElement,
+              // $FlowFixMe[incompatible-type] - we know this is a HostInstance
+              target: event.currentTarget as HostInstance,
               targetRect: event.nativeEvent.targetRect,
               thresholdRect: event.nativeEvent.thresholdRect,
             });
@@ -124,6 +126,7 @@ function createVirtualView(
         initialHidden={initialHidden}
         nativeID={nativeID}
         ref={ref}
+        removeClippedSubviews={removeClippedSubviews}
         renderState={
           (isHidden
             ? VirtualViewRenderState.None

package/src/private/components/virtualview/VirtualViewNativeComponent.js

@@ -67,6 +67,12 @@ type VirtualViewNativeProps = $ReadOnly<{
    */
   initialHidden?: boolean,
 
+  /**
+   * This was needed to get VirtualViewManagerDelegate to set this property.
+   * TODO: Investigate why spread ViewProps doesn't call setter
+   */
+  removeClippedSubviews?: boolean,
+
   /**
    * Render state of children.
    *

package/src/private/devsupport/devmenu/elementinspector/Inspector.js

@@ -82,7 +82,7 @@ function Inspector({
     const {measure, props} = hierarchyItem.getInspectorData(findNodeHandle);
 
     measure((x, y, width, height, left, top) => {
-      // $FlowFixMe[incompatible-call] `props` from InspectorData are defined as <string, string> dictionary, which is incompatible with ViewStyleProp
+      // $FlowFixMe[incompatible-type] `props` from InspectorData are defined as <string, string> dictionary, which is incompatible with ViewStyleProp
       setInspectedElement({
         frame: {left, top, width, height},
         style: props.style,
@@ -119,7 +119,7 @@ function Inspector({
       );
       setSelectionIndex(selectedIndex);
       setElementsHierarchy(hierarchy);
-      // $FlowFixMe[incompatible-call] `props` from InspectorData are defined as <string, string> dictionary, which is incompatible with ViewStyleProp
+      // $FlowFixMe[incompatible-type] `props` from InspectorData are defined as <string, string> dictionary, which is incompatible with ViewStyleProp
       setInspectedElement({
         frame,
         style: props.style,

package/src/private/featureflags/ReactNativeFeatureFlags.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<24a5d3213cbc7cd101d34e059ba5c8c4>>
+ * @generated SignedSource<<f082e99b49f5206e95cf0ca3f92d2c1c>>
  * @flow strict
  * @noformat
  */
@@ -35,6 +35,7 @@ export type ReactNativeFeatureFlagsJsOnly = $ReadOnly<{
   enableAccessToHostTreeInFabric: Getter<boolean>,
   fixVirtualizeListCollapseWindowSize: Getter<boolean>,
   isLayoutAnimationEnabled: Getter<boolean>,
+  reduceDefaultPropsInImage: Getter<boolean>,
   reduceDefaultPropsInText: Getter<boolean>,
   shouldUseAnimatedObjectForTransform: Getter<boolean>,
   shouldUseRemoveClippedSubviewsAsDefaultOnIOS: Getter<boolean>,
@@ -66,7 +67,6 @@ export type ReactNativeFeatureFlags = $ReadOnly<{
   enableEagerRootViewAttachment: Getter<boolean>,
   enableFabricLogs: Getter<boolean>,
   enableFabricRenderer: Getter<boolean>,
-  enableFixForParentTagDuringReparenting: Getter<boolean>,
   enableFontScaleChangesUpdatingLayout: Getter<boolean>,
   enableIOSTextBaselineOffsetPerLine: Getter<boolean>,
   enableIOSViewClipToPaddingBox: Getter<boolean>,
@@ -139,7 +139,7 @@ export const deferFlatListFocusChangeRenderUpdate: Getter<boolean> = createJavaS
 /**
  * Enables access to the host tree in Fabric using DOM-compatible APIs.
  */
-export const enableAccessToHostTreeInFabric: Getter<boolean> = createJavaScriptFlagGetter('enableAccessToHostTreeInFabric', false);
+export const enableAccessToHostTreeInFabric: Getter<boolean> = createJavaScriptFlagGetter('enableAccessToHostTreeInFabric', true);
 
 /**
  * Fixing an edge case where the current window size is not properly calculated with fast scrolling. Window size collapsed to 1 element even if windowSize more than the current amount of elements
@@ -151,6 +151,11 @@ export const fixVirtualizeListCollapseWindowSize: Getter<boolean> = createJavaSc
  */
 export const isLayoutAnimationEnabled: Getter<boolean> = createJavaScriptFlagGetter('isLayoutAnimationEnabled', true);
 
+/**
+ * Optimize how default props are processed in Image to avoid unnecessary keys.
+ */
+export const reduceDefaultPropsInImage: Getter<boolean> = createJavaScriptFlagGetter('reduceDefaultPropsInImage', false);
+
 /**
  * Optimize how default props are processed in Text to avoid unnecessary keys.
  */
@@ -255,14 +260,10 @@ export const enableFabricLogs: Getter<boolean> = createNativeFlagGetter('enableF
  * Enables the use of the Fabric renderer in the whole app.
  */
 export const enableFabricRenderer: Getter<boolean> = createNativeFlagGetter('enableFabricRenderer', false);
-/**
- * This feature flag enables a fix for reparenting fix in differentiator
- */
-export const enableFixForParentTagDuringReparenting: Getter<boolean> = createNativeFlagGetter('enableFixForParentTagDuringReparenting', false);
 /**
  * Enables font scale changes updating layout for measurable nodes.
  */
-export const enableFontScaleChangesUpdatingLayout: Getter<boolean> = createNativeFlagGetter('enableFontScaleChangesUpdatingLayout', false);
+export const enableFontScaleChangesUpdatingLayout: Getter<boolean> = createNativeFlagGetter('enableFontScaleChangesUpdatingLayout', true);
 /**
  * Applies base offset for each line of text separately on iOS.
  */

package/src/private/featureflags/specs/NativeReactNativeFeatureFlags.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<4bd1c1bd236e9afa5b010f58683d5e67>>
+ * @generated SignedSource<<604963e3616f21f84b65b0291fecb182>>
  * @flow strict
  * @noformat
  */
@@ -45,7 +45,6 @@ export interface Spec extends TurboModule {
   +enableEagerRootViewAttachment?: () => boolean;
   +enableFabricLogs?: () => boolean;
   +enableFabricRenderer?: () => boolean;
-  +enableFixForParentTagDuringReparenting?: () => boolean;
   +enableFontScaleChangesUpdatingLayout?: () => boolean;
   +enableIOSTextBaselineOffsetPerLine?: () => boolean;
   +enableIOSViewClipToPaddingBox?: () => boolean;

package/src/private/renderer/errorhandling/ErrorHandlers.js

@@ -32,17 +32,17 @@ function getExtendedError(
   if (errorValue instanceof Error) {
     /* $FlowFixMe[class-object-subtyping] added when improving typing for
      * this parameters */
-    // $FlowFixMe[incompatible-cast]
+    // $FlowFixMe[incompatible-type]
     error = (errorValue: ExtendedError);
   } else if (typeof errorValue === 'string') {
     /* $FlowFixMe[class-object-subtyping] added when improving typing for
      * this parameters */
-    // $FlowFixMe[incompatible-cast]
+    // $FlowFixMe[incompatible-type]
     error = (new SyntheticError(errorValue): ExtendedError);
   } else {
     /* $FlowFixMe[class-object-subtyping] added when improving typing for
      * this parameters */
-    // $FlowFixMe[incompatible-cast]
+    // $FlowFixMe[incompatible-type]
     error = (new SyntheticError('Unspecified error'): ExtendedError);
   }
   try {

package/src/private/types/HostInstance.js

@@ -8,6 +8,9 @@
  * @format
  */
 
+// $FlowExpectedError[nonstrict-import] Making this module `strict-local` would require too many modules to revert back to `strict-local` as well.
+import type ReactNativeElement from '../webapis/dom/nodes/ReactNativeElement';
+
 export type MeasureOnSuccessCallback = (
   x: number,
   y: number,
@@ -105,7 +108,7 @@ export interface LegacyHostInstanceMethods {
   setNativeProps(nativeProps: {...}): void;
 }
 
-export type HostInstance = LegacyHostInstanceMethods;
+export type HostInstance = ReactNativeElement;
 
 /** @deprecated Use HostInstance instead */
 export type NativeMethods = LegacyHostInstanceMethods;

package/src/private/webapis/dom/nodes/ReactNativeDocument.js

@@ -14,9 +14,9 @@ import type {RootTag} from '../../../../../Libraries/ReactNative/RootTag';
 import type {ViewConfig} from '../../../../../Libraries/Renderer/shims/ReactNativeTypes';
 import type HTMLCollection from '../oldstylecollections/HTMLCollection';
 import type {ReactNativeDocumentInstanceHandle} from './internals/ReactNativeDocumentInstanceHandle';
-import type ReadOnlyElement from './ReadOnlyElement';
 
 import {createHTMLCollection} from '../oldstylecollections/HTMLCollection';
+import {getPublicInstanceFromInstanceHandle} from './internals/NodeInternals';
 import {
   createReactNativeDocumentElementInstanceHandle,
   setNativeElementReferenceForReactNativeDocumentElementInstanceHandle,
@@ -24,10 +24,12 @@ import {
 } from './internals/ReactNativeDocumentElementInstanceHandle';
 import {createReactNativeDocumentInstanceHandle} from './internals/ReactNativeDocumentInstanceHandle';
 import ReactNativeElement from './ReactNativeElement';
+import ReadOnlyElement from './ReadOnlyElement';
 import ReadOnlyNode from './ReadOnlyNode';
 import NativeDOM from './specs/NativeDOM';
 
 export default class ReactNativeDocument extends ReadOnlyNode {
+  _rootTag: RootTag;
   _documentElement: ReactNativeElement;
 
   constructor(
@@ -35,6 +37,7 @@ export default class ReactNativeDocument extends ReadOnlyNode {
     instanceHandle: ReactNativeDocumentInstanceHandle,
   ) {
     super(instanceHandle, null);
+    this._rootTag = rootTag;
     this._documentElement = createDocumentElement(rootTag, this);
   }
 
@@ -71,10 +74,27 @@ export default class ReactNativeDocument extends ReadOnlyNode {
     return null;
   }
 
-  // $FlowExpectedError[incompatible-extend] This is defined as returning string in Node, but it's actually null in Document.
+  // $FlowExpectedError[incompatible-type] This is defined as returning string in Node, but it's actually null in Document.
   get textContent(): null {
     return null;
   }
+
+  getElementById(id: string): ReadOnlyElement | null {
+    const elementByIdInstanceHandle = NativeDOM.getElementById(
+      this._rootTag,
+      id,
+    );
+
+    if (elementByIdInstanceHandle == null) {
+      return null;
+    }
+
+    const elementById = getPublicInstanceFromInstanceHandle(
+      elementByIdInstanceHandle,
+    );
+
+    return elementById instanceof ReadOnlyElement ? elementById : null;
+  }
 }
 
 function createDocumentElement(

package/src/private/webapis/dom/nodes/ReactNativeElement.js

@@ -233,7 +233,7 @@ function replaceConstructorWithoutSuper(
 
   ReactNativeElement.prototype = ReactNativeElementClass.prototype;
 
-  // $FlowExpectedError[incompatible-return]
+  // $FlowExpectedError[incompatible-type]
   return ReactNativeElement;
 }
 

package/src/private/webapis/dom/nodes/ReadOnlyElement.js

@@ -220,9 +220,11 @@ export default class ReadOnlyElement extends ReadOnlyNode {
 }
 
 function getChildElements(node: ReadOnlyNode): $ReadOnlyArray<ReadOnlyElement> {
-  // $FlowFixMe[incompatible-call]
-  return getChildNodes(node).filter(
-    childNode => childNode instanceof ReadOnlyElement,
+  // $FlowFixMe[incompatible-type]
+  return getChildNodes(
+    node,
+    (childNode: ReadOnlyNode) =>
+      childNode.nodeType === ReadOnlyNode.ELEMENT_NODE,
   );
 }
 

package/src/private/webapis/dom/nodes/ReadOnlyNode.js

@@ -118,7 +118,11 @@ export default class ReadOnlyNode {
   get parentElement(): ReadOnlyElement | null {
     const parentNode = this.parentNode;
 
-    if (parentNode instanceof getReadOnlyElementClass()) {
+    if (
+      parentNode != null &&
+      parentNode.nodeType === ReadOnlyNode.ELEMENT_NODE
+    ) {
+      // $FlowExpectedError[incompatible-type] parentNode is an instance of ReadOnlyElement as per the `nodeType` check
       return parentNode;
     }
 
@@ -292,6 +296,7 @@ setPlatformObject(ReadOnlyNode);
 
 export function getChildNodes(
   node: ReadOnlyNode,
+  filter?: (node: ReadOnlyNode) => boolean,
 ): $ReadOnlyArray<ReadOnlyNode> {
   const shadowNode = getNativeNodeReference(node);
 
@@ -300,9 +305,16 @@ export function getChildNodes(
   }
 
   const childNodeInstanceHandles = NativeDOM.getChildNodes(shadowNode);
-  return childNodeInstanceHandles
-    .map(instanceHandle => getPublicInstanceFromInstanceHandle(instanceHandle))
-    .filter(Boolean);
+  const childNodes = [];
+  for (const childNodeInstanceHandle of childNodeInstanceHandles) {
+    const childNode = getPublicInstanceFromInstanceHandle(
+      childNodeInstanceHandle,
+    );
+    if (childNode != null && (filter == null || filter(childNode))) {
+      childNodes.push(childNode);
+    }
+  }
+  return childNodes;
 }
 
 function getNodeSiblingsAndPosition(
@@ -323,12 +335,3 @@ function getNodeSiblingsAndPosition(
 
   return [siblings, position];
 }
-
-let ReadOnlyElementClass;
-function getReadOnlyElementClass(): Class<ReadOnlyElement> {
-  if (ReadOnlyElementClass == null) {
-    // We initialize this lazily to avoid a require cycle.
-    ReadOnlyElementClass = require('./ReadOnlyElement').default;
-  }
-  return ReadOnlyElementClass;
-}

package/src/private/webapis/dom/nodes/internals/NodeInternals.js

@@ -37,14 +37,30 @@ export type InstanceHandle =
   | ReactNativeDocumentElementInstanceHandle // root element managed by React Native
   | ReactNativeDocumentInstanceHandle; // document node managed by React Native
 
-let RendererProxy;
-function getRendererProxy() {
-  if (RendererProxy == null) {
+let cachedGetNodeFromInternalInstanceHandle;
+function getNodeFromInternalInstanceHandle(
+  instanceHandle: InternalInstanceHandle,
+) {
+  if (cachedGetNodeFromInternalInstanceHandle == null) {
     // Lazy import Fabric here to avoid DOM Node APIs classes from having side-effects.
     // With a static import we can't use these classes for Paper-only variants.
-    RendererProxy = require('../../../../../../Libraries/ReactNative/RendererProxy');
+    cachedGetNodeFromInternalInstanceHandle =
+      require('../../../../../../Libraries/ReactNative/RendererProxy').getNodeFromInternalInstanceHandle;
   }
-  return RendererProxy;
+  return cachedGetNodeFromInternalInstanceHandle(instanceHandle);
+}
+
+let cachedGetPublicInstanceFromInternalInstanceHandle;
+function getPublicInstanceFromInternalInstanceHandle(
+  instanceHandle: InternalInstanceHandle,
+) {
+  if (cachedGetPublicInstanceFromInternalInstanceHandle == null) {
+    // Lazy import Fabric here to avoid DOM Node APIs classes from having side-effects.
+    // With a static import we can't use these classes for Paper-only variants.
+    cachedGetPublicInstanceFromInternalInstanceHandle =
+      require('../../../../../../Libraries/ReactNative/RendererProxy').getPublicInstanceFromInternalInstanceHandle;
+  }
+  return cachedGetPublicInstanceFromInternalInstanceHandle(instanceHandle);
 }
 
 const INSTANCE_HANDLE_KEY = Symbol('internalInstanceHandle');
@@ -81,6 +97,15 @@ export function setOwnerDocument(
 export function getPublicInstanceFromInstanceHandle(
   instanceHandle: InstanceHandle,
 ): ?ReadOnlyNode {
+  const mixedPublicInstance =
+    // $FlowExpectedError[incompatible-type]
+    getPublicInstanceFromInternalInstanceHandle(instanceHandle);
+
+  if (mixedPublicInstance != null) {
+    // $FlowExpectedError[incompatible-type] React defines public instances as "mixed" because it can't access the definition from React Native.
+    return mixedPublicInstance;
+  }
+
   if (isReactNativeDocumentInstanceHandle(instanceHandle)) {
     return getPublicInstanceFromReactNativeDocumentInstanceHandle(
       instanceHandle,
@@ -92,14 +117,6 @@ export function getPublicInstanceFromInstanceHandle(
       instanceHandle,
     );
   }
-
-  const mixedPublicInstance =
-    getRendererProxy().getPublicInstanceFromInternalInstanceHandle(
-      instanceHandle,
-    );
-
-  // $FlowExpectedError[incompatible-return] React defines public instances as "mixed" because it can't access the definition from React Native.
-  return mixedPublicInstance;
 }
 
 export function getNativeNodeReference(
@@ -107,6 +124,15 @@ export function getNativeNodeReference(
 ): ?NativeNodeReference {
   const instanceHandle = getInstanceHandle(node);
 
+  // Try React nodes first
+  const nativeReference =
+    // $FlowExpectedError[incompatible-type]
+    getNodeFromInternalInstanceHandle(instanceHandle);
+  if (nativeReference != null) {
+    // $FlowExpectedError[incompatible-type]
+    return nativeReference;
+  }
+
   if (isReactNativeDocumentInstanceHandle(instanceHandle)) {
     return getNativeNodeReferenceFromReactNativeDocumentInstanceHandle(
       instanceHandle,
@@ -118,15 +144,12 @@ export function getNativeNodeReference(
       instanceHandle,
     );
   }
-
-  // $FlowExpectedError[incompatible-return]
-  return getRendererProxy().getNodeFromInternalInstanceHandle(instanceHandle);
 }
 
 export function getNativeElementReference(
   node: ReadOnlyElement,
 ): ?NativeElementReference {
-  // $FlowExpectedError[incompatible-cast] We know ReadOnlyElement instances provide InternalInstanceHandle
+  // $FlowExpectedError[incompatible-type] We know ReadOnlyElement instances provide InternalInstanceHandle
   const instanceHandle = getInstanceHandle(node) as InternalInstanceHandle;
 
   if (isReactNativeDocumentElementInstanceHandle(instanceHandle)) {
@@ -135,16 +158,16 @@ export function getNativeElementReference(
     );
   }
 
-  // $FlowExpectedError[incompatible-return]
-  return getRendererProxy().getNodeFromInternalInstanceHandle(instanceHandle);
+  // $FlowExpectedError[incompatible-type]
+  return getNodeFromInternalInstanceHandle(instanceHandle);
 }
 
 export function getNativeTextReference(
   node: ReadOnlyCharacterData,
 ): ?NativeTextReference {
-  // $FlowExpectedError[incompatible-cast] We know ReadOnlyText instances provide InternalInstanceHandle
+  // $FlowExpectedError[incompatible-type] We know ReadOnlyText instances provide InternalInstanceHandle
   const instanceHandle = getInstanceHandle(node) as InternalInstanceHandle;
 
-  // $FlowExpectedError[incompatible-return]
-  return getRendererProxy().getNodeFromInternalInstanceHandle(instanceHandle);
+  // $FlowExpectedError[incompatible-type]
+  return getNodeFromInternalInstanceHandle(instanceHandle);
 }

package/src/private/webapis/dom/nodes/internals/ReactNativeDocumentInstanceHandle.js

@@ -31,7 +31,7 @@ export function getNativeNodeReferenceFromReactNativeDocumentInstanceHandle(
 export function getPublicInstanceFromReactNativeDocumentInstanceHandle(
   instanceHandle: ReactNativeDocumentInstanceHandle,
 ): ?ReactNativeDocument {
-  // $FlowExpectedError[incompatible-return] React defines public instances as "mixed" because it can't access the definition from React Native.
+  // $FlowExpectedError[incompatible-type] React defines public instances as "mixed" because it can't access the definition from React Native.
   return RendererProxy.getPublicInstanceFromRootTag(Number(instanceHandle));
 }