@office-iss/react-native-win32 0.82.0 → 0.83.0-preview.0

package/Libraries/Lists/FlatList.js

@@ -13,8 +13,8 @@ import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {
   ListRenderItem,
   ListRenderItemInfo,
+  ListViewToken,
   ViewabilityConfigCallbackPair,
-  ViewToken,
   VirtualizedListProps,
 } from '@react-native/virtualized-lists';
 
@@ -573,7 +573,7 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
     return keyExtractor(items, index);
   };
 
-  _pushMultiColumnViewable(arr: Array<ViewToken>, v: ViewToken): void {
+  _pushMultiColumnViewable(arr: Array<ListViewToken>, v: ListViewToken): void {
     const numColumns = numColumnsOrDefault(this.props.numColumns);
     const keyExtractor = this.props.keyExtractor ?? defaultKeyExtractor;
     v.item.forEach((item, ii) => {
@@ -585,22 +585,22 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
 
   _createOnViewableItemsChanged(
     onViewableItemsChanged: ?(info: {
-      viewableItems: Array<ViewToken>,
-      changed: Array<ViewToken>,
+      viewableItems: Array<ListViewToken>,
+      changed: Array<ListViewToken>,
       ...
     }) => void,
     // $FlowFixMe[missing-local-annot]
   ) {
     return (info: {
-      viewableItems: Array<ViewToken>,
-      changed: Array<ViewToken>,
+      viewableItems: Array<ListViewToken>,
+      changed: Array<ListViewToken>,
       ...
     }) => {
       const numColumns = numColumnsOrDefault(this.props.numColumns);
       if (onViewableItemsChanged) {
         if (numColumns > 1) {
-          const changed: Array<ViewToken> = [];
-          const viewableItems: Array<ViewToken> = [];
+          const changed: Array<ListViewToken> = [];
+          const viewableItems: Array<ListViewToken> = [];
           info.viewableItems.forEach(v =>
             this._pushMultiColumnViewable(viewableItems, v),
           );

package/Libraries/Lists/SectionList.d.ts

@@ -35,7 +35,11 @@ export interface SectionBase<ItemT, SectionT = DefaultSectionT> {
 
   renderItem?: SectionListRenderItem<ItemT, SectionT> | undefined;
 
-  ItemSeparatorComponent?: React.ComponentType<any> | null | undefined;
+  ItemSeparatorComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement
+    | null
+    | undefined;
 
   keyExtractor?: ((item: ItemT, index: number) => string) | undefined;
 }

package/Libraries/Lists/ViewabilityHelper.js

@@ -11,7 +11,7 @@
 'use strict';
 
 export type {
-  ViewToken,
+  ListViewToken as ViewToken,
   ViewabilityConfig,
   ViewabilityConfigCallbackPair,
 } from '@react-native/virtualized-lists';

package/Libraries/Lists/VirtualizedList.js

@@ -19,6 +19,7 @@ const VirtualizedListComponent: VirtualizedListType =
 export type {
   ListRenderItemInfo,
   ListRenderItem,
+  ListViewToken,
   Separators,
   VirtualizedListProps,
 } from '@react-native/virtualized-lists';

package/Libraries/LogBox/UI/AnsiHighlight.js

@@ -87,7 +87,7 @@ export default function Ansi({
     <View style={styles.container}>
       {parsedLines.map((items, i) => (
         <View style={styles.line} key={i}>
-          <Text>
+          <Text style={styles.text}>
             {items.map((bundle, key) => {
               const textStyle =
                 bundle.fg && COLORS[bundle.fg]
@@ -122,4 +122,7 @@ const styles = StyleSheet.create({
   line: {
     flexDirection: 'row',
   },
+  text: {
+    flexGrow: 1,
+  },
 });

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -179,8 +179,17 @@ const validAttributesForNonEventProps = {
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   transform: true,
   transformOrigin: true,
-  experimental_backgroundImage: {
-    process: require('../StyleSheet/processBackgroundImage').default,
+  experimental_backgroundImage: ReactNativeFeatureFlags.enableNativeCSSParsing()
+    ? (true as const)
+    : {process: require('../StyleSheet/processBackgroundImage').default},
+  experimental_backgroundSize: {
+    process: require('../StyleSheet/processBackgroundSize').default,
+  },
+  experimental_backgroundPosition: {
+    process: require('../StyleSheet/processBackgroundPosition').default,
+  },
+  experimental_backgroundRepeat: {
+    process: require('../StyleSheet/processBackgroundRepeat').default,
   },
   boxShadow: ReactNativeFeatureFlags.enableNativeCSSParsing()
     ? (true as const)

package/Libraries/NativeComponent/NativeComponentRegistry.d.ts

@@ -0,0 +1,98 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import type {HostComponent} from '../../types/public/ReactNativeTypes';
+import * as React from 'react';
+
+/**
+ * Configures a function that is called to determine whether a given component
+ * should be registered using reflection of the native component at runtime.
+ *
+ * The provider should return null if the native component is unavailable in
+ * the current environment.
+ */
+export function setRuntimeConfigProvider(
+  runtimeConfigProvider: (name: string) => {
+    native: boolean;
+    verify: boolean;
+  } | null,
+): void;
+
+/**
+ * Gets a `NativeComponent` that can be rendered by React Native.
+ *
+ * The supplied `viewConfigProvider` may or may not be invoked and utilized,
+ * depending on how `setRuntimeConfigProvider` is configured.
+ */
+export function get<Config extends object>(
+  name: string,
+  viewConfigProvider: () => PartialViewConfig,
+): HostComponent<Config>;
+
+/**
+ * Same as `NativeComponentRegistry.get(...)`, except this will check either
+ * the `setRuntimeConfigProvider` configuration or use native reflection (slow)
+ * to determine whether this native component is available.
+ *
+ * If the native component is not available, a stub component is returned. Note
+ * that the return value of this is not `HostComponent` because the returned
+ * component instance is not guaranteed to have native methods.
+ */
+export function getWithFallback_DEPRECATED<Config extends object>(
+  name: string,
+  viewConfigProvider: () => PartialViewConfig,
+): React.ComponentType<Config>;
+
+/**
+ * Unstable API. Do not use!
+ *
+ * This method returns if there is a StaticViewConfig registered for the
+ * component name received as a parameter.
+ */
+export function unstable_hasStaticViewConfig(name: string): boolean;
+
+type AttributeType<T, V> =
+  | true
+  | {
+      readonly diff?: ((arg1: T, arg2: T) => boolean) | undefined;
+      readonly process?: ((arg1: V) => T) | undefined;
+    };
+type AnyAttributeType = AttributeType<any, any>;
+type AttributeConfiguration = {
+  readonly [propName: string]: AnyAttributeType | void;
+  readonly style?:
+    | {
+        readonly [propName: string]: AnyAttributeType;
+      }
+    | undefined;
+};
+
+type PartialViewConfig = Readonly<{
+  bubblingEventTypes?:
+    | {
+        readonly [eventName: string]: {
+          readonly phasedRegistrationNames: {
+            readonly bubbled: string;
+            readonly captured: string;
+            readonly skipBubbling?: boolean | undefined;
+          };
+        };
+      }
+    | undefined;
+  directEventTypes?:
+    | {
+        readonly [eventName: string]: {
+          readonly registrationName: string;
+        };
+      }
+    | undefined;
+  supportsRawText?: boolean | undefined;
+  uiViewClassName: string;
+  validAttributes?: AttributeConfiguration | undefined;
+}>;

package/Libraries/NativeComponent/NativeComponentRegistry.js

@@ -129,11 +129,13 @@ export function getWithFallback_DEPRECATED<Config: {...}>(
     // `getRuntimeConfig == null` when static view configs are disabled
     // If `setRuntimeConfigProvider` is not configured, use native reflection.
     if (hasNativeViewConfig(name)) {
+      /* $FlowFixMe[incompatible-type] Extra ref prop */
       return get<Config>(name, viewConfigProvider);
     }
   } else {
     // If there is no runtime config, then the native component is unavailable.
     if (getRuntimeConfig(name) != null) {
+      /* $FlowFixMe[incompatible-type] Extra ref prop */
       return get<Config>(name, viewConfigProvider);
     }
   }

package/Libraries/NativeComponent/NativeComponentRegistryUnstable.js

@@ -23,7 +23,9 @@ export function unstable_hasComponent(name: string): boolean {
       hasNativeComponent = global.__nativeComponentRegistry__hasComponent(name);
       componentNameToExists.set(name, hasNativeComponent);
     } else {
-      throw `unstable_hasComponent('${name}'): Global function is not registered`;
+      throw new Error(
+        `unstable_hasComponent('${name}'): Global function is not registered`,
+      );
     }
   }
   return hasNativeComponent;

package/Libraries/Network/RCTNetworking.android.js

@@ -77,12 +77,14 @@ const RCTNetworking = {
       }));
     }
     const requestId = generateRequestId();
+    const devToolsRequestId =
+      global.__NETWORK_REPORTER__?.createDevToolsRequestId();
     NativeNetworkingAndroid.sendRequest(
       method,
       url,
       requestId,
       convertHeadersMapToArray(headers),
-      {...body, trackingName},
+      {...body, trackingName, devToolsRequestId},
       responseType,
       incrementalUpdates,
       timeout,

package/Libraries/Network/RCTNetworking.ios.js

@@ -40,6 +40,8 @@ const RCTNetworking = {
     withCredentials: boolean,
   ) {
     const body = convertRequestBody(data);
+    const devToolsRequestId =
+      global.__NETWORK_REPORTER__?.createDevToolsRequestId();
     NativeNetworkingIOS.sendRequest(
       {
         method,
@@ -50,6 +52,7 @@ const RCTNetworking = {
         incrementalUpdates,
         timeout,
         withCredentials,
+        unstable_devToolsRequestId: devToolsRequestId,
       },
       callback,
     );

package/Libraries/Network/RCTNetworking.win32.js

@@ -40,6 +40,8 @@ const RCTNetworking = {
     withCredentials: boolean,
   ) {
     const body = convertRequestBody(data);
+    const devToolsRequestId =
+      global.__NETWORK_REPORTER__?.createDevToolsRequestId();
     NativeNetworkingIOS.sendRequest(
       {
         method,
@@ -50,6 +52,7 @@ const RCTNetworking = {
         incrementalUpdates,
         timeout,
         withCredentials,
+        unstable_devToolsRequestId: devToolsRequestId,
       },
       callback,
     );

package/Libraries/Network/XMLHttpRequest.js

@@ -14,7 +14,6 @@ import type {
   EventCallback,
   EventListener,
 } from '../../src/private/webapis/dom/events/EventTarget';
-import type Performance from '../../src/private/webapis/performance/Performance';
 import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
 
 import Event from '../../src/private/webapis/dom/events/Event';
@@ -34,13 +33,7 @@ const RCTNetworking = require('./RCTNetworking').default;
 const base64 = require('base64-js');
 const invariant = require('invariant');
 
-const PERFORMANCE_TRACK_NAME = 'Network (JS-initiated only)';
-const PERFORMANCE_TRACK_GROUP = 'Chrome DevTools Temp Compat';
-
-declare var performance: Performance;
-
 const DEBUG_NETWORK_SEND_DELAY: false = false; // Set to a number of milliseconds when debugging
-const LABEL_FOR_MISSING_URL_FOR_PROFILING = 'Unknown URL';
 
 export type NativeResponseType = 'base64' | 'blob' | 'text';
 export type ResponseType =
@@ -141,7 +134,6 @@ class XMLHttpRequest extends EventTarget {
   static DONE: number = DONE;
 
   static _interceptor: ?XHRInterceptor = null;
-  static _profiling: boolean = false;
 
   UNSENT: number = UNSENT;
   OPENED: number = OPENED;
@@ -182,10 +174,6 @@ class XMLHttpRequest extends EventTarget {
     XMLHttpRequest._interceptor = interceptor;
   }
 
-  static enableProfiling(enableProfiling: boolean): void {
-    XMLHttpRequest._profiling = enableProfiling;
-  }
-
   constructor() {
     super();
     this._reset();
@@ -389,23 +377,12 @@ class XMLHttpRequest extends EventTarget {
       return;
     }
 
-    const start = XMLHttpRequest._profiling ? performance.now() : undefined;
-
     if (!this._response) {
       this._response = responseText;
     } else {
       this._response += responseText;
     }
 
-    if (XMLHttpRequest._profiling) {
-      console.timeStamp(
-        'Incremental Data: ' + this._getMeasureURL(),
-        start,
-        undefined,
-        PERFORMANCE_TRACK_NAME,
-        PERFORMANCE_TRACK_GROUP,
-      );
-    }
     XMLHttpRequest._interceptor &&
       XMLHttpRequest._interceptor.dataReceived(requestId, responseText);
 
@@ -450,16 +427,7 @@ class XMLHttpRequest extends EventTarget {
       this._clearSubscriptions();
       this._requestId = null;
       this.setReadyState(this.DONE);
-      if (XMLHttpRequest._profiling && this._startTime != null) {
-        const start = this._startTime;
-        console.timeStamp(
-          this._getMeasureURL(),
-          start,
-          undefined,
-          PERFORMANCE_TRACK_NAME,
-          PERFORMANCE_TRACK_GROUP,
-        );
-      }
+
       if (error) {
         XMLHttpRequest._interceptor &&
           XMLHttpRequest._interceptor.loadingFailed(requestId, error);
@@ -649,8 +617,6 @@ class XMLHttpRequest extends EventTarget {
         this._url,
         this._headers,
         data,
-        /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
-         * when making Flow check .android.js files. */
         nativeResponseType,
         incrementalEvents,
         this.timeout,
@@ -731,12 +697,6 @@ class XMLHttpRequest extends EventTarget {
     super.addEventListener(type, listener);
   }
 
-  _getMeasureURL(): string {
-    return (
-      this._trackingName ?? this._url ?? LABEL_FOR_MISSING_URL_FOR_PROFILING
-    );
-  }
-
   /*
    * `on<event>` event handling (without JS prototype magic).
    */

package/Libraries/Pressability/Pressability.win32.js

@@ -603,9 +603,9 @@ export default class Pressability {
           this._isKeyDown
         ) {
           const {onPressOut, onPress} = this._config;
-          // $FlowFixMe: PressEvents don't mesh with keyboarding APIs. Keep legacy behavior of passing KeyEvents instead
+          // $FlowFixMe[incompatible-type] PressEvents don't mesh with keyboarding APIs. Keep legacy behavior of passing KeyEvents instead
           onPressOut && onPressOut(event);
-          // $FlowFixMe: PressEvents don't mesh with keyboarding APIs. Keep legacy behavior of passing KeyEvents instead
+          // $FlowFixMe[incompatible-type] PressEvents don't mesh with keyboarding APIs. Keep legacy behavior of passing KeyEvents instead
           onPress && onPress(event);
         }
         // Native windows app clears the key pressed state when another key press interrupts the current
@@ -623,7 +623,7 @@ export default class Pressability {
         ) {
           const {onPressIn} = this._config;
           this._isKeyDown = true;
-          // $FlowFixMe: PressEvents don't mesh with keyboarding APIs. Keep legacy behavior of passing KeyEvents instead
+          // $FlowFixMe[incompatible-type] PressEvents don't mesh with keyboarding APIs. Keep legacy behavior of passing KeyEvents instead
           onPressIn && onPressIn(event);
         }
       },
@@ -788,8 +788,8 @@ export default class Pressability {
   }
 
   // [Win32]
-  // $FlowFixMe - button typing
-  _isDefaultPressButton(button): boolean {
+  // $FlowFixMe[unclear-type] - button typing
+  _isDefaultPressButton(button: any): boolean {
     return !button; // Treat 0 or undefined as default press
   }
 

package/Libraries/Pressability/usePressability.js

@@ -8,15 +8,26 @@
  * @format
  */
 
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import Pressability, {
   type EventHandlers,
   type PressabilityConfig,
 } from './Pressability';
-import {useEffect, useRef} from 'react';
+import {useEffect, useInsertionEffect, useRef} from 'react';
 
 declare function usePressability(config: PressabilityConfig): EventHandlers;
 declare function usePressability(config: null | void): null | EventHandlers;
 
+// Experiments with using `useInsertionEffect` instead of `useEffect`, which
+// changes whether `Pressability` is configured or reset when inm a hidden
+// Activity. With `useInsertionEffect`, `Pressability` behaves more like a
+// platform control (e.g. Pointer Events), especially with respect to events
+// like focus and blur.
+const useConfigurationEffect =
+  ReactNativeFeatureFlags.configurePressabilityDuringInsertion()
+    ? useInsertionEffect
+    : useEffect;
+
 /**
  * Creates a persistent instance of `Pressability` that automatically configures
  * itself and resets. Accepts null `config` to support lazy initialization. Once
@@ -40,7 +51,7 @@ export default function usePressability(
 
   // On the initial mount, this is a no-op. On updates, `pressability` will be
   // re-configured to use the new configuration.
-  useEffect(() => {
+  useConfigurationEffect(() => {
     if (config != null && pressability != null) {
       pressability.configure(config);
     }
@@ -48,7 +59,7 @@ export default function usePressability(
 
   // On unmount, reset pending state and timers inside `pressability`. This is
   // a separate effect because we do not want to reset when `config` changes.
-  useEffect(() => {
+  useConfigurationEffect(() => {
     if (pressability != null) {
       return () => {
         pressability.reset();

package/Libraries/ReactNative/PaperUIManager.win32.js

@@ -101,22 +101,22 @@ const UIManagerJS: UIManagerJSInterface = {
 for (const propName of Object.getOwnPropertyNames(
   Object.getPrototypeOf(NativeUIManager),
 )) {
-  // $FlowFixMe
+  // $FlowFixMe[incompatible-type]
   UIManagerJS[propName] = NativeUIManager[propName];
 }
 // Windows]
 
-/* $FlowFixMe(>=0.123.0 site=react_native_fb) This comment suppresses an error
+/* $FlowFixMe[cannot-write] (>=0.123.0 site=react_native_fb) This comment suppresses an error
  * found when Flow v0.123.0 was deployed. To see the error, delete this comment
  * and run Flow. */
 //const UIManagerJS = {
 //  ...NativeUIManager,
-// $FlowFixMe
+// $FlowFixMe[cannot-write]
 UIManagerJS.getConstants = getConstants;
 //  },
-// $FlowFixMe
+// $FlowFixMe[cannot-write]
 UIManagerJS.getViewManagerConfig = getViewManagerConfig;
-// $FlowFixMe
+// $FlowFixMe[cannot-write]
 UIManagerJS.hasViewManagerConfig = (viewManagerName: string) =>
   getViewManagerConfig(viewManagerName) != null;
 
@@ -130,7 +130,7 @@ UIManagerJS.hasViewManagerConfig = (viewManagerName: string) =>
 //            getViewManagerConfig is implemented on the JSI object, so we don't
 //            need to hook this unless we are running in webdebugger
 if (!global.nativeCallSyncHook)
-  // $FlowFixMe
+  // $FlowFixMe[prop-missing]
   NativeUIManager.getViewManagerConfig = UIManagerJS.getViewManagerConfig;
 
 function lazifyViewManagerConfig(viewName: string) {
@@ -199,7 +199,7 @@ if (!global.nativeCallSyncHook) {
             `Accessing view manager configs directly off UIManager via UIManager['${viewManagerName}'] ` +
               `is no longer supported. Use UIManager.getViewManagerConfig('${viewManagerName}') instead.`,
           );
-          // $FlowFixMe
+          // $FlowFixMe[incompatible-return]
           return UIManagerJS.getViewManagerConfig(viewManagerName);
         },
       });

package/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance.js

@@ -13,124 +13,62 @@
  * instances and get some data from them (like their instance handle / fiber).
  */
 
-import type ReactNativeDocumentT from '../../../src/private/webapis/dom/nodes/ReactNativeDocument';
-import typeof * as ReactNativeDocumentModuleT from '../../../src/private/webapis/dom/nodes/ReactNativeDocument';
-import type ReactNativeElementT from '../../../src/private/webapis/dom/nodes/ReactNativeElement';
-import type ReadOnlyTextT from '../../../src/private/webapis/dom/nodes/ReadOnlyText';
-import typeof * as RendererProxyT from '../../ReactNative/RendererProxy';
 import type {
   InternalInstanceHandle,
   Node,
   ViewConfig,
 } from '../../Renderer/shims/ReactNativeTypes';
 import type {RootTag} from '../RootTag';
-import type ReactFabricHostComponentT from './ReactFabricHostComponent';
 
-import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
+import ReactNativeDocument, {
+  createReactNativeDocument,
+} from '../../../src/private/webapis/dom/nodes/ReactNativeDocument';
+import ReactNativeElement from '../../../src/private/webapis/dom/nodes/ReactNativeElement';
+import ReadOnlyText from '../../../src/private/webapis/dom/nodes/ReadOnlyText';
+import * as RendererProxy from '../../ReactNative/RendererProxy';
 
 export opaque type PublicRootInstance = mixed;
 
-// Lazy loaded to avoid evaluating the module when using the legacy renderer.
-let ReactNativeDocumentModuleObject: ?ReactNativeDocumentModuleT;
-let ReactFabricHostComponentClass: Class<ReactFabricHostComponentT>;
-let ReactNativeElementClass: Class<ReactNativeElementT>;
-let ReadOnlyTextClass: Class<ReadOnlyTextT>;
-let RendererProxy: RendererProxyT;
-
-function getReactNativeDocumentModule(): ReactNativeDocumentModuleT {
-  if (ReactNativeDocumentModuleObject == null) {
-    // We initialize this lazily to avoid a require cycle.
-    ReactNativeDocumentModuleObject = require('../../../src/private/webapis/dom/nodes/ReactNativeDocument');
-  }
-
-  return ReactNativeDocumentModuleObject;
-}
-
-function getReactNativeElementClass(): Class<ReactNativeElementT> {
-  if (ReactNativeElementClass == null) {
-    ReactNativeElementClass =
-      require('../../../src/private/webapis/dom/nodes/ReactNativeElement').default;
-  }
-  return ReactNativeElementClass;
-}
-
-function getReactFabricHostComponentClass(): Class<ReactFabricHostComponentT> {
-  if (ReactFabricHostComponentClass == null) {
-    ReactFabricHostComponentClass =
-      require('./ReactFabricHostComponent').default;
-  }
-  return ReactFabricHostComponentClass;
-}
-
-function getReadOnlyTextClass(): Class<ReadOnlyTextT> {
-  if (ReadOnlyTextClass == null) {
-    ReadOnlyTextClass =
-      require('../../../src/private/webapis/dom/nodes/ReadOnlyText').default;
-  }
-  return ReadOnlyTextClass;
-}
-
 export function createPublicRootInstance(rootTag: RootTag): PublicRootInstance {
-  if (ReactNativeFeatureFlags.enableAccessToHostTreeInFabric()) {
-    const ReactNativeDocumentModule = getReactNativeDocumentModule();
-
-    // $FlowExpectedError[incompatible-return]
-    return ReactNativeDocumentModule.createReactNativeDocument(rootTag);
-  }
-
   // $FlowExpectedError[incompatible-return]
-  return null;
+  return createReactNativeDocument(rootTag);
 }
 
 export function createPublicInstance(
   tag: number,
   viewConfig: ViewConfig,
   internalInstanceHandle: InternalInstanceHandle,
-  ownerDocument: ReactNativeDocumentT,
-): ReactFabricHostComponentT | ReactNativeElementT {
-  if (ReactNativeFeatureFlags.enableAccessToHostTreeInFabric()) {
-    const ReactNativeElement = getReactNativeElementClass();
-    return new ReactNativeElement(
-      tag,
-      viewConfig,
-      internalInstanceHandle,
-      ownerDocument,
-    );
-  } else {
-    const ReactFabricHostComponent = getReactFabricHostComponentClass();
-    return new ReactFabricHostComponent(
-      tag,
-      viewConfig,
-      internalInstanceHandle,
-    );
-  }
+  ownerDocument: ReactNativeDocument,
+): ReactNativeElement {
+  return new ReactNativeElement(
+    tag,
+    viewConfig,
+    internalInstanceHandle,
+    ownerDocument,
+  );
 }
 
 export function createPublicTextInstance(
   internalInstanceHandle: InternalInstanceHandle,
-  ownerDocument: ReactNativeDocumentT,
-): ReadOnlyTextT {
-  const ReadOnlyText = getReadOnlyTextClass();
+  ownerDocument: ReactNativeDocument,
+): ReadOnlyText {
   return new ReadOnlyText(internalInstanceHandle, ownerDocument);
 }
 
 export function getNativeTagFromPublicInstance(
-  publicInstance: ReactFabricHostComponentT | ReactNativeElementT,
+  publicInstance: ReactNativeElement,
 ): number {
   return publicInstance.__nativeTag;
 }
 
 export function getNodeFromPublicInstance(
-  publicInstance: ReactFabricHostComponentT | ReactNativeElementT,
+  publicInstance: ReactNativeElement,
 ): ?Node {
   // Avoid loading ReactFabric if using an instance from the legacy renderer.
   if (publicInstance.__internalInstanceHandle == null) {
     return null;
   }
 
-  if (RendererProxy == null) {
-    RendererProxy = require('../../ReactNative/RendererProxy');
-  }
   return RendererProxy.getNodeFromInternalInstanceHandle(
     // $FlowExpectedError[incompatible-type] __internalInstanceHandle is always an InternalInstanceHandle from React when we get here.
     publicInstance.__internalInstanceHandle,
@@ -138,7 +76,7 @@ export function getNodeFromPublicInstance(
 }
 
 export function getInternalInstanceHandleFromPublicInstance(
-  publicInstance: ReactFabricHostComponentT | ReactNativeElementT,
+  publicInstance: ReactNativeElement,
 ): InternalInstanceHandle {
   // TODO(T174762768): Remove this once OSS versions of renderers will be synced.
   // $FlowExpectedError[prop-missing] Keeping this for backwards-compatibility with the renderers versions in open source.