@office-iss/react-native-win32 0.0.0-canary.276 → 0.0.0-canary.278

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -13,6 +13,7 @@
 import type Animation, {EndCallback} from '../animations/Animation';
 import type {InterpolationConfigType} from './AnimatedInterpolation';
 import type AnimatedNode from './AnimatedNode';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 import type AnimatedTracking from './AnimatedTracking';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
@@ -21,6 +22,7 @@ import AnimatedInterpolation from './AnimatedInterpolation';
 import AnimatedWithChildren from './AnimatedWithChildren';
 
 export type AnimatedValueConfig = $ReadOnly<{
+  ...AnimatedNodeConfig,
   useNativeDriver: boolean,
 }>;
 
@@ -90,7 +92,7 @@ export default class AnimatedValue extends AnimatedWithChildren {
   _tracking: ?AnimatedTracking;
 
   constructor(value: number, config?: ?AnimatedValueConfig) {
-    super();
+    super(config);
     if (typeof value !== 'number') {
       throw new Error('AnimatedValue: Attempting to set value to undefined');
     }
@@ -298,6 +300,7 @@ export default class AnimatedValue extends AnimatedWithChildren {
       type: 'value',
       value: this._value,
       offset: this._offset,
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedValueXY.js

@@ -11,12 +11,14 @@
 'use strict';
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import AnimatedValue from './AnimatedValue';
 import AnimatedWithChildren from './AnimatedWithChildren';
 import invariant from 'invariant';
 
 export type AnimatedValueXYConfig = $ReadOnly<{
+  ...AnimatedNodeConfig,
   useNativeDriver: boolean,
 }>;
 type ValueXYListenerCallback = (value: {x: number, y: number, ...}) => mixed;
@@ -49,7 +51,7 @@ export default class AnimatedValueXY extends AnimatedWithChildren {
     },
     config?: ?AnimatedValueXYConfig,
   ) {
-    super();
+    super(config);
     const value: any = valueIn || {x: 0, y: 0}; // @flowfixme: shouldn't need `: any`
     if (typeof value.x === 'number' && typeof value.y === 'number') {
       this.x = new AnimatedValue(value.x);

package/Libraries/Core/ReactNativeVersion.js

@@ -15,9 +15,9 @@ const version: $ReadOnly<{
   prerelease: string | null,
 }> = {
   major: 0,
-  minor: 77,
+  minor: 78,
   patch: 0,
-  prerelease: 'nightly-20241125-4cffff35e',
+  prerelease: 'nightly-20241210-6d235853f',
 };
 
 module.exports = {version};

package/Libraries/LayoutAnimation/LayoutAnimation.js

@@ -121,7 +121,7 @@ const Presets = {
     'opacity',
   ): LayoutAnimationConfig),
   linear: (create(500, 'linear', 'opacity'): LayoutAnimationConfig),
-  spring: {
+  spring: ({
     duration: 700,
     create: {
       type: 'linear',
@@ -135,7 +135,7 @@ const Presets = {
       type: 'linear',
       property: 'opacity',
     },
-  },
+  }: LayoutAnimationConfig),
 };
 
 /**

package/Libraries/Network/FormData.js

@@ -28,6 +28,15 @@ type FormDataPart =
       ...
     };
 
+/**
+ * Encode a FormData filename compliant with RFC 2183
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition#directives
+ */
+function encodeFilename(filename: string): string {
+  return encodeURIComponent(filename.replace(/\//g, '_'));
+}
+
 /**
  * Polyfill for XMLHttpRequest2 FormData API, allowing multipart POST requests
  * with mixed data (string, native files) to be submitted via XMLHttpRequest.
@@ -82,9 +91,8 @@ class FormData {
       // content type (cf. web Blob interface.)
       if (typeof value === 'object' && !Array.isArray(value) && value) {
         if (typeof value.name === 'string') {
-          headers['content-disposition'] += `; filename="${
-            value.name
-          }"; filename*=utf-8''${encodeURI(value.name)}`;
+          headers['content-disposition'] +=
+            `; filename="${encodeFilename(value.name)}"`;
         }
         if (typeof value.type === 'string') {
           headers['content-type'] = value.type;

package/Libraries/Text/Text.d.ts

@@ -12,7 +12,7 @@ import {Constructor} from '../../types/private/Utilities';
 import {AccessibilityProps} from '../Components/View/ViewAccessibility';
 import {NativeMethods} from '../../types/public/ReactNativeTypes';
 import {ColorValue, StyleProp} from '../StyleSheet/StyleSheet';
-import {TextStyle} from '../StyleSheet/StyleSheetTypes';
+import {TextStyle, ViewStyle} from '../StyleSheet/StyleSheetTypes';
 import {
   GestureResponderEvent,
   LayoutChangeEvent,
@@ -294,6 +294,11 @@ export interface TextProps
    * Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).
    */
   minimumFontScale?: number | undefined;
+
+  /**
+   * Controls how touch events are handled. Similar to `View`'s `pointerEvents`.
+   */
+  pointerEvents?: ViewStyle['pointerEvents'] | undefined;
 }
 
 /**

package/Libraries/Text/TextProps.js

@@ -17,7 +17,7 @@ import type {
   AccessibilityState,
   Role,
 } from '../Components/View/ViewAccessibility';
-import type {TextStyleProp} from '../StyleSheet/StyleSheet';
+import type {ColorValue, TextStyleProp} from '../StyleSheet/StyleSheet';
 import type {
   LayoutEvent,
   PointerEvent,
@@ -212,7 +212,7 @@ export type TextProps = $ReadOnly<{
    *
    * See https://reactnative.dev/docs/text#selectioncolor
    */
-  selectionColor?: ?string,
+  selectionColor?: ?ColorValue,
 
   dataDetectorType?: ?('phoneNumber' | 'link' | 'email' | 'none' | 'all'),
 

package/Libraries/Text/TextProps.win32.js

@@ -17,7 +17,7 @@ import type {
   AccessibilityState,
   Role,
 } from '../Components/View/ViewAccessibility';
-import type {TextStyleProp} from '../StyleSheet/StyleSheet';
+import type {ColorValue, TextStyleProp} from '../StyleSheet/StyleSheet';
 import type {
   LayoutEvent,
   PointerEvent,
@@ -225,7 +225,7 @@ export type TextProps = $ReadOnly<{
    *
    * See https://reactnative.dev/docs/text#selectioncolor
    */
-  selectionColor?: ?string,
+  selectionColor?: ?ColorValue,
 
   dataDetectorType?: ?('phoneNumber' | 'link' | 'email' | 'none' | 'all'),
 

package/overrides.json

@@ -7,13 +7,13 @@
     "**/__snapshots__/**",
     "src-win/rntypes/**"
   ],
-  "baseVersion": "0.77.0-nightly-20241125-4cffff35e",
+  "baseVersion": "0.78.0-nightly-20241210-6d235853f",
   "overrides": [
     {
       "type": "derived",
       "file": ".flowconfig",
       "baseFile": ".flowconfig",
-      "baseHash": "168a2b4bcf33aba4727eb608902b17b4eb74c95d"
+      "baseHash": "38943f268bd48c91a2ace6ad2a9302a3bb346dbd"
     },
     {
       "type": "derived",
@@ -420,7 +420,7 @@
       "type": "derived",
       "file": "src-win/Libraries/Text/Text.d.ts",
       "baseFile": "packages/react-native/Libraries/Text/Text.d.ts",
-      "baseHash": "4b523469a5c8dcfe53749d1739ccf77c0106375e"
+      "baseHash": "21dab7f71254c429d592827ab313f77c18baeda1"
     },
     {
       "type": "derived",
@@ -439,7 +439,7 @@
       "type": "derived",
       "file": "src-win/Libraries/Text/TextProps.win32.js",
       "baseFile": "packages/react-native/Libraries/Text/TextProps.js",
-      "baseHash": "8e56a028dee989ebb8b06f4c01a1d038f074597d"
+      "baseHash": "ef1efdc0fb302273cd98be71aef2986677dda184"
     },
     {
       "type": "patch",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@office-iss/react-native-win32",
-  "version": "0.0.0-canary.276",
+  "version": "0.0.0-canary.278",
   "description": "Implementation of react native on top of Office's Win32 platform.",
   "repository": {
     "type": "git",
@@ -30,13 +30,13 @@
     "@react-native-community/cli-platform-android": "15.0.0-alpha.2",
     "@react-native-community/cli-platform-ios": "15.0.0-alpha.2",
     "@react-native/assets": "1.0.0",
-    "@react-native/assets-registry": "0.77.0-nightly-20241125-4cffff35e",
-    "@react-native/codegen": "0.77.0-nightly-20241125-4cffff35e",
-    "@react-native/community-cli-plugin": "0.77.0-nightly-20241125-4cffff35e",
-    "@react-native/gradle-plugin": "0.77.0-nightly-20241125-4cffff35e",
-    "@react-native/js-polyfills": "0.77.0-nightly-20241125-4cffff35e",
-    "@react-native/normalize-colors": "0.77.0-nightly-20241125-4cffff35e",
-    "@react-native/virtualized-lists": "0.77.0-nightly-20241125-4cffff35e",
+    "@react-native/assets-registry": "0.78.0-nightly-20241210-6d235853f",
+    "@react-native/codegen": "0.78.0-nightly-20241210-6d235853f",
+    "@react-native/community-cli-plugin": "0.78.0-nightly-20241210-6d235853f",
+    "@react-native/gradle-plugin": "0.78.0-nightly-20241210-6d235853f",
+    "@react-native/js-polyfills": "0.78.0-nightly-20241210-6d235853f",
+    "@react-native/normalize-colors": "0.78.0-nightly-20241210-6d235853f",
+    "@react-native/virtualized-lists": "0.78.0-nightly-20241210-6d235853f",
     "abort-controller": "^3.0.0",
     "anser": "^1.4.9",
     "ansi-regex": "^5.0.0",
@@ -51,7 +51,6 @@
     "glob": "^7.1.1",
     "invariant": "^2.2.4",
     "jest-environment-node": "^29.6.3",
-    "jsc-android": "^250231.0.0",
     "memoize-one": "^5.0.0",
     "metro-runtime": "^0.81.0",
     "metro-source-map": "^0.81.0",
@@ -90,14 +89,14 @@
     "just-scripts": "^1.3.3",
     "prettier": "2.8.8",
     "react": "18.3.1",
-    "react-native": "0.77.0-nightly-20241125-4cffff35e",
+    "react-native": "0.78.0-nightly-20241210-6d235853f",
     "react-native-platform-override": "^1.9.49",
     "typescript": "5.0.4"
   },
   "peerDependencies": {
     "@types/react": "^18.2.6",
     "react": "^18.2.0",
-    "react-native": "0.77.0-nightly-20241125-4cffff35e"
+    "react-native": "0.78.0-nightly-20241210-6d235853f"
   },
   "beachball": {
     "defaultNpmTag": "canary",

package/src/private/animated/useAnimatedPropsMemo.js

@@ -113,7 +113,7 @@ export function createCompositeKeyForProps(
     const key = keys[ii];
     const value = props[key];
 
-    if (allowlist == null || Object.hasOwn(allowlist, key)) {
+    if (allowlist == null || hasOwn(allowlist, key)) {
       let compositeKeyComponent;
       if (key === 'style') {
         // $FlowFixMe[incompatible-call] - `style` is a valid argument.
@@ -205,7 +205,7 @@ function createCompositeKeyForObject(
   for (let ii = 0, length = keys.length; ii < length; ii++) {
     const key = keys[ii];
 
-    if (allowlist == null || Object.hasOwn(allowlist, key)) {
+    if (allowlist == null || hasOwn(allowlist, key)) {
       const value = object[key];
 
       let compositeKeyComponent;
@@ -250,7 +250,7 @@ export function areCompositeKeysEqual(
   }
   for (let ii = 0; ii < length; ii++) {
     const key = keys[ii];
-    if (!Object.hasOwn(next, key)) {
+    if (!hasOwn(next, key)) {
       return false;
     }
     const prevComponent = prev[key];
@@ -336,7 +336,7 @@ function areCompositeKeyComponentsEqual(
     for (let ii = 0; ii < length; ii++) {
       const key = keys[ii];
       if (
-        !Object.hasOwn(nullthrows(next), key) ||
+        !hasOwn(nullthrows(next), key) ||
         !areCompositeKeyComponentsEqual(prev[key], next[key])
       ) {
         return false;
@@ -346,3 +346,11 @@ function areCompositeKeyComponentsEqual(
   }
   return false;
 }
+
+// Supported versions of JSC do not implement the newer Object.hasOwn. Remove
+// this shim when they do.
+// $FlowIgnore[method-unbinding]
+const _hasOwnProp = Object.prototype.hasOwnProperty;
+const hasOwn: (obj: $ReadOnly<{...}>, prop: string) => boolean =
+  // $FlowIgnore[method-unbinding]
+  Object.hasOwn ?? ((obj, prop) => _hasOwnProp.call(obj, prop));

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<<83b5798ee1c7a28fffbf110e19641d69>>
+ * @generated SignedSource<<67e1f8c80caedcbf7b28a089a2744b9a>>
  * @flow strict
  */
 
@@ -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>,
@@ -63,10 +64,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,6 +79,7 @@ export type ReactNativeFeatureFlags = {
   enableUIConsistency: Getter<boolean>,
   enableViewRecycling: Getter<boolean>,
   excludeYogaFromRawProps: Getter<boolean>,
+  fixDifferentiatorEmittingUpdatesWithWrongParentTag: Getter<boolean>,
   fixMappingOfEventPrioritiesBetweenFabricAndReact: Getter<boolean>,
   fixMountingCoordinatorReportedPendingTransactionsOnAndroid: Getter<boolean>,
   fuseboxEnabledDebug: Getter<boolean>,
@@ -142,6 +144,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.
  */
@@ -233,10 +240,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 +252,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 +300,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.
  */
@@ -352,7 +363,7 @@ export const useOptimizedEventBatchingOnAndroid: Getter<boolean> = createNativeF
 /**
  * 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<<fa9dcd18f2e50de520995ce1f26b111e>>
  * @flow strict
  */
 
@@ -37,10 +37,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,6 +52,7 @@ export interface Spec extends TurboModule {
   +enableUIConsistency?: () => boolean;
   +enableViewRecycling?: () => boolean;
   +excludeYogaFromRawProps?: () => boolean;
+  +fixDifferentiatorEmittingUpdatesWithWrongParentTag?: () => boolean;
   +fixMappingOfEventPrioritiesBetweenFabricAndReact?: () => boolean;
   +fixMountingCoordinatorReportedPendingTransactionsOnAndroid?: () => boolean;
   +fuseboxEnabledDebug?: () => boolean;

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,24 @@ 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]
+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 {

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;

package/src/private/webapis/intersectionobserver/specs/NativeIntersectionObserver.js

@@ -17,6 +17,7 @@ export type NativeIntersectionObserverEntry = {
   targetInstanceHandle: mixed,
   targetRect: $ReadOnlyArray<number>, // It's actually a tuple with x, y, width and height
   rootRect: $ReadOnlyArray<number>, // It's actually a tuple with x, y, width and height
+  // TODO(T209328432) - Remove optionality of intersectionRect when native changes are released
   intersectionRect: ?$ReadOnlyArray<number>, // It's actually a tuple with x, y, width and height
   isIntersectingAboveThresholds: boolean,
   time: number,