react-native-windows 0.77.0 → 0.78.0-preview.2

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<<aa51de14d1f085127ad410580beb15f6>>
+ * @generated SignedSource<<3037cf1c938dae492b656333cec9633c>>
  * @flow strict
  */
 
@@ -26,7 +26,7 @@ import {
   setOverrides,
 } from './ReactNativeFeatureFlagsBase';
 
-export type ReactNativeFeatureFlagsJsOnly = {
+export type ReactNativeFeatureFlagsJsOnly = $ReadOnly<{
   jsOnlyTestFlag: Getter<boolean>,
   animatedShouldDebounceQueueFlush: Getter<boolean>,
   animatedShouldUseSingleOp: Getter<boolean>,
@@ -36,6 +36,7 @@ export type ReactNativeFeatureFlagsJsOnly = {
   enableAnimatedAllowlist: Getter<boolean>,
   enableAnimatedClearImmediateFix: Getter<boolean>,
   enableAnimatedPropsMemo: Getter<boolean>,
+  fixVirtualizeListCollapseWindowSize: Getter<boolean>,
   isLayoutAnimationEnabled: Getter<boolean>,
   shouldSkipStateUpdatesForLoopingAnimations: Getter<boolean>,
   shouldUseAnimatedObjectForTransform: Getter<boolean>,
@@ -43,19 +44,18 @@ export type ReactNativeFeatureFlagsJsOnly = {
   shouldUseSetNativePropsInFabric: Getter<boolean>,
   useInsertionEffectsForAnimations: Getter<boolean>,
   useRefsForTextInputState: Getter<boolean>,
-};
+}>;
 
 export type ReactNativeFeatureFlagsJsOnlyOverrides = OverridesFor<ReactNativeFeatureFlagsJsOnly>;
 
-export type ReactNativeFeatureFlags = {
+export type ReactNativeFeatureFlags = $ReadOnly<{
   ...ReactNativeFeatureFlagsJsOnly,
   commonTestFlag: Getter<boolean>,
   commonTestFlagWithoutNativeImplementation: Getter<boolean>,
   completeReactInstanceCreationOnBgThreadOnAndroid: Getter<boolean>,
   disableEventLoopOnBridgeless: Getter<boolean>,
   disableMountItemReorderingAndroid: Getter<boolean>,
-  enableAlignItemsBaselineOnFabricIOS: Getter<boolean>,
-  enableAndroidLineHeightCentering: Getter<boolean>,
+  enableAccumulatedUpdatesInRawPropsAndroid: Getter<boolean>,
   enableBridgelessArchitecture: Getter<boolean>,
   enableCppPropsIteratorSetter: Getter<boolean>,
   enableDeletionOfUnmountedViews: Getter<boolean>,
@@ -63,10 +63,10 @@ export type ReactNativeFeatureFlags = {
   enableEventEmitterRetentionDuringGesturesOnAndroid: Getter<boolean>,
   enableFabricLogs: Getter<boolean>,
   enableFabricRenderer: Getter<boolean>,
-  enableFabricRendererExclusively: Getter<boolean>,
   enableFixForViewCommandRace: Getter<boolean>,
   enableGranularShadowTreeStateReconciliation: Getter<boolean>,
   enableIOSViewClipToPaddingBox: Getter<boolean>,
+  enableImagePrefetchingAndroid: Getter<boolean>,
   enableLayoutAnimationsOnAndroid: Getter<boolean>,
   enableLayoutAnimationsOnIOS: Getter<boolean>,
   enableLongTaskAPI: Getter<boolean>,
@@ -78,9 +78,9 @@ export type ReactNativeFeatureFlags = {
   enableUIConsistency: Getter<boolean>,
   enableViewRecycling: Getter<boolean>,
   excludeYogaFromRawProps: Getter<boolean>,
+  fixDifferentiatorEmittingUpdatesWithWrongParentTag: Getter<boolean>,
   fixMappingOfEventPrioritiesBetweenFabricAndReact: Getter<boolean>,
   fixMountingCoordinatorReportedPendingTransactionsOnAndroid: Getter<boolean>,
-  fuseboxEnabledDebug: Getter<boolean>,
   fuseboxEnabledRelease: Getter<boolean>,
   initEagerTurboModulesOnNativeModulesQueueAndroid: Getter<boolean>,
   lazyAnimationCallbacks: Getter<boolean>,
@@ -92,10 +92,11 @@ export type ReactNativeFeatureFlags = {
   useNativeViewConfigsInBridgelessMode: Getter<boolean>,
   useOptimisedViewPreallocationOnAndroid: Getter<boolean>,
   useOptimizedEventBatchingOnAndroid: Getter<boolean>,
+  useRawPropsJsiValue: Getter<boolean>,
   useRuntimeShadowNodeReferenceUpdate: Getter<boolean>,
   useTurboModuleInterop: Getter<boolean>,
   useTurboModules: Getter<boolean>,
-}
+}>;
 
 /**
  * JS-only flag for testing. Do NOT modify.
@@ -142,6 +143,11 @@ export const enableAnimatedClearImmediateFix: Getter<boolean> = createJavaScript
  */
 export const enableAnimatedPropsMemo: Getter<boolean> = createJavaScriptFlagGetter('enableAnimatedPropsMemo', 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
+ */
+export const fixVirtualizeListCollapseWindowSize: Getter<boolean> = createJavaScriptFlagGetter('fixVirtualizeListCollapseWindowSize', false);
+
 /**
  * Function used to enable / disabled Layout Animations in React Native.
  */
@@ -150,7 +156,7 @@ export const isLayoutAnimationEnabled: Getter<boolean> = createJavaScriptFlagGet
 /**
  * If the animation is within Animated.loop, we do not send state updates to React.
  */
-export const shouldSkipStateUpdatesForLoopingAnimations: Getter<boolean> = createJavaScriptFlagGetter('shouldSkipStateUpdatesForLoopingAnimations', false);
+export const shouldSkipStateUpdatesForLoopingAnimations: Getter<boolean> = createJavaScriptFlagGetter('shouldSkipStateUpdatesForLoopingAnimations', true);
 
 /**
  * Enables use of AnimatedObject for animating transform values.
@@ -170,7 +176,7 @@ export const shouldUseSetNativePropsInFabric: Getter<boolean> = createJavaScript
 /**
  * Changes construction of the animation graph to `useInsertionEffect` instead of `useLayoutEffect`.
  */
-export const useInsertionEffectsForAnimations: Getter<boolean> = createJavaScriptFlagGetter('useInsertionEffectsForAnimations', false);
+export const useInsertionEffectsForAnimations: Getter<boolean> = createJavaScriptFlagGetter('useInsertionEffectsForAnimations', true);
 
 /**
  * Enable a variant of TextInput that moves some state to refs to avoid unnecessary re-renders
@@ -198,13 +204,9 @@ export const disableEventLoopOnBridgeless: Getter<boolean> = createNativeFlagGet
  */
 export const disableMountItemReorderingAndroid: Getter<boolean> = createNativeFlagGetter('disableMountItemReorderingAndroid', false);
 /**
- * Kill-switch to turn off support for aling-items:baseline on Fabric iOS.
- */
-export const enableAlignItemsBaselineOnFabricIOS: Getter<boolean> = createNativeFlagGetter('enableAlignItemsBaselineOnFabricIOS', true);
-/**
- * When enabled, custom line height calculation will be centered from top to bottom.
+ * When enabled, Andoid will accumulate updates in rawProps to reduce the number of mounting instructions for cascading rerenders.
  */
-export const enableAndroidLineHeightCentering: Getter<boolean> = createNativeFlagGetter('enableAndroidLineHeightCentering', true);
+export const enableAccumulatedUpdatesInRawPropsAndroid: Getter<boolean> = createNativeFlagGetter('enableAccumulatedUpdatesInRawPropsAndroid', false);
 /**
  * Feature flag to enable the new bridgeless architecture. Note: Enabling this will force enable the following flags: `useTurboModules` & `enableFabricRenderer.
  */
@@ -233,10 +235,6 @@ 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);
-/**
- * When the app is completely migrated to Fabric, set this flag to true to disable parts of Paper infrastructure that are not needed anymore but consume memory and CPU. Specifically, UIViewOperationQueue and EventDispatcherImpl will no longer work as they will not subscribe to ReactChoreographer for updates.
- */
-export const enableFabricRendererExclusively: Getter<boolean> = createNativeFlagGetter('enableFabricRendererExclusively', false);
 /**
  * Synchronise the view command dispatching with mounting of new transaction
  */
@@ -249,6 +247,10 @@ export const enableGranularShadowTreeStateReconciliation: Getter<boolean> = crea
  * iOS Views will clip to their padding box vs border box
  */
 export const enableIOSViewClipToPaddingBox: Getter<boolean> = createNativeFlagGetter('enableIOSViewClipToPaddingBox', false);
+/**
+ * When enabled, Andoid will build and initiate image prefetch requests on ImageShadowNode::layout
+ */
+export const enableImagePrefetchingAndroid: Getter<boolean> = createNativeFlagGetter('enableImagePrefetchingAndroid', false);
 /**
  * When enabled, LayoutAnimations API will animate state changes on Android.
  */
@@ -293,6 +295,10 @@ export const enableViewRecycling: Getter<boolean> = createNativeFlagGetter('enab
  * When enabled, rawProps in Props will not include Yoga specific props.
  */
 export const excludeYogaFromRawProps: Getter<boolean> = createNativeFlagGetter('excludeYogaFromRawProps', false);
+/**
+ * Fixes a bug in Differentiator where parent views may be referenced before they're created
+ */
+export const fixDifferentiatorEmittingUpdatesWithWrongParentTag: Getter<boolean> = createNativeFlagGetter('fixDifferentiatorEmittingUpdatesWithWrongParentTag', true);
 /**
  * Uses the default event priority instead of the discreet event priority by default when dispatching events from Fabric to React.
  */
@@ -301,10 +307,6 @@ export const fixMappingOfEventPrioritiesBetweenFabricAndReact: Getter<boolean> =
  * Fixes a limitation on Android where the mounting coordinator would report there are no pending transactions but some of them were actually not processed due to the use of the push model.
  */
 export const fixMountingCoordinatorReportedPendingTransactionsOnAndroid: Getter<boolean> = createNativeFlagGetter('fixMountingCoordinatorReportedPendingTransactionsOnAndroid', false);
-/**
- * Flag determining if the React Native DevTools (Fusebox) CDP backend should be enabled in debug builds. This flag is global and should not be changed across React Host lifetimes.
- */
-export const fuseboxEnabledDebug: Getter<boolean> = createNativeFlagGetter('fuseboxEnabledDebug', true);
 /**
  * Flag determining if the React Native DevTools (Fusebox) CDP backend should be enabled in release builds. This flag is global and should not be changed across React Host lifetimes.
  */
@@ -320,7 +322,7 @@ export const lazyAnimationCallbacks: Getter<boolean> = createNativeFlagGetter('l
 /**
  * Adds support for loading vector drawable assets in the Image component (only on Android)
  */
-export const loadVectorDrawablesOnImages: Getter<boolean> = createNativeFlagGetter('loadVectorDrawablesOnImages', false);
+export const loadVectorDrawablesOnImages: Getter<boolean> = createNativeFlagGetter('loadVectorDrawablesOnImages', true);
 /**
  * Enables storing js caller stack when creating promise in native module. This is useful in case of Promise rejection and tracing the cause.
  */
@@ -349,10 +351,14 @@ export const useOptimisedViewPreallocationOnAndroid: Getter<boolean> = createNat
  * Uses an optimized mechanism for event batching on Android that does not need to wait for a Choreographer frame callback.
  */
 export const useOptimizedEventBatchingOnAndroid: Getter<boolean> = createNativeFlagGetter('useOptimizedEventBatchingOnAndroid', false);
+/**
+ * Instead of using folly::dynamic as internal representation in RawProps and RawValue, use jsi::Value
+ */
+export const useRawPropsJsiValue: Getter<boolean> = createNativeFlagGetter('useRawPropsJsiValue', false);
 /**
  * When enabled, cloning shadow nodes within react native will update the reference held by the current JS fiber tree.
  */
-export const useRuntimeShadowNodeReferenceUpdate: Getter<boolean> = createNativeFlagGetter('useRuntimeShadowNodeReferenceUpdate', false);
+export const useRuntimeShadowNodeReferenceUpdate: Getter<boolean> = createNativeFlagGetter('useRuntimeShadowNodeReferenceUpdate', true);
 /**
  * In Bridgeless mode, should legacy NativeModules use the TurboModule system?
  */

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<<4caaf5dbaa68614ce53c8aecbd512df8>>
+ * @generated SignedSource<<37e95652ef5d824bb05e78ebdb051e43>>
  * @flow strict
  */
 
@@ -28,8 +28,7 @@ export interface Spec extends TurboModule {
   +completeReactInstanceCreationOnBgThreadOnAndroid?: () => boolean;
   +disableEventLoopOnBridgeless?: () => boolean;
   +disableMountItemReorderingAndroid?: () => boolean;
-  +enableAlignItemsBaselineOnFabricIOS?: () => boolean;
-  +enableAndroidLineHeightCentering?: () => boolean;
+  +enableAccumulatedUpdatesInRawPropsAndroid?: () => boolean;
   +enableBridgelessArchitecture?: () => boolean;
   +enableCppPropsIteratorSetter?: () => boolean;
   +enableDeletionOfUnmountedViews?: () => boolean;
@@ -37,10 +36,10 @@ export interface Spec extends TurboModule {
   +enableEventEmitterRetentionDuringGesturesOnAndroid?: () => boolean;
   +enableFabricLogs?: () => boolean;
   +enableFabricRenderer?: () => boolean;
-  +enableFabricRendererExclusively?: () => boolean;
   +enableFixForViewCommandRace?: () => boolean;
   +enableGranularShadowTreeStateReconciliation?: () => boolean;
   +enableIOSViewClipToPaddingBox?: () => boolean;
+  +enableImagePrefetchingAndroid?: () => boolean;
   +enableLayoutAnimationsOnAndroid?: () => boolean;
   +enableLayoutAnimationsOnIOS?: () => boolean;
   +enableLongTaskAPI?: () => boolean;
@@ -52,9 +51,9 @@ export interface Spec extends TurboModule {
   +enableUIConsistency?: () => boolean;
   +enableViewRecycling?: () => boolean;
   +excludeYogaFromRawProps?: () => boolean;
+  +fixDifferentiatorEmittingUpdatesWithWrongParentTag?: () => boolean;
   +fixMappingOfEventPrioritiesBetweenFabricAndReact?: () => boolean;
   +fixMountingCoordinatorReportedPendingTransactionsOnAndroid?: () => boolean;
-  +fuseboxEnabledDebug?: () => boolean;
   +fuseboxEnabledRelease?: () => boolean;
   +initEagerTurboModulesOnNativeModulesQueueAndroid?: () => boolean;
   +lazyAnimationCallbacks?: () => boolean;
@@ -66,6 +65,7 @@ export interface Spec extends TurboModule {
   +useNativeViewConfigsInBridgelessMode?: () => boolean;
   +useOptimisedViewPreallocationOnAndroid?: () => boolean;
   +useOptimizedEventBatchingOnAndroid?: () => boolean;
+  +useRawPropsJsiValue?: () => boolean;
   +useRuntimeShadowNodeReferenceUpdate?: () => boolean;
   +useTurboModuleInterop?: () => boolean;
   +useTurboModules?: () => boolean;

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

@@ -21,7 +21,10 @@ type ErrorInfo = {
   +errorBoundary?: ?React$Component<any, any>,
 };
 
-export function onUncaughtError(errorValue: mixed, errorInfo: ErrorInfo): void {
+function getExtendedError(
+  errorValue: mixed,
+  errorInfo: ErrorInfo,
+): ExtendedError {
   let error;
 
   // Typically, `errorValue` should be an error. However, other values such as
@@ -50,38 +53,18 @@ export function onUncaughtError(errorValue: mixed, errorInfo: ErrorInfo): void {
     // Ignored.
   }
 
+  return error;
+}
+
+export function onUncaughtError(errorValue: mixed, errorInfo: ErrorInfo): void {
+  const error = getExtendedError(errorValue, errorInfo);
+
   // Uncaught errors are fatal.
   handleException(error, true);
 }
 
 export function onCaughtError(errorValue: mixed, errorInfo: ErrorInfo): void {
-  let error;
-
-  // Typically, `errorValue` should be an error. However, other values such as
-  // strings (or even null) are sometimes thrown.
-  if (errorValue instanceof Error) {
-    /* $FlowFixMe[class-object-subtyping] added when improving typing for
-     * this parameters */
-    // $FlowFixMe[incompatible-cast]
-    error = (errorValue: ExtendedError);
-  } else if (typeof errorValue === 'string') {
-    /* $FlowFixMe[class-object-subtyping] added when improving typing for
-     * this parameters */
-    // $FlowFixMe[incompatible-cast]
-    error = (new SyntheticError(errorValue): ExtendedError);
-  } else {
-    /* $FlowFixMe[class-object-subtyping] added when improving typing for
-     * this parameters */
-    // $FlowFixMe[incompatible-cast]
-    error = (new SyntheticError('Unspecified error'): ExtendedError);
-  }
-  try {
-    // $FlowFixMe[incompatible-use] this is in try/catch.
-    error.componentStack = errorInfo.componentStack;
-    error.isComponentError = true;
-  } catch {
-    // Ignored.
-  }
+  const error = getExtendedError(errorValue, errorInfo);
 
   // Caught errors are not fatal.
   handleException(error, false);
@@ -91,33 +74,7 @@ export function onRecoverableError(
   errorValue: mixed,
   errorInfo: ErrorInfo,
 ): void {
-  let error;
-
-  // Typically, `errorValue` should be an error. However, other values such as
-  // strings (or even null) are sometimes thrown.
-  if (errorValue instanceof Error) {
-    /* $FlowFixMe[class-object-subtyping] added when improving typing for
-     * this parameters */
-    // $FlowFixMe[incompatible-cast]
-    error = (errorValue: ExtendedError);
-  } else if (typeof errorValue === 'string') {
-    /* $FlowFixMe[class-object-subtyping] added when improving typing for
-     * this parameters */
-    // $FlowFixMe[incompatible-cast]
-    error = (new SyntheticError(errorValue): ExtendedError);
-  } else {
-    /* $FlowFixMe[class-object-subtyping] added when improving typing for
-     * this parameters */
-    // $FlowFixMe[incompatible-cast]
-    error = (new SyntheticError('Unspecified error'): ExtendedError);
-  }
-  try {
-    // $FlowFixMe[incompatible-use] this is in try/catch.
-    error.componentStack = errorInfo.componentStack;
-    error.isComponentError = true;
-  } catch {
-    // Ignored.
-  }
+  const error = getExtendedError(errorValue, errorInfo);
 
   // Recoverable errors should only be warnings.
   // This will make it a soft error in LogBox.

package/src/private/specs/modules/{NativeJSCSamplingProfiler.js → NativeCPUTime.js}

@@ -12,8 +12,13 @@ import type {TurboModule} from '../../../../Libraries/TurboModule/RCTExport';
 
 import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboModuleRegistry';
 
+/**
+ * This is an internal native module meant to be used for performance
+ * measurements and benchmarks. It is not meant to be used in production.
+ */
 export interface Spec extends TurboModule {
-  +operationComplete: (token: number, result: ?string, error: ?string) => void;
+  +getCPUTimeNanos: () => number;
+  +hasAccurateCPUTimeNanosForBenchmarks: () => boolean;
 }
 
-export default (TurboModuleRegistry.get<Spec>('JSCSamplingProfiler'): ?Spec);
+export default (TurboModuleRegistry.getEnforcing<Spec>('CPUTimeCxx'): Spec);

package/src/private/specs/modules/NativeFantom.js

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ * @format
+ */
+
+import type {TurboModule} from '../../../../Libraries/TurboModule/RCTExport';
+
+import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboModuleRegistry';
+
+// match RenderFormatOptions.h
+export type RenderFormatOptions = {
+  includeRoot: boolean,
+  includeLayoutMetrics: boolean,
+};
+
+interface Spec extends TurboModule {
+  startSurface: (
+    surfaceId: number,
+    viewportWidth: number,
+    viewportHeight: number,
+    devicePixelRatio: number,
+  ) => void;
+  stopSurface: (surfaceId: number) => void;
+  getMountingManagerLogs: (surfaceId: number) => Array<string>;
+  flushMessageQueue: () => void;
+  getRenderedOutput: (surfaceId: number, config: RenderFormatOptions) => string;
+  reportTestSuiteResultsJSON: (results: string) => void;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'NativeFantomCxx',
+) as Spec;

package/src/private/utilities/ensureInstance.js

@@ -0,0 +1,21 @@
+/**
+ * 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
+ * @flow strict
+ */
+
+export default function ensureInstance<T>(value: mixed, Class: Class<T>): T {
+  if (!(value instanceof Class)) {
+    // $FlowIssue[incompatible-use]
+    const className = Class.name;
+    throw new Error(
+      `Expected instance of ${className} but got ${String(value)}`,
+    );
+  }
+
+  return value;
+}

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

@@ -25,7 +25,7 @@ import {getFabricUIManager} from '../../../../../Libraries/ReactNative/FabricUIM
 import {create as createAttributePayload} from '../../../../../Libraries/ReactNative/ReactFabricPublicInstance/ReactNativeAttributePayload';
 import warnForStyleProps from '../../../../../Libraries/ReactNative/ReactFabricPublicInstance/warnForStyleProps';
 import ReadOnlyElement, {getBoundingClientRect} from './ReadOnlyElement';
-import ReadOnlyNode from './ReadOnlyNode';
+import ReadOnlyNode, {setInstanceHandle} from './ReadOnlyNode';
 import {
   getPublicInstanceFromInternalInstanceHandle,
   getShadowNode,
@@ -35,7 +35,26 @@ import nullthrows from 'nullthrows';
 
 const noop = () => {};
 
-export default class ReactNativeElement
+// Ideally, this class would be exported as-is, but this implementation is
+// significantly slower than the existing `ReactFabricHostComponent`.
+// This is a very hot code path (this class is instantiated once per rendered
+// host component in the tree) and we can't regress performance here.
+//
+// This implementation is slower because this is a subclass and we have to call
+// super(), which is a very slow operation the way that Babel transforms it at
+// the moment.
+//
+// The optimization we're doing is using an old-style function constructor,
+// where we're not required to use `super()`, and we make that constructor
+// extend this class so it inherits all the methods and it sets the class
+// hierarchy correctly.
+//
+// An alternative implementation was to implement the constructor as a function
+// returning a manually constructed instance using `Object.create()` but that
+// was slower than this method because the engine has to create an object than
+// we then discard to create a new one.
+
+class ReactNativeElementMethods
   extends ReadOnlyElement
   implements INativeMethods
 {
@@ -43,8 +62,10 @@ export default class ReactNativeElement
   __nativeTag: number;
   __internalInstanceHandle: InternalInstanceHandle;
 
-  #viewConfig: ViewConfig;
+  __viewConfig: ViewConfig;
 
+  // This constructor isn't really used. See the `ReactNativeElement` function
+  // below.
   constructor(
     tag: number,
     viewConfig: ViewConfig,
@@ -54,7 +75,7 @@ export default class ReactNativeElement
 
     this.__nativeTag = tag;
     this.__internalInstanceHandle = internalInstanceHandle;
-    this.#viewConfig = viewConfig;
+    this.__viewConfig = viewConfig;
   }
 
   get offsetHeight(): number {
@@ -171,12 +192,12 @@ export default class ReactNativeElement
 
   setNativeProps(nativeProps: {...}): void {
     if (__DEV__) {
-      warnForStyleProps(nativeProps, this.#viewConfig.validAttributes);
+      warnForStyleProps(nativeProps, this.__viewConfig.validAttributes);
     }
 
     const updatePayload = createAttributePayload(
       nativeProps,
-      this.#viewConfig.validAttributes,
+      this.__viewConfig.validAttributes,
     );
 
     const node = getShadowNode(this);
@@ -186,3 +207,25 @@ export default class ReactNativeElement
     }
   }
 }
+
+// Alternative constructor just implemented to provide a better performance than
+// calling super() in the original class.
+function ReactNativeElement(
+  this: ReactNativeElementMethods,
+  tag: number,
+  viewConfig: ViewConfig,
+  internalInstanceHandle: InternalInstanceHandle,
+) {
+  this.__nativeTag = tag;
+  this.__internalInstanceHandle = internalInstanceHandle;
+  this.__viewConfig = viewConfig;
+  setInstanceHandle(this, internalInstanceHandle);
+}
+
+ReactNativeElement.prototype = Object.create(
+  ReactNativeElementMethods.prototype,
+);
+
+// $FlowExpectedError[prop-missing]
+// $FlowFixMe[incompatible-cast]
+export default ReactNativeElement as typeof ReactNativeElementMethods;

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

@@ -26,6 +26,8 @@ let ReadOnlyElementClass: Class<ReadOnlyElement>;
 
 export default class ReadOnlyNode {
   constructor(internalInstanceHandle: InternalInstanceHandle) {
+    // This constructor is inlined in `ReactNativeElement` so if you modify
+    // this make sure that their implementation stays in sync.
     setInstanceHandle(this, internalInstanceHandle);
   }
 
@@ -293,7 +295,7 @@ export function getInstanceHandle(node: ReadOnlyNode): InternalInstanceHandle {
   return node[INSTANCE_HANDLE_KEY];
 }
 
-function setInstanceHandle(
+export function setInstanceHandle(
   node: ReadOnlyNode,
   instanceHandle: InternalInstanceHandle,
 ): void {
@@ -301,11 +303,18 @@ function setInstanceHandle(
   node[INSTANCE_HANDLE_KEY] = instanceHandle;
 }
 
+let RendererProxy;
+function getRendererProxy() {
+  if (RendererProxy == 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');
+  }
+  return RendererProxy;
+}
+
 export function getShadowNode(node: ReadOnlyNode): ?ShadowNode {
-  // 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.
-  const RendererProxy = require('../../../../../Libraries/ReactNative/RendererProxy');
-  return RendererProxy.getNodeFromInternalInstanceHandle(
+  return getRendererProxy().getNodeFromInternalInstanceHandle(
     getInstanceHandle(node),
   );
 }
@@ -349,11 +358,10 @@ function getNodeSiblingsAndPosition(
 export function getPublicInstanceFromInternalInstanceHandle(
   instanceHandle: InternalInstanceHandle,
 ): ?ReadOnlyNode {
-  // 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.
-  const RendererProxy = require('../../../../../Libraries/ReactNative/RendererProxy');
   const mixedPublicInstance =
-    RendererProxy.getPublicInstanceFromInternalInstanceHandle(instanceHandle);
+    getRendererProxy().getPublicInstanceFromInternalInstanceHandle(
+      instanceHandle,
+    );
   // $FlowExpectedError[incompatible-return] React defines public instances as "mixed" because it can't access the definition from React Native.
   return mixedPublicInstance;
 }

package/src/private/webapis/intersectionobserver/IntersectionObserver.js

@@ -33,10 +33,10 @@ type IntersectionObserverInit = {
    * If set, it will either be a singular ratio value between 0-1 (inclusive)
    * or an array of such ratios.
    *
-   * Note: If `rn_rootThreshold` is set, and `threshold` is not set,
+   * Note: If `rnRootThreshold` is set, and `threshold` is not set,
    * `threshold` will not default to [0] (as per spec)
    */
-  rn_rootThreshold?: number | $ReadOnlyArray<number>,
+  rnRootThreshold?: number | $ReadOnlyArray<number>,
 };
 
 /**
@@ -57,7 +57,7 @@ type IntersectionObserverInit = {
  *
  * This implementation only supports the `threshold` option at the moment
  * (`root` and `rootMargin` are not supported) and provides a React Native specific
- * option `rn_rootThreshold`.
+ * option `rnRootThreshold`.
  *
  */
 export default class IntersectionObserver {
@@ -99,7 +99,7 @@ export default class IntersectionObserver {
 
     this._callback = callback;
 
-    this._rootThresholds = normalizeRootThreshold(options?.rn_rootThreshold);
+    this._rootThresholds = normalizeRootThreshold(options?.rnRootThreshold);
     this._thresholds = normalizeThreshold(
       options?.threshold,
       this._rootThresholds != null, // only provide default if no rootThreshold
@@ -136,9 +136,9 @@ export default class IntersectionObserver {
    * threshold is a ratio of intersection area to bounding box area of an
    * observed target.
    * Notifications for a target are generated when any of the thresholds specified
-   * in `rn_rootThreshold` or `threshold` are crossed for that target.
+   * in `rnRootThreshold` or `threshold` are crossed for that target.
    *
-   * If no value was passed to the constructor, and no `rn_rootThreshold`
+   * If no value was passed to the constructor, and no `rnRootThreshold`
    * is set, `0` is used.
    */
   get thresholds(): $ReadOnlyArray<number> {
@@ -150,9 +150,9 @@ export default class IntersectionObserver {
    * threshold is a ratio of intersection area to bounding box area of the specified
    * root view, which defaults to the viewport.
    * Notifications for a target are generated when any of the thresholds specified
-   * in `rn_rootThreshold` or `threshold` are crossed for that target.
+   * in `rnRootThreshold` or `threshold` are crossed for that target.
    */
-  get rootThresholds(): $ReadOnlyArray<number> | null {
+  get rnRootThresholds(): $ReadOnlyArray<number> | null {
     return this._rootThresholds;
   }
 
@@ -293,7 +293,7 @@ function normalizeThreshold(
 }
 
 /**
- * Converts the user defined `rn_rootThreshold` value into an array of sorted valid
+ * Converts the user defined `rnRootThreshold` value into an array of sorted valid
  * threshold options for `IntersectionObserver` (double ∈ [0, 1]).
  *
  * If invalid array or null, returns null.
@@ -310,13 +310,13 @@ function normalizeRootThreshold(
 ): null | $ReadOnlyArray<number> {
   if (Array.isArray(rootThreshold)) {
     const normalizedArr = rootThreshold
-      .map(rt => normalizeThresholdValue(rt, 'rn_rootThreshold'))
+      .map(rt => normalizeThresholdValue(rt, 'rnRootThreshold'))
       .filter((rt): rt is number => rt != null)
       .sort();
     return normalizedArr.length === 0 ? null : normalizedArr;
   }
 
-  const normalized = normalizeThresholdValue(rootThreshold, 'rn_rootThreshold');
+  const normalized = normalizeThresholdValue(rootThreshold, 'rnRootThreshold');
   return normalized == null ? null : [normalized];
 }
 

package/src/private/webapis/intersectionobserver/IntersectionObserverEntry.js

@@ -77,7 +77,7 @@ export default class IntersectionObserverEntry {
   /**
    * Returns the ratio of the `intersectionRect` to the `boundingRootRect`.
    */
-  get rn_intersectionRootRatio(): number {
+  get rnRootIntersectionRatio(): number {
     const intersectionRect = this.intersectionRect;
 
     const rootRect = this._nativeEntry.rootRect;

package/src/private/webapis/intersectionobserver/IntersectionObserverManager.js

@@ -162,7 +162,7 @@ export function observe({
     intersectionObserverId,
     targetShadowNode,
     thresholds: registeredObserver.observer.thresholds,
-    rootThresholds: registeredObserver.observer.rootThresholds,
+    rootThresholds: registeredObserver.observer.rnRootThresholds,
   });
 
   return true;