react-native-windows 0.75.3 → 0.76.0-preview.1

package/Libraries/Text/TextNativeComponent.js

@@ -16,8 +16,9 @@ import type {TextProps} from './TextProps';
 import {createViewConfig} from '../NativeComponent/ViewConfig';
 import UIManager from '../ReactNative/UIManager';
 import createReactNativeComponentClass from '../Renderer/shims/createReactNativeComponentClass';
+import Platform from '../Utilities/Platform';
 
-type NativeTextProps = $ReadOnly<{
+export type NativeTextProps = $ReadOnly<{
   ...TextProps,
   isHighlighted?: ?boolean,
   selectionColor?: ?ProcessedColorValue,

package/Libraries/TurboModule/TurboModuleRegistry.js

@@ -16,52 +16,25 @@ const NativeModules = require('../BatchedBridge/NativeModules');
 
 const turboModuleProxy = global.__turboModuleProxy;
 
-const moduleLoadHistory = {
-  NativeModules: ([]: Array<string>),
-  TurboModules: ([]: Array<string>),
-  NotFound: ([]: Array<string>),
-};
+const useLegacyNativeModuleInterop =
+  global.RN$Bridgeless !== true || global.RN$TurboInterop === true;
 
-function isBridgeless() {
-  return global.RN$Bridgeless === true;
-}
-
-function isTurboModuleInteropEnabled() {
-  return global.RN$TurboInterop === true;
-}
-
-// TODO(154308585): Remove "module not found" debug info logging
-function shouldReportDebugInfo() {
-  return true;
-}
-
-// TODO(148943970): Consider reversing the lookup here:
-// Lookup on __turboModuleProxy, then lookup on nativeModuleProxy
 function requireModule<T: TurboModule>(name: string): ?T {
-  if (!isBridgeless() || isTurboModuleInteropEnabled()) {
-    // Backward compatibility layer during migration.
-    const legacyModule = NativeModules[name];
-    if (legacyModule != null) {
-      if (shouldReportDebugInfo()) {
-        moduleLoadHistory.NativeModules.push(name);
-      }
-      return ((legacyModule: $FlowFixMe): T);
-    }
-  }
-
   if (turboModuleProxy != null) {
     const module: ?T = turboModuleProxy(name);
     if (module != null) {
-      if (shouldReportDebugInfo()) {
-        moduleLoadHistory.TurboModules.push(name);
-      }
       return module;
     }
   }
 
-  if (shouldReportDebugInfo() && !moduleLoadHistory.NotFound.includes(name)) {
-    moduleLoadHistory.NotFound.push(name);
+  if (useLegacyNativeModuleInterop) {
+    // Backward compatibility layer during migration.
+    const legacyModule: ?T = NativeModules[name];
+    if (legacyModule != null) {
+      return legacyModule;
+    }
   }
+
   return null;
 }
 
@@ -71,20 +44,10 @@ export function get<T: TurboModule>(name: string): ?T {
 
 export function getEnforcing<T: TurboModule>(name: string): T {
   const module = requireModule<T>(name);
-  let message =
+  invariant(
+    module != null,
     `TurboModuleRegistry.getEnforcing(...): '${name}' could not be found. ` +
-    'Verify that a module by this name is registered in the native binary.';
-
-  if (shouldReportDebugInfo()) {
-    message +=
-      ' Bridgeless mode: ' + (isBridgeless() ? 'true' : 'false') + '. ';
-    message +=
-      'TurboModule interop: ' +
-      (isTurboModuleInteropEnabled() ? 'true' : 'false') +
-      '. ';
-    message += 'Modules loaded: ' + JSON.stringify(moduleLoadHistory);
-  }
-
-  invariant(module != null, message);
+      'Verify that a module by this name is registered in the native binary.',
+  );
   return module;
 }

package/Libraries/Types/CodegenTypes.js

@@ -42,4 +42,6 @@ type DefaultTypes = number | boolean | string | $ReadOnlyArray<string>;
 // eslint-disable-next-line no-unused-vars
 export type WithDefault<Type: DefaultTypes, Value: ?Type | string> = ?Type;
 
-export type EventEmitter<T> = (handler: (T) => mixed) => EventSubscription;
+export type EventEmitter<T> = (
+  handler: (T) => void | Promise<void>,
+) => EventSubscription;

package/Libraries/Utilities/Appearance.js

@@ -8,100 +8,124 @@
  * @flow strict-local
  */
 
+import type {EventSubscription} from '../vendor/emitter/EventEmitter';
+import type {AppearancePreferences, ColorSchemeName} from './NativeAppearance';
+import typeof INativeAppearance from './NativeAppearance';
+
 import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
-import Platform from '../Utilities/Platform';
-import EventEmitter, {
-  type EventSubscription,
-} from '../vendor/emitter/EventEmitter';
+import EventEmitter from '../vendor/emitter/EventEmitter';
 import {isAsyncDebugging} from './DebugEnvironment';
-import NativeAppearance, {
-  type AppearancePreferences,
-  type ColorSchemeName,
-} from './NativeAppearance';
 import invariant from 'invariant';
 
-type AppearanceListener = (preferences: AppearancePreferences) => void;
-const eventEmitter = new EventEmitter<{
-  change: [AppearancePreferences],
-}>();
+type Appearance = {
+  colorScheme: ?ColorSchemeName,
+};
 
-type NativeAppearanceEventDefinitions = {
-  appearanceChanged: [AppearancePreferences],
+let lazyState: ?{
+  +NativeAppearance: INativeAppearance,
+  // Cache the color scheme to reduce the cost of reading it between changes.
+  // NOTE: If `NativeAppearance` is null, this will always be null.
+  appearance: ?Appearance,
+  // NOTE: This is non-nullable to make it easier for `onChangedListener` to
+  // return a non-nullable `EventSubscription` value. This is not the common
+  // path, so we do not have to over-optimize it.
+  +eventEmitter: EventEmitter<{change: [Appearance]}>,
 };
 
-if (NativeAppearance) {
-  const nativeEventEmitter =
-    new NativeEventEmitter<NativeAppearanceEventDefinitions>(
-      // T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
-      // If you want to use the native module on other platforms, please remove this condition and test its behavior
-      Platform.OS !== 'ios' ? null : NativeAppearance,
-    );
-  nativeEventEmitter.addListener(
-    'appearanceChanged',
-    (newAppearance: AppearancePreferences) => {
-      const {colorScheme} = newAppearance;
-      invariant(
-        colorScheme === 'dark' ||
-          colorScheme === 'light' ||
-          colorScheme == null,
-        "Unrecognized color scheme. Did you mean 'dark' or 'light'?",
-      );
-      eventEmitter.emit('change', {colorScheme});
-    },
-  );
+/**
+ * Ensures that all state and listeners are lazily initialized correctly.
+ */
+function getState(): $NonMaybeType<typeof lazyState> {
+  if (lazyState != null) {
+    return lazyState;
+  }
+  const eventEmitter = new EventEmitter<{change: [Appearance]}>();
+  // NOTE: Avoid initializing `NativeAppearance` until it is actually used.
+  const NativeAppearance = require('./NativeAppearance').default;
+  if (NativeAppearance == null) {
+    // Assign `null` to avoid re-initializing on subsequent invocations.
+    lazyState = {
+      NativeAppearance: null,
+      appearance: null,
+      eventEmitter,
+    };
+  } else {
+    const state: $NonMaybeType<typeof lazyState> = {
+      NativeAppearance,
+      appearance: null,
+      eventEmitter,
+    };
+    new NativeEventEmitter<{
+      appearanceChanged: [AppearancePreferences],
+    }>(NativeAppearance).addListener('appearanceChanged', newAppearance => {
+      state.appearance = {
+        colorScheme: toColorScheme(newAppearance.colorScheme),
+      };
+      eventEmitter.emit('change', state.appearance);
+    });
+    lazyState = state;
+  }
+  return lazyState;
 }
 
-module.exports = {
-  /**
-   * Note: Although color scheme is available immediately, it may change at any
-   * time. Any rendering logic or styles that depend on this should try to call
-   * this function on every render, rather than caching the value (for example,
-   * using inline styles rather than setting a value in a `StyleSheet`).
-   *
-   * Example: `const colorScheme = Appearance.getColorScheme();`
-   *
-   * @returns {?ColorSchemeName} Value for the color scheme preference.
-   */
-  getColorScheme(): ?ColorSchemeName {
-    if (__DEV__) {
-      if (isAsyncDebugging) {
-        // Hard code light theme when using the async debugger as
-        // sync calls aren't supported
-        return 'light';
-      }
+/**
+ * Returns the current color scheme preference. This value may change, so the
+ * value should not be cached without either listening to changes or using
+ * the `useColorScheme` hook.
+ */
+export function getColorScheme(): ?ColorSchemeName {
+  if (__DEV__) {
+    if (isAsyncDebugging) {
+      // Hard code light theme when using the async debugger as
+      // sync calls aren't supported
+      return 'light';
     }
+  }
+  let colorScheme = null;
+  const state = getState();
+  const {NativeAppearance} = state;
+  if (NativeAppearance != null) {
+    if (state.appearance == null) {
+      // Lazily initialize `state.appearance`. This should only
+      // happen once because we never reassign a null value to it.
+      state.appearance = {
+        colorScheme: toColorScheme(NativeAppearance.getColorScheme()),
+      };
+    }
+    colorScheme = state.appearance.colorScheme;
+  }
+  return colorScheme;
+}
 
-    // TODO: (hramos) T52919652 Use ?ColorSchemeName once codegen supports union
-    const nativeColorScheme: ?string =
-      NativeAppearance == null
-        ? null
-        : NativeAppearance.getColorScheme() || null;
-    invariant(
-      nativeColorScheme === 'dark' ||
-        nativeColorScheme === 'light' ||
-        nativeColorScheme == null,
-      "Unrecognized color scheme. Did you mean 'dark' or 'light'?",
-    );
-    return nativeColorScheme;
-  },
-
-  setColorScheme(colorScheme: ?ColorSchemeName): void {
-    const nativeColorScheme = colorScheme == null ? 'unspecified' : colorScheme;
-
-    invariant(
-      colorScheme === 'dark' || colorScheme === 'light' || colorScheme == null,
-      "Unrecognized color scheme. Did you mean 'dark', 'light' or null?",
-    );
+/**
+ * Updates the current color scheme to the supplied value.
+ */
+export function setColorScheme(colorScheme: ?ColorSchemeName): void {
+  const state = getState();
+  const {NativeAppearance} = state;
+  if (NativeAppearance != null) {
+    NativeAppearance.setColorScheme(colorScheme ?? 'unspecified');
+    state.appearance = {colorScheme};
+  }
+}
 
-    if (NativeAppearance != null && NativeAppearance.setColorScheme != null) {
-      NativeAppearance.setColorScheme(nativeColorScheme);
-    }
-  },
+/**
+ * Add an event handler that is fired when appearance preferences change.
+ */
+export function addChangeListener(
+  listener: ({colorScheme: ?ColorSchemeName}) => void,
+): EventSubscription {
+  const {eventEmitter} = getState();
+  return eventEmitter.addListener('change', listener);
+}
 
-  /**
-   * Add an event handler that is fired when appearance preferences change.
-   */
-  addChangeListener(listener: AppearanceListener): EventSubscription {
-    return eventEmitter.addListener('change', listener);
-  },
-};
+/**
+ * TODO: (hramos) T52919652 Use ?ColorSchemeName once codegen supports union
+ */
+function toColorScheme(colorScheme: ?string): ?ColorSchemeName {
+  invariant(
+    colorScheme === 'dark' || colorScheme === 'light' || colorScheme == null,
+    "Unrecognized color scheme. Did you mean 'dark', 'light' or null?",
+  );
+  return colorScheme;
+}

package/Libraries/Utilities/DevLoadingView.js

@@ -9,7 +9,7 @@
  */
 
 import processColor from '../StyleSheet/processColor';
-import Appearance from './Appearance';
+import {getColorScheme} from './Appearance';
 import NativeDevLoadingView from './NativeDevLoadingView';
 
 const COLOR_SCHEME = {
@@ -39,9 +39,7 @@ module.exports = {
   showMessage(message: string, type: 'load' | 'refresh') {
     if (NativeDevLoadingView) {
       const colorScheme =
-        Appearance.getColorScheme() === 'dark'
-          ? COLOR_SCHEME.dark
-          : COLOR_SCHEME.default;
+        getColorScheme() === 'dark' ? COLOR_SCHEME.dark : COLOR_SCHEME.default;
 
       const colorSet = colorScheme[type];
 

package/Libraries/Utilities/HMRClient.js

@@ -126,7 +126,7 @@ const HMRClient: HMRClientNativeInterface = {
           data: data.map(item =>
             typeof item === 'string'
               ? item
-              : prettyFormat(item, {
+              : prettyFormat.format(item, {
                   escapeString: true,
                   highlight: true,
                   maxDepth: 3,
@@ -379,6 +379,7 @@ function showCompileError() {
 
   /* $FlowFixMe[class-object-subtyping] added when improving typing for this
    * parameters */
+  // $FlowFixMe[incompatible-type]
   const error: ExtendedError = new Error(message);
   // Symbolicating compile errors is wasted effort
   // because the stack trace is meaningless:

package/Libraries/Utilities/ReactNativeTestTools.js

@@ -115,7 +115,7 @@ function expectNoConsoleError() {
 
 async function expectRendersMatchingSnapshot(
   name: string,
-  ComponentProvider: () => React.Element<any>,
+  ComponentProvider: () => React.MixedElement,
   unmockComponent: () => mixed,
 ) {
   let instance;

package/Libraries/Utilities/createPerformanceLogger.js

@@ -15,11 +15,8 @@ import type {
   Timespan,
 } from './IPerformanceLogger';
 
-import * as Systrace from '../Performance/Systrace';
 import infoLog from './infoLog';
 
-const _cookies: {[key: string]: number, ...} = {};
-
 const PRINT_TO_CONSOLE: false = false; // Type as false to prevent accidentally committing `true`;
 
 export const getCurrentTimestamp: () => number =
@@ -233,7 +230,6 @@ class PerformanceLogger implements IPerformanceLogger {
       startTime: timestamp,
       startExtras: extras,
     };
-    _cookies[key] = Systrace.beginAsyncEvent(key);
     if (PRINT_TO_CONSOLE) {
       infoLog('PerformanceLogger.js', 'start: ' + key);
     }
@@ -277,11 +273,6 @@ class PerformanceLogger implements IPerformanceLogger {
     if (PRINT_TO_CONSOLE) {
       infoLog('PerformanceLogger.js', 'end: ' + key);
     }
-
-    if (_cookies[key] != null) {
-      Systrace.endAsyncEvent(key, _cookies[key]);
-      delete _cookies[key];
-    }
   }
 }
 

package/Libraries/Utilities/stringifyViewConfig.js

@@ -0,0 +1,22 @@
+/**
+ * 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
+ */
+
+export default function stringifyViewConfig(viewConfig: any): string {
+  return JSON.stringify(
+    viewConfig,
+    (key, val) => {
+      if (typeof val === 'function') {
+        return `ƒ ${val.name}`;
+      }
+      return val;
+    },
+    2,
+  );
+}

package/Libraries/Utilities/useColorScheme.js

@@ -12,14 +12,14 @@
 
 import type {ColorSchemeName} from './NativeAppearance';
 
-import Appearance from './Appearance';
+import {addChangeListener, getColorScheme} from './Appearance';
 import {useSyncExternalStore} from 'react';
 
 const subscribe = (onStoreChange: () => void) => {
-  const appearanceSubscription = Appearance.addChangeListener(onStoreChange);
+  const appearanceSubscription = addChangeListener(onStoreChange);
   return () => appearanceSubscription.remove();
 };
 
 export default function useColorScheme(): ?ColorSchemeName {
-  return useSyncExternalStore(subscribe, Appearance.getColorScheme);
+  return useSyncExternalStore(subscribe, getColorScheme);
 }

package/Libraries/WebSocket/WebSocket.js

@@ -68,7 +68,7 @@ type WebSocketEventDefinitions = {
  * See https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
  * See https://github.com/websockets/ws
  */
-class WebSocket extends (EventTarget(...WEBSOCKET_EVENTS): any) {
+class WebSocket extends (EventTarget(...WEBSOCKET_EVENTS): typeof EventTarget) {
   static CONNECTING: number = CONNECTING;
   static OPEN: number = OPEN;
   static CLOSING: number = CLOSING;

package/Libraries/promiseRejectionTrackingOptions.js

@@ -27,7 +27,7 @@ let rejectionTrackingOptions: $NonMaybeType<Parameters<enable>[0]> = {
       stack = error.stack;
     } else {
       try {
-        message = require('pretty-format')(rejection);
+        message = require('pretty-format').format(rejection);
       } catch {
         message =
           typeof rejection === 'string'

package/Libraries/vendor/emitter/EventEmitter.js

@@ -35,11 +35,9 @@ interface Registration<TArgs> {
   +remove: () => void;
 }
 
-// $FlowFixMe[deprecated-type]
-type Registry<TEventToArgsMap: {...}> = $ObjMap<
-  TEventToArgsMap,
-  <TArgs>(TArgs) => Set<Registration<TArgs>>,
->;
+type Registry<TEventToArgsMap: {...}> = {
+  [K in keyof TEventToArgsMap]: Set<Registration<TEventToArgsMap[K]>>,
+};
 
 /**
  * EventEmitter manages listeners and publishes events to them.
@@ -64,6 +62,7 @@ type Registry<TEventToArgsMap: {...}> = $ObjMap<
 export default class EventEmitter<TEventToArgsMap: {...}>
   implements IEventEmitter<TEventToArgsMap>
 {
+  // $FlowFixMe[incompatible-type]
   #registry: Registry<TEventToArgsMap> = {};
 
   /**
@@ -113,6 +112,7 @@ export default class EventEmitter<TEventToArgsMap: {...}>
       // Copy `registrations` to take a snapshot when we invoke `emit`, in case
       // registrations are added or removed when listeners are invoked.
       for (const registration of Array.from(registrations)) {
+        // $FlowFixMe[incompatible-call]
         registration.listener.apply(registration.context, args);
       }
     }
@@ -125,6 +125,7 @@ export default class EventEmitter<TEventToArgsMap: {...}>
     eventType?: ?TEvent,
   ): void {
     if (eventType == null) {
+      // $FlowFixMe[incompatible-type]
       this.#registry = {};
     } else {
       delete this.#registry[eventType];

package/Microsoft.ReactNative/ComponentView.idl

@@ -34,6 +34,15 @@ namespace Microsoft.ReactNative
     All           = 0x0000000F,
   };
 
+  enum FocusNavigationDirection
+  {
+    None,
+    Next,
+    Previous,
+    First,
+    Last,
+  };
+
   [webhosthidden]
   [experimental]
   interface IComponentState 
@@ -46,6 +55,7 @@ namespace Microsoft.ReactNative
   [experimental]
   [webhosthidden]
   runtimeclass LosingFocusEventArgs : Microsoft.ReactNative.Composition.Input.RoutedEventArgs {
+    FocusNavigationDirection Direction { get; };
     Microsoft.ReactNative.ComponentView NewFocusedComponent { get; };
     Microsoft.ReactNative.ComponentView OldFocusedComponent { get; };
 
@@ -56,6 +66,7 @@ namespace Microsoft.ReactNative
   [experimental]
   [webhosthidden]
   runtimeclass GettingFocusEventArgs : Microsoft.ReactNative.Composition.Input.RoutedEventArgs {
+    FocusNavigationDirection Direction { get; };
     Microsoft.ReactNative.ComponentView NewFocusedComponent { get; };
     Microsoft.ReactNative.ComponentView OldFocusedComponent { get; };
 

package/Microsoft.ReactNative/Composition.Input.idl

@@ -106,6 +106,7 @@ namespace Microsoft.ReactNative.Composition.Input
     UInt64 Timestamp { get; };
     PointerPoint GetOffsetPoint(
         Windows.Foundation.Point offset);
+    Microsoft.UI.Input.PointerPoint Inner { get; };
   };
 
   runtimeclass PointerRoutedEventArgs : RoutedEventArgs

package/Microsoft.ReactNative/CompositionSwitcher.idl

@@ -3,6 +3,7 @@
 
 #include "NamespaceRedirect.h"
 #include "DocString.h"
+import "Composition.Input.idl";
 
 namespace Microsoft.ReactNative.Composition.Experimental
 {
@@ -112,6 +113,8 @@ namespace Microsoft.ReactNative.Composition.Experimental
     Windows.Foundation.Numerics.Vector3 ScrollPosition { get; };
     void ScrollBy(Windows.Foundation.Numerics.Vector3 offset, Boolean animate);
     void TryUpdatePosition(Windows.Foundation.Numerics.Vector3 position, Boolean animate);
+    void OnPointerPressed(Microsoft.ReactNative.Composition.Input.PointerRoutedEventArgs args);
+    Boolean Horizontal;
   }
 
   [webhosthidden]

package/Microsoft.ReactNative/Fabric/AbiComponentDescriptor.cpp

@@ -109,14 +109,14 @@ facebook::react::Props::Shared AbiComponentDescriptor::cloneProps(
           ->CreateProps(nullptr);
   shadowNodeProps->SetUserProps(userProps);
 
-  rawProps.iterateOverValues(
-      [&](facebook::react::RawPropsPropNameHash hash, const char *propName, facebook::react::RawValue const &fn) {
-        shadowNodeProps.get()->setProp(context, hash, propName, fn);
-        userProps.SetProp(
-            hash,
-            winrt::to_hstring(propName),
-            winrt::make<winrt::Microsoft::ReactNative::DynamicReader>(folly::dynamic(fn)));
-      });
+  const auto &dynamic = static_cast<folly::dynamic>(rawProps);
+  for (const auto &pair : dynamic.items()) {
+    const auto &propName = pair.first.getString();
+    auto hash = RAW_PROPS_KEY_HASH(propName);
+    shadowNodeProps.get()->setProp(context, hash, propName.c_str(), facebook::react::RawValue(pair.second));
+    userProps.SetProp(
+        hash, winrt::to_hstring(propName), winrt::make<winrt::Microsoft::ReactNative::DynamicReader>(pair.second));
+  }
 
   return shadowNodeProps;
 };
@@ -162,7 +162,7 @@ facebook::react::State::Shared AbiComponentDescriptor::createState(
 facebook::react::ShadowNodeFamily::Shared AbiComponentDescriptor::createFamily(
     facebook::react::ShadowNodeFamilyFragment const &fragment) const {
   auto eventEmitter = std::make_shared<const ConcreteEventEmitter>(
-      std::make_shared<facebook::react::EventTarget>(fragment.instanceHandle), eventDispatcher_);
+      std::make_shared<facebook::react::EventTarget>(fragment.instanceHandle, fragment.surfaceId), eventDispatcher_);
   return std::make_shared<facebook::react::ShadowNodeFamily>(
       fragment, std::move(eventEmitter), eventDispatcher_, *this);
 }

package/Microsoft.ReactNative/Fabric/AbiViewComponentDescriptor.cpp

@@ -106,14 +106,14 @@ facebook::react::Props::Shared AbiViewComponentDescriptor::cloneProps(
           ->CreateProps(viewProps);
   shadowNodeProps->SetUserProps(userProps, viewProps);
 
-  rawProps.iterateOverValues(
-      [&](facebook::react::RawPropsPropNameHash hash, const char *propName, facebook::react::RawValue const &fn) {
-        shadowNodeProps.get()->setProp(context, hash, propName, fn);
-        userProps.SetProp(
-            hash,
-            winrt::to_hstring(propName),
-            winrt::make<winrt::Microsoft::ReactNative::DynamicReader>(folly::dynamic(fn)));
-      });
+  const auto &dynamic = static_cast<folly::dynamic>(rawProps);
+  for (const auto &pair : dynamic.items()) {
+    const auto &propName = pair.first.getString();
+    auto hash = RAW_PROPS_KEY_HASH(propName);
+    shadowNodeProps.get()->setProp(context, hash, propName.c_str(), facebook::react::RawValue(pair.second));
+    userProps.SetProp(
+        hash, winrt::to_hstring(propName), winrt::make<winrt::Microsoft::ReactNative::DynamicReader>(pair.second));
+  }
 
   return shadowNodeProps;
 };
@@ -157,7 +157,7 @@ facebook::react::State::Shared AbiViewComponentDescriptor::createState(
 facebook::react::ShadowNodeFamily::Shared AbiViewComponentDescriptor::createFamily(
     facebook::react::ShadowNodeFamilyFragment const &fragment) const {
   auto eventEmitter = std::make_shared<const ConcreteEventEmitter>(
-      std::make_shared<facebook::react::EventTarget>(fragment.instanceHandle), eventDispatcher_);
+      std::make_shared<facebook::react::EventTarget>(fragment.instanceHandle, fragment.surfaceId), eventDispatcher_);
   return std::make_shared<facebook::react::ShadowNodeFamily>(
       fragment, std::move(eventEmitter), eventDispatcher_, *this);
 }