@office-iss/react-native-win32 0.74.4 → 0.75.0-preview.1

package/Libraries/Core/setUpReactDevTools.js

@@ -10,12 +10,52 @@
 
 'use strict';
 
+import type {Domain} from '../../src/private/fusebox/setUpFuseboxReactDevToolsDispatcher';
+
 if (__DEV__) {
-  let isWebSocketOpen = false;
-  let ws = null;
+  // Register dispatcher on global, which can be used later by Chrome DevTools frontend
+  require('../../src/private/fusebox/setUpFuseboxReactDevToolsDispatcher');
 
+  // Install hook before React is loaded.
   const reactDevTools = require('react-devtools-core');
-  const connectToDevTools = () => {
+  // This should be defined in DEV, otherwise error is expected.
+  const fuseboxReactDevToolsDispatcher =
+    global.__FUSEBOX_REACT_DEVTOOLS_DISPATCHER__;
+  const reactDevToolsFuseboxGlobalBindingName =
+    fuseboxReactDevToolsDispatcher.BINDING_NAME;
+
+  const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
+  const devToolsSettingsManager = require('../DevToolsSettings/DevToolsSettingsManager');
+  const resolveRNStyle = require('../StyleSheet/flattenStyle');
+
+  let disconnect = null;
+  function disconnectBackendFromReactDevToolsInFuseboxIfNeeded() {
+    if (disconnect != null) {
+      disconnect();
+      disconnect = null;
+    }
+  }
+
+  function connectToReactDevToolsInFusebox(domain: Domain) {
+    disconnect = reactDevTools.connectWithCustomMessagingProtocol({
+      onSubscribe: listener => {
+        domain.onMessage.addEventListener(listener);
+      },
+      onUnsubscribe: listener => {
+        domain.onMessage.removeEventListener(listener);
+      },
+      onMessage: (event, payload) => {
+        domain.sendMessage({event, payload});
+      },
+      settingsManager: devToolsSettingsManager,
+      nativeStyleEditorValidAttributes: Object.keys(ReactNativeStyleAttributes),
+      resolveRNStyle,
+    });
+  }
+
+  let isWebSocketOpen = false;
+  let ws = null;
+  function connectToWSBasedReactDevToolsFrontend() {
     if (ws !== null && isWebSocketOpen) {
       // If the DevTools backend is already connected, don't recreate the WebSocket.
       // This would break the connection.
@@ -61,12 +101,9 @@ if (__DEV__) {
         isWebSocketOpen = true;
       });
 
-      const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
-      const devToolsSettingsManager = require('../DevToolsSettings/DevToolsSettingsManager');
-
       reactDevTools.connectToDevTools({
         isAppActive,
-        resolveRNStyle: require('../StyleSheet/flattenStyle'),
+        resolveRNStyle,
         nativeStyleEditorValidAttributes: Object.keys(
           ReactNativeStyleAttributes,
         ),
@@ -74,9 +111,32 @@ if (__DEV__) {
         devToolsSettingsManager,
       });
     }
-  };
+  }
+
+  // 1. If React DevTools has already been opened and initialized in Fusebox, bindings survive reloads
+  if (global[reactDevToolsFuseboxGlobalBindingName] != null) {
+    disconnectBackendFromReactDevToolsInFuseboxIfNeeded();
+    const domain =
+      fuseboxReactDevToolsDispatcher.initializeDomain('react-devtools');
+    connectToReactDevToolsInFusebox(domain);
+  }
+
+  // 2. If React DevTools panel in Fusebox was opened for the first time after the runtime has been created
+  // 2. OR if React DevTools frontend was re-initialized: Chrome DevTools was closed and then re-opened
+  global.__FUSEBOX_REACT_DEVTOOLS_DISPATCHER__.onDomainInitialization.addEventListener(
+    (domain: Domain) => {
+      if (domain.name === 'react-devtools') {
+        disconnectBackendFromReactDevToolsInFuseboxIfNeeded();
+        connectToReactDevToolsInFusebox(domain);
+      }
+    },
+  );
 
+  // 3. Fallback to attempting to connect WS-based RDT frontend
   const RCTNativeAppEventEmitter = require('../EventEmitter/RCTNativeAppEventEmitter');
-  RCTNativeAppEventEmitter.addListener('RCTDevMenuShown', connectToDevTools);
-  connectToDevTools(); // Try connecting once on load
+  RCTNativeAppEventEmitter.addListener(
+    'RCTDevMenuShown',
+    connectToWSBasedReactDevToolsFrontend,
+  );
+  connectToWSBasedReactDevToolsFrontend(); // Try connecting once on load
 }

package/Libraries/Core/setUpTimers.js

@@ -10,7 +10,9 @@
 
 'use strict';
 
-const {isNativeFunction} = require('../Utilities/FeatureDetection');
+const ReactNativeFeatureFlags = require('../../src/private/featureflags/ReactNativeFeatureFlags');
+const NativeReactNativeFeatureFlags =
+  require('../../src/private/featureflags/specs/NativeReactNativeFeatureFlags').default;
 const {polyfillGlobal} = require('../Utilities/PolyfillFunctions');
 
 if (__DEV__) {
@@ -19,14 +21,6 @@ if (__DEV__) {
   }
 }
 
-// Currently, Hermes `Promise` is implemented via Internal Bytecode.
-const hasHermesPromiseQueuedToJSVM =
-  global.HermesInternal?.hasPromise?.() === true &&
-  global.HermesInternal?.useEngineQueue?.() === true;
-
-const hasNativePromise = isNativeFunction(Promise);
-const hasPromiseQueuedToJSVM = hasNativePromise || hasHermesPromiseQueuedToJSVM;
-
 // In bridgeless mode, timers are host functions installed from cpp.
 if (global.RN$Bridgeless !== true) {
   /**
@@ -54,15 +48,49 @@ if (global.RN$Bridgeless !== true) {
   defineLazyTimer('cancelAnimationFrame');
   defineLazyTimer('requestIdleCallback');
   defineLazyTimer('cancelIdleCallback');
+} else if (
+  // TODO remove this condition when bridgeless == modern scheduler everywhere.
+  NativeReactNativeFeatureFlags != null &&
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- false positive due to `use` prefix
+  ReactNativeFeatureFlags.useModernRuntimeScheduler()
+) {
+  polyfillGlobal(
+    'requestIdleCallback',
+    () =>
+      require('../../src/private/webapis/idlecallbacks/specs/NativeIdleCallbacks')
+        .default.requestIdleCallback,
+  );
+
+  polyfillGlobal(
+    'cancelIdleCallback',
+    () =>
+      require('../../src/private/webapis/idlecallbacks/specs/NativeIdleCallbacks')
+        .default.cancelIdleCallback,
+  );
 }
 
-/**
- * Set up immediate APIs, which is required to use the same microtask queue
- * as the Promise.
- */
-if (hasPromiseQueuedToJSVM) {
-  // When promise queues to the JSVM microtasks queue, we shim the immediate
-  // APIs via `queueMicrotask` to maintain the backward compatibility.
+// We need to check if the native module is available before accessing the
+// feature flag, because otherwise the API would throw an error in the legacy
+// architecture in OSS, where the native module isn't available.
+if (
+  NativeReactNativeFeatureFlags != null &&
+  ReactNativeFeatureFlags.enableMicrotasks()
+) {
+  // This is the flag that tells React to use `queueMicrotask` to batch state
+  // updates, instead of using the scheduler to schedule a regular task.
+  // We use a global variable because we don't currently have any other
+  // mechanism to pass feature flags from RN to React in OSS.
+  global.RN$enableMicrotasksInReact = true;
+
+  polyfillGlobal(
+    'queueMicrotask',
+    () =>
+      require('../../src/private/webapis/microtasks/specs/NativeMicrotasks')
+        .default.queueMicrotask,
+  );
+
+  // We shim the immediate APIs via `queueMicrotask` to maintain the backward
+  // compatibility.
   polyfillGlobal(
     'setImmediate',
     () => require('./Timers/immediateShim').setImmediate,
@@ -72,6 +100,12 @@ if (hasPromiseQueuedToJSVM) {
     () => require('./Timers/immediateShim').clearImmediate,
   );
 } else {
+  // Polyfill it with promise (regardless it's polyfilled or native) otherwise.
+  polyfillGlobal(
+    'queueMicrotask',
+    () => require('./Timers/queueMicrotask.js').default,
+  );
+
   // When promise was polyfilled hence is queued to the RN microtask queue,
   // we polyfill the immediate APIs as aliases to the ReactNativeMicrotask APIs.
   // Note that in bridgeless mode, immediate APIs are installed from cpp.
@@ -86,18 +120,3 @@ if (hasPromiseQueuedToJSVM) {
     );
   }
 }
-
-/**
- * Set up the microtask queueing API, which is required to use the same
- * microtask queue as the Promise.
- */
-if (hasHermesPromiseQueuedToJSVM) {
-  // Fast path for Hermes.
-  polyfillGlobal('queueMicrotask', () => global.HermesInternal?.enqueueJob);
-} else {
-  // Polyfill it with promise (regardless it's polyfilled or native) otherwise.
-  polyfillGlobal(
-    'queueMicrotask',
-    () => require('./Timers/queueMicrotask.js').default,
-  );
-}

package/Libraries/Debugging/DebuggingOverlayRegistry.js

@@ -62,9 +62,9 @@ class DebuggingOverlayRegistry {
   constructor() {
     if (reactDevToolsHook?.reactDevtoolsAgent != null) {
       this.#onReactDevToolsAgentAttached(reactDevToolsHook.reactDevtoolsAgent);
-      return;
     }
 
+    // There could be cases when frontend is disconnected and then connected again for the same React Native runtime.
     reactDevToolsHook?.on?.(
       'react-devtools',
       this.#onReactDevToolsAgentAttached,

package/Libraries/Image/Image.android.js

@@ -23,7 +23,9 @@ import {
 import {getImageSourcesFromImageProps} from './ImageSourceUtils';
 import {convertObjectFitToResizeMode} from './ImageUtils';
 import ImageViewNativeComponent from './ImageViewNativeComponent';
-import NativeImageLoaderAndroid from './NativeImageLoaderAndroid';
+import NativeImageLoaderAndroid, {
+  type ImageSize,
+} from './NativeImageLoaderAndroid';
 import resolveAssetSource from './resolveAssetSource';
 import TextInlineImageNativeComponent from './TextInlineImageNativeComponent';
 import * as React from 'react';
@@ -40,13 +42,15 @@ function generateRequestId() {
  */
 function getSize(
   url: string,
-  success: (width: number, height: number) => void,
+  success?: (width: number, height: number) => void,
   failure?: (error: mixed) => void,
-): void {
-  NativeImageLoaderAndroid.getSize(url)
-    .then(function (sizes) {
-      success(sizes.width, sizes.height);
-    })
+): void | Promise<ImageSize> {
+  const promise = NativeImageLoaderAndroid.getSize(url);
+  if (typeof success !== 'function') {
+    return promise;
+  }
+  promise
+    .then(sizes => success(sizes.width, sizes.height))
     .catch(
       failure ||
         function () {
@@ -64,13 +68,15 @@ function getSize(
 function getSizeWithHeaders(
   url: string,
   headers: {[string]: string, ...},
-  success: (width: number, height: number) => void,
+  success?: (width: number, height: number) => void,
   failure?: (error: mixed) => void,
-): void {
-  NativeImageLoaderAndroid.getSizeWithHeaders(url, headers)
-    .then(function (sizes) {
-      success(sizes.width, sizes.height);
-    })
+): void | Promise<ImageSize> {
+  const promise = NativeImageLoaderAndroid.getSizeWithHeaders(url, headers);
+  if (typeof success !== 'function') {
+    return promise;
+  }
+  promise
+    .then(sizes => success(sizes.width, sizes.height))
     .catch(
       failure ||
         function () {
@@ -171,7 +177,11 @@ let BaseImage: AbstractImageAndroid = React.forwardRef(
       ...restProps,
       style,
       shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd || onError),
+      // Both iOS and C++ sides expect to have "source" prop, whereas on Android it's "src"
+      // (for historical reasons). So in the latter case we populate both "src" and "source",
+      // in order to have a better alignment between platforms in the future.
       src: sources,
+      source: sources,
       /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
        * when making Flow check .android.js files. */
       headers: (source?.[0]?.headers || source?.headers: ?{[string]: string}),

package/Libraries/Image/Image.d.ts

@@ -325,20 +325,31 @@ export interface ImageProps extends ImagePropsBase {
   style?: StyleProp<ImageStyle> | undefined;
 }
 
+export interface ImageSize {
+  width: number;
+  height: number;
+}
+
 declare class ImageComponent extends React.Component<ImageProps> {}
 declare const ImageBase: Constructor<NativeMethods> & typeof ImageComponent;
 export class Image extends ImageBase {
+  static getSize(uri: string): Promise<ImageSize>;
   static getSize(
     uri: string,
     success: (width: number, height: number) => void,
     failure?: (error: any) => void,
-  ): any;
+  ): void;
+
+  static getSizeWithHeaders(
+    uri: string,
+    headers: {[index: string]: string},
+  ): Promise<ImageSize>;
   static getSizeWithHeaders(
     uri: string,
     headers: {[index: string]: string},
     success: (width: number, height: number) => void,
     failure?: (error: any) => void,
-  ): any;
+  ): void;
   static prefetch(url: string): Promise<boolean>;
   static prefetchWithMetadata(
     url: string,
@@ -368,16 +379,4 @@ export interface ImageBackgroundProps extends ImagePropsBase {
 declare class ImageBackgroundComponent extends React.Component<ImageBackgroundProps> {}
 declare const ImageBackgroundBase: Constructor<NativeMethods> &
   typeof ImageBackgroundComponent;
-export class ImageBackground extends ImageBackgroundBase {
-  resizeMode: ImageResizeMode;
-  getSize(
-    uri: string,
-    success: (width: number, height: number) => void,
-    failure: (error: any) => void,
-  ): any;
-  prefetch(url: string): any;
-  abortPrefetch?(requestId: number): void;
-  queryCache?(
-    urls: string[],
-  ): Promise<{[url: string]: 'memory' | 'disk' | 'disk/memory'}>;
-}
+export class ImageBackground extends ImageBackgroundBase {}

package/Libraries/Image/Image.ios.js

@@ -11,6 +11,7 @@
 import type {ImageStyle, ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
 import type {AbstractImageIOS, ImageIOS} from './ImageTypes.flow';
+import type {ImageSize} from './NativeImageLoaderAndroid';
 
 import {createRootTag} from '../ReactNative/RootTag';
 import flattenStyle from '../StyleSheet/flattenStyle';
@@ -29,15 +30,22 @@ import * as React from 'react';
 
 function getSize(
   uri: string,
-  success: (width: number, height: number) => void,
+  success?: (width: number, height: number) => void,
   failure?: (error: mixed) => void,
-): void {
-  NativeImageLoaderIOS.getSize(uri)
-    .then(([width, height]) => success(width, height))
+): void | Promise<ImageSize> {
+  const promise = NativeImageLoaderIOS.getSize(uri).then(([width, height]) => ({
+    width,
+    height,
+  }));
+  if (typeof success !== 'function') {
+    return promise;
+  }
+  promise
+    .then(sizes => success(sizes.width, sizes.height))
     .catch(
       failure ||
         function () {
-          console.warn('Failed to get size for image ' + uri);
+          console.warn('Failed to get size for image: ' + uri);
         },
     );
 }
@@ -45,13 +53,15 @@ function getSize(
 function getSizeWithHeaders(
   uri: string,
   headers: {[string]: string, ...},
-  success: (width: number, height: number) => void,
+  success?: (width: number, height: number) => void,
   failure?: (error: mixed) => void,
-): void {
-  NativeImageLoaderIOS.getSizeWithHeaders(uri, headers)
-    .then(function (sizes) {
-      success(sizes.width, sizes.height);
-    })
+): void | Promise<ImageSize> {
+  const promise = NativeImageLoaderIOS.getSizeWithHeaders(uri, headers);
+  if (typeof success !== 'function') {
+    return promise;
+  }
+  promise
+    .then(sizes => success(sizes.width, sizes.height))
     .catch(
       failure ||
         function () {

package/Libraries/Image/Image.win32.js

@@ -34,7 +34,7 @@ import * as React from 'react';
 
 function getSize(
   uri: string,
-  success: (width: number, height: number) => void,
+  success?: (width: number, height: number) => void,
   // $FlowFixMe[unclear-type]
   failure?: (error: any) => void,
 ) {
@@ -45,7 +45,7 @@ function getSize(
     .catch(
       failure ||
         function () {
-          console.warn('Failed to get size for image ' + uri);
+          console.warn('Failed to get size for image: ' + uri);
         },
     );
   */
@@ -55,6 +55,7 @@ function getSize(
     (width: number, height: number, err?: string) => {
       // $FlowFixMe[sketchy-null-string]
       if (!err) {
+        // $FlowFixMe[not-a-function]
         success(width, height);
       } else {
         if (failure) {
@@ -71,12 +72,13 @@ function getSize(
 function getSizeWithHeaders(
   uri: string,
   headers: {[string]: string, ...},
-  success: (width: number, height: number) => void,
+  success?: (width: number, height: number) => void,
   failure?: (error: mixed) => void,
   // $FlowFixMe[unclear-type]
 ): any {
   return NativeImageLoaderWin32.getSizeWithHeaders(uri, headers)
     .then(function (sizes) {
+      // $FlowFixMe[not-a-function]
       success(sizes.width, sizes.height);
     })
     .catch(

package/Libraries/Image/ImageProps.js

@@ -59,6 +59,22 @@ type AndroidImageProps = $ReadOnly<{|
   loadingIndicatorSource?: ?(number | $ReadOnly<{|uri: string|}>),
   progressiveRenderingEnabled?: ?boolean,
   fadeDuration?: ?number,
+
+  /**
+   * The mechanism that should be used to resize the image when the image's
+   * dimensions differ from the image view's dimensions. Defaults to `'auto'`.
+   * See https://reactnative.dev/docs/image#resizemethod-android
+   */
+  resizeMethod?: ?('auto' | 'resize' | 'scale'),
+
+  /**
+   * When the `resizeMethod` is set to `resize`, the destination dimensions are
+   * multiplied by this value. The `scale` method is used to perform the
+   * remainder of the resize.
+   * This is used to produce higher quality images when resizing to small dimensions.
+   * Defaults to 1.0.
+   */
+  resizeMultiplier?: ?number,
 |}>;
 
 export type ImageProps = {|
@@ -183,11 +199,6 @@ export type ImageProps = {|
    */
   onLoadStart?: ?() => void,
 
-  /**
-   * See https://reactnative.dev/docs/image#resizemethod
-   */
-  resizeMethod?: ?('auto' | 'resize' | 'scale'),
-
   /**
    * The image source (either a remote URL or a local file resource).
    *

package/Libraries/Image/ImageTypes.flow.js

@@ -18,12 +18,17 @@ import typeof TextInlineImageNativeComponent from './TextInlineImageNativeCompon
 import * as React from 'react';
 
 type ImageComponentStaticsIOS = $ReadOnly<{
-  getSize: (
+  getSize(uri: string): Promise<{width: number, height: number}>,
+  getSize(
     uri: string,
     success: (width: number, height: number) => void,
     failure?: (error: mixed) => void,
-  ) => void,
+  ): void,
 
+  getSizeWithHeaders(
+    uri: string,
+    headers: {[string]: string, ...},
+  ): Promise<{width: number, height: number}>,
   getSizeWithHeaders(
     uri: string,
     headers: {[string]: string, ...},

package/Libraries/Image/ImageUtils.js

@@ -17,5 +17,6 @@ export function convertObjectFitToResizeMode(objectFit: string): ResizeMode {
     fill: 'stretch',
     'scale-down': 'contain',
   };
+  // $FlowFixMe[invalid-computed-prop]
   return objectFitMap[objectFit];
 }

package/Libraries/Image/ImageViewNativeComponent.js

@@ -82,13 +82,14 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
         validAttributes: {
           blurRadius: true,
           internal_analyticTag: true,
+          resizeMethod: true,
           resizeMode: true,
+          resizeMultiplier: true,
           tintColor: {
             process: require('../StyleSheet/processColor').default,
           },
           borderBottomLeftRadius: true,
           borderTopLeftRadius: true,
-          resizeMethod: true,
           src: true,
           // NOTE: New Architecture expects this to be called `source`,
           // regardless of the platform, therefore propagate it as well.

package/Libraries/Inspector/ElementBox.js

@@ -20,10 +20,9 @@ const React = require('react');
 
 class ElementBox extends React.Component<$FlowFixMeProps> {
   render(): React.Node {
-    // $FlowFixMe[underconstrained-implicit-instantiation]
     const style = flattenStyle(this.props.style) || {};
-    let margin = resolveBoxStyle('margin', style);
-    let padding = resolveBoxStyle('padding', style);
+    let margin: ?$ReadOnly<Style> = resolveBoxStyle('margin', style);
+    let padding: ?$ReadOnly<Style> = resolveBoxStyle('padding', style);
 
     const frameStyle = {...this.props.frame};
     const contentStyle: {width: number, height: number} = {
@@ -122,13 +121,17 @@ function resolveSizeInPlace(
   direction: string,
   dimension: string,
 ) {
+  // $FlowFixMe[invalid-computed-prop]
   if (style[direction] !== null && typeof style[direction] === 'string') {
     if (style[direction].indexOf('%') !== -1) {
       // $FlowFixMe[prop-missing]
       style[direction] =
+        // $FlowFixMe[invalid-computed-prop]
         (parseFloat(style[direction]) / 100.0) *
+        // $FlowFixMe[invalid-computed-prop]
         Dimensions.get('window')[dimension];
     }
+    // $FlowFixMe[invalid-computed-prop]
     if (style[direction] === 'auto') {
       // Ignore auto sizing in frame drawing due to complexity of correctly rendering this
       // $FlowFixMe[prop-missing]

package/Libraries/Inspector/ElementProperties.js

@@ -71,7 +71,7 @@ class ElementProperties extends React.Component<Props> {
             <View style={styles.col}>
               <StyleInspector style={style} />
             </View>
-            {<BoxInspector style={style} frame={this.props.frame} />}
+            <BoxInspector style={style} frame={this.props.frame} />
           </View>
         </View>
       </TouchableWithoutFeedback>

package/Libraries/Interaction/TouchHistoryMath.js

@@ -48,10 +48,10 @@ const TouchHistoryMath = {
           ofCurrent && isXAxis
             ? oneTouchData.currentPageX
             : ofCurrent && !isXAxis
-            ? oneTouchData.currentPageY
-            : !ofCurrent && isXAxis
-            ? oneTouchData.previousPageX
-            : oneTouchData.previousPageY;
+              ? oneTouchData.currentPageY
+              : !ofCurrent && isXAxis
+                ? oneTouchData.previousPageX
+                : oneTouchData.previousPageY;
         count = 1;
       }
     } else {

package/Libraries/IntersectionObserver/IntersectionObserverManager.js

@@ -67,19 +67,11 @@ function setTargetForInstanceHandle(
   instanceHandleToTargetMap.set(key, target);
 }
 
-function unsetTargetForInstanceHandle(instanceHandle: mixed): void {
-  // $FlowExpectedError[incompatible-type] instanceHandle is typed as mixed but we know it's an object and we need it to be to use it as a key in a WeakMap.
-  const key: interface {} = instanceHandle;
-  instanceHandleToTargetMap.delete(key);
-}
-
 // The mapping between ReactNativeElement and their corresponding shadow node
 // also needs to be kept here because React removes the link when unmounting.
-// We also keep the instance handle so we don't have to retrieve it again
-// from the target to unobserve.
-const targetToShadowNodeAndInstanceHandleMap: WeakMap<
+const targetToShadowNodeMap: WeakMap<
   ReactNativeElement,
-  [ReturnType<typeof getShadowNode>, mixed],
+  ReturnType<typeof getShadowNode>,
 > = new WeakMap();
 
 /**
@@ -163,12 +155,8 @@ export function observe({
   // access it even after the instance handle has been unmounted.
   setTargetForInstanceHandle(instanceHandle, target);
 
-  // Same for the mapping between the target and its shadow node
-  // and instance handle.
-  targetToShadowNodeAndInstanceHandleMap.set(target, [
-    targetShadowNode,
-    instanceHandle,
-  ]);
+  // Same for the mapping between the target and its shadow node.
+  targetToShadowNodeMap.set(target, targetShadowNode);
 
   if (!isConnected) {
     NativeIntersectionObserver.connect(notifyIntersectionObservers);
@@ -201,26 +189,18 @@ export function unobserve(
     return;
   }
 
-  const targetShadowNodeAndInstanceHandle =
-    targetToShadowNodeAndInstanceHandleMap.get(target);
-  if (targetShadowNodeAndInstanceHandle == null) {
+  const targetShadowNode = targetToShadowNodeMap.get(target);
+  if (targetShadowNode == null) {
     console.error(
       'IntersectionObserverManager: could not find registration data for target',
     );
     return;
   }
 
-  const [targetShadowNode, instanceHandle] = targetShadowNodeAndInstanceHandle;
-
   NativeIntersectionObserver.unobserve(
     intersectionObserverId,
     targetShadowNode,
   );
-
-  // We can guarantee we won't receive any more entries for this target,
-  // so we don't need to keep the mappings anymore.
-  unsetTargetForInstanceHandle(instanceHandle);
-  targetToShadowNodeAndInstanceHandleMap.delete(target);
 }
 
 /**

package/Libraries/JSInspector/NetworkAgent.js

@@ -232,7 +232,7 @@ class Interceptor {
     const event: LoadingFinishedEvent = {
       requestId: String(id),
       timestamp: JSInspector.getTimestamp(),
-      encodedDataLength: encodedDataLength,
+      encodedDataLength,
     };
     this._agent.sendEvent('loadingFinished', event);
   }