react-native 0.72.0-rc.1 → 0.72.0-rc.3

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -46,13 +46,6 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   flexWrap: true,
   gap: true,
   height: true,
-  inset: true,
-  insetBlock: true,
-  insetBlockEnd: true,
-  insetBlockStart: true,
-  insetInline: true,
-  insetInlineEnd: true,
-  insetInlineStart: true,
   justifyContent: true,
   left: true,
   margin: true,

package/Libraries/Core/ReactNativeVersion.js

@@ -13,5 +13,5 @@ exports.version = {
   major: 0,
   minor: 72,
   patch: 0,
-  prerelease: 'rc.1',
+  prerelease: 'rc.3',
 };

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -258,14 +258,6 @@ const validAttributesForNonEventProps = {
   top: true,
   bottom: true,
 
-  inset: true,
-  insetBlock: true,
-  insetBlockEnd: true,
-  insetBlockStart: true,
-  insetInline: true,
-  insetInlineEnd: true,
-  insetInlineStart: true,
-
   position: true,
 
   style: ReactNativeStyleAttributes,

package/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -236,14 +236,6 @@ const validAttributesForNonEventProps = {
   bottom: true,
   left: true,
 
-  inset: true,
-  insetBlock: true,
-  insetBlockEnd: true,
-  insetBlockStart: true,
-  insetInline: true,
-  insetInlineEnd: true,
-  insetInlineStart: true,
-
   width: true,
   height: true,
 

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -69,13 +69,6 @@ export interface FlexStyle {
   flexShrink?: number | undefined;
   flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | undefined;
   height?: DimensionValue | undefined;
-  inset?: DimensionValue | undefined;
-  insetBlock?: DimensionValue | undefined;
-  insetBlockEnd?: DimensionValue | undefined;
-  insetBlockStart?: DimensionValue | undefined;
-  insetInline?: DimensionValue | undefined;
-  insetInlineEnd?: DimensionValue | undefined;
-  insetInlineStart?: DimensionValue | undefined;
   justifyContent?:
     | 'flex-start'
     | 'flex-end'

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -134,80 +134,6 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    */
   top?: DimensionValue,
 
-  /** `inset` is a shorthand that corresponds to the top, right, bottom, and/or left properties.
-   *
-   *  It works similarly to `inset` in CSS, but in React Native you
-   *  must use points or percentages. Ems and other units are not supported.
-   *
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset
-   *  for more details of how `inset` affects layout.
-   */
-  inset?: DimensionValue,
-
-  /** `insetBlock` is a shorthand that corresponds to the `insetBlockStart` and `insetBlockEnd` properties.
-   *
-   *  It works similarly to `inset-block` in CSS, but in React Native you
-   *  must use points or percentages. Ems and other units are not supported.
-   *
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block
-   *  for more details of how `inset-block` affects layout.
-   */
-  insetBlock?: DimensionValue,
-
-  /** `insetBlockEnd` is a logical property that sets the length that an
-   *  element is offset in the block direction from its ending edge.
-   *
-   *  It works similarly to `inset-block-end` in CSS, but in React Native you
-   *  must use points or percentages. Ems and other units are not supported.
-   *
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end
-   *  for more details of how `inset-block-end` affects layout.
-   */
-  insetBlockEnd?: DimensionValue,
-
-  /** `insetBlockStart` is a logical property that sets the length that an
-   *  element is offset in the block direction from its starting edge.
-   *
-   *  It works similarly to `inset-block-start` in CSS, but in React Native you
-   *  must use points or percentages. Ems and other units are not supported.
-   *
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start
-   *  for more details of how `inset-block-start` affects layout.
-   */
-  insetBlockStart?: DimensionValue,
-
-  /** `insetInline` is a shorthand that corresponds to the `insetInlineStart` and `insetInlineEnd` properties.
-   *
-   *  It works similarly to `inset-inline` in CSS, but in React Native you
-   *  must use points or percentages. Ems and other units are not supported.
-   *
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline
-   *  for more details of how `inset-inline` affects layout.
-   */
-  insetInline?: DimensionValue,
-
-  /** `insetInlineEnd` is a logical property that sets the length that an
-   *  element is offset in the starting inline direction.
-   *
-   *  It works similarly to `inset-inline-end` in CSS, but in React Native you
-   *  must use points or percentages. Ems and other units are not supported.
-   *
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end
-   *  for more details of how `inset-inline-end` affects layout.
-   */
-  insetInlineEnd?: DimensionValue,
-
-  /** `insetInlineStart` is a logical property that sets the length that an
-   *  element is offset in the starting inline direction.
-   *
-   *  It works similarly to `inset-inline-start` in CSS, but in React Native you
-   *  must use points or percentages. Ems and other units are not supported.
-   *
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start
-   *  for more details of how `inset-inline-start` affects layout.
-   */
-  insetInlineStart?: DimensionValue,
-
   /** `minWidth` is the minimum width for this component, in logical pixels.
    *
    *  It works similarly to `min-width` in CSS, but in React Native you

package/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m

@@ -256,21 +256,21 @@ static void *TextFieldSelectionObservingContext = &TextFieldSelectionObservingCo
 
 - (void)textViewDidChange:(__unused UITextView *)textView
 {
-  if (_ignoreNextTextInputCall && [_lastStringStateWasUpdatedWith isEqual:_backedTextInputView.attributedText]) {
+  if (_ignoreNextTextInputCall) {
     _ignoreNextTextInputCall = NO;
     return;
   }
-  _lastStringStateWasUpdatedWith = _backedTextInputView.attributedText;
   _textDidChangeIsComing = NO;
   [_backedTextInputView.textInputDelegate textInputDidChange];
 }
 
 - (void)textViewDidChangeSelection:(__unused UITextView *)textView
 {
-  if (![_lastStringStateWasUpdatedWith isEqual:_backedTextInputView.attributedText]) {
+  if (_lastStringStateWasUpdatedWith && ![_lastStringStateWasUpdatedWith isEqual:_backedTextInputView.attributedText]) {
     [self textViewDidChange:_backedTextInputView];
     _ignoreNextTextInputCall = YES;
   }
+  _lastStringStateWasUpdatedWith = _backedTextInputView.attributedText;
   [self textViewProbablyDidChangeSelection];
 }
 

package/React/Base/RCTVersion.m

@@ -24,7 +24,7 @@ NSDictionary* RCTGetReactNativeVersion(void)
                   RCTVersionMajor: @(0),
                   RCTVersionMinor: @(72),
                   RCTVersionPatch: @(0),
-                  RCTVersionPrerelease: @"rc.1",
+                  RCTVersionPrerelease: @"rc.3",
                   };
   });
   return __rnVersion;

package/React/CoreModules/RCTDevMenu.mm

@@ -428,10 +428,10 @@ RCT_EXPORT_METHOD(show)
       ? UIAlertControllerStyleActionSheet
       : UIAlertControllerStyleAlert;
 
-  NSString *debugMenuType = self.bridge ? @"Bridge" : @"Bridgeless";
-  NSString *debugMenuTitle = [NSString stringWithFormat:@"React Native Debug Menu (%@)", debugMenuType];
+  NSString *devMenuType = self.bridge ? @"Bridge" : @"Bridgeless";
+  NSString *devMenuTitle = [NSString stringWithFormat:@"React Native Dev Menu (%@)", devMenuType];
 
-  _actionSheet = [UIAlertController alertControllerWithTitle:debugMenuTitle message:description preferredStyle:style];
+  _actionSheet = [UIAlertController alertControllerWithTitle:devMenuTitle message:description preferredStyle:style];
 
   NSArray<RCTDevMenuItem *> *items = [self _menuItemsToPresent];
   for (RCTDevMenuItem *item in items) {

package/React/Fabric/Mounting/ComponentViews/Image/RCTImageComponentView.mm

@@ -14,6 +14,7 @@
 #import <react/renderer/components/image/ImageComponentDescriptor.h>
 #import <react/renderer/components/image/ImageEventEmitter.h>
 #import <react/renderer/components/image/ImageProps.h>
+#import <react/renderer/core/CoreFeatures.h>
 #import <react/renderer/imagemanager/ImageRequest.h>
 #import <react/renderer/imagemanager/RCTImagePrimitivesConversions.h>
 
@@ -97,8 +98,18 @@ using namespace facebook::react;
 - (void)_setStateAndResubscribeImageResponseObserver:(ImageShadowNode::ConcreteState::Shared const &)state
 {
   if (_state) {
-    auto &observerCoordinator = _state->getData().getImageRequest().getObserverCoordinator();
+    auto const &imageRequest = _state->getData().getImageRequest();
+    auto &observerCoordinator = imageRequest.getObserverCoordinator();
     observerCoordinator.removeObserver(_imageResponseObserverProxy);
+    if (CoreFeatures::cancelImageDownloadsOnRecycle) {
+      // Cancelling image request because we are no longer observing it.
+      // This is not 100% correct place to do this because we may want to
+      // re-create RCTImageComponentView with the same image and if it
+      // was cancelled before downloaded, download is not resumed.
+      // This will only become issue if we decouple life cycle of a
+      // ShadowNode from ComponentView, which is not something we do now.
+      imageRequest.cancel();
+    }
   }
 
   _state = state;

package/React/Fabric/RCTSurfacePresenter.mm

@@ -285,6 +285,10 @@ static BackgroundExecutor RCTGetBackgroundExecutor()
     CoreFeatures::cacheNSTextStorage = true;
   }
 
+  if (reactNativeConfig && reactNativeConfig->getBool("react_fabric:cancel_image_downloads_on_recycle")) {
+    CoreFeatures::cancelImageDownloadsOnRecycle = true;
+  }
+
   auto componentRegistryFactory =
       [factory = wrapManagedObject(_mountingManager.componentViewRegistry.componentViewFactory)](
           EventDispatcher::Weak const &eventDispatcher, ContextContainer::Shared const &contextContainer) {

package/ReactAndroid/gradle.properties

@@ -1,4 +1,4 @@
-VERSION_NAME=0.72.0-rc.1
+VERSION_NAME=0.72.0-rc.3
 GROUP=com.facebook.react
 
 # JVM Versions

package/ReactAndroid/src/main/java/com/facebook/react/animated/NativeAnimatedModule.java

@@ -295,6 +295,16 @@ public class NativeAnimatedModule extends NativeAnimatedModuleSpec
     mCurrentFrameNumber++;
   }
 
+  @Override
+  public void willMountItems(UIManager uiManager) {
+    // noop
+  }
+
+  @Override
+  public void didMountItems(UIManager uiManager) {
+    // noop
+  }
+
   // For FabricUIManager only
   @Override
   @UiThread

package/ReactAndroid/src/main/java/com/facebook/react/bridge/ReactContext.java

@@ -21,6 +21,7 @@ import com.facebook.common.logging.FLog;
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.infer.annotation.ThreadConfined;
 import com.facebook.proguard.annotations.DoNotStrip;
+import com.facebook.react.bridge.interop.InteropModuleRegistry;
 import com.facebook.react.bridge.queue.MessageQueueThread;
 import com.facebook.react.bridge.queue.ReactQueueConfiguration;
 import com.facebook.react.common.LifecycleState;
@@ -69,6 +70,8 @@ public class ReactContext extends ContextWrapper {
   private @Nullable JSExceptionHandler mJSExceptionHandler;
   private @Nullable JSExceptionHandler mExceptionHandlerWrapper;
   private @Nullable WeakReference<Activity> mCurrentActivity;
+
+  private @Nullable InteropModuleRegistry mInteropModuleRegistry;
   private boolean mIsInitialized = false;
 
   public ReactContext(Context base) {
@@ -93,6 +96,7 @@ public class ReactContext extends ContextWrapper {
 
     ReactQueueConfiguration queueConfig = catalystInstance.getReactQueueConfiguration();
     initializeMessageQueueThreads(queueConfig);
+    initializeInteropModules();
   }
 
   /** Initialize message queue threads using a ReactQueueConfiguration. */
@@ -120,6 +124,14 @@ public class ReactContext extends ContextWrapper {
     mIsInitialized = true;
   }
 
+  protected void initializeInteropModules() {
+    mInteropModuleRegistry = new InteropModuleRegistry();
+  }
+
+  protected void initializeInteropModules(ReactContext reactContext) {
+    mInteropModuleRegistry = reactContext.mInteropModuleRegistry;
+  }
+
   public void resetPerfStats() {
     if (mNativeModulesMessageQueueThread != null) {
       mNativeModulesMessageQueueThread.resetPerfStats();
@@ -163,6 +175,10 @@ public class ReactContext extends ContextWrapper {
       }
       throw new IllegalStateException(EARLY_JS_ACCESS_EXCEPTION_MESSAGE);
     }
+    if (mInteropModuleRegistry != null
+        && mInteropModuleRegistry.shouldReturnInteropModule(jsInterface)) {
+      return mInteropModuleRegistry.getInteropModule(jsInterface);
+    }
     return mCatalystInstance.getJSModule(jsInterface);
   }
 
@@ -546,4 +562,17 @@ public class ReactContext extends ContextWrapper {
     Assertions.assertNotNull(mCatalystInstance).registerSegment(segmentId, path);
     Assertions.assertNotNull(callback).invoke();
   }
+
+  /**
+   * Register a {@link JavaScriptModule} within the Interop Layer so that can be consumed whenever
+   * getJSModule is invoked.
+   *
+   * <p>This method is internal to React Native and should not be used externally.
+   */
+  public <T extends JavaScriptModule> void internal_registerInteropModule(
+      Class<T> interopModuleInterface, Object interopModule) {
+    if (mInteropModuleRegistry != null) {
+      mInteropModuleRegistry.registerInteropModule(interopModuleInterface, interopModule);
+    }
+  }
 }

package/ReactAndroid/src/main/java/com/facebook/react/bridge/UIManagerListener.java

@@ -12,10 +12,33 @@ public interface UIManagerListener {
   /**
    * Called right before view updates are dispatched at the end of a batch. This is useful if a
    * module needs to add UIBlocks to the queue before it is flushed.
+   *
+   * <p>This is called by Paper only.
    */
   void willDispatchViewUpdates(UIManager uiManager);
-  /* Called right after view updates are dispatched for a frame. */
+  /**
+   * Called on UIThread right before view updates are executed.
+   *
+   * <p>This is called by Fabric only.
+   */
+  void willMountItems(UIManager uiManager);
+  /**
+   * Called on UIThread right after view updates are executed.
+   *
+   * <p>This is called by Fabric only.
+   */
+  void didMountItems(UIManager uiManager);
+  /**
+   * Called on UIThread right after view updates are dispatched for a frame. Note that this will be
+   * called for every frame even if there are no updates.
+   *
+   * <p>This is called by Fabric only.
+   */
   void didDispatchMountItems(UIManager uiManager);
-  /* Called right after scheduleMountItems is called in Fabric, after a new tree is committed. */
+  /**
+   * Called right after scheduleMountItems is called in Fabric, after a new tree is committed.
+   *
+   * <p>This is called by Fabric only.
+   */
   void didScheduleMountItems(UIManager uiManager);
 }

package/ReactAndroid/src/main/java/com/facebook/react/bridge/interop/InteropModuleRegistry.java

@@ -0,0 +1,56 @@
+/*
+ * 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.
+ */
+
+package com.facebook.react.bridge.interop;
+
+import androidx.annotation.Nullable;
+import com.facebook.react.bridge.JavaScriptModule;
+import com.facebook.react.config.ReactFeatureFlags;
+import java.util.HashMap;
+
+/**
+ * A utility class that takes care of returning {@link JavaScriptModule} which are used for the
+ * Fabric Interop Layer. This allows us to override the returned classes once the user is invoking
+ * `ReactContext.getJsModule()`.
+ *
+ * <p>Currently we only support a `RCTEventEmitter` re-implementation, being `InteropEventEmitter`
+ * but this class can support other re-implementation in the future.
+ */
+public class InteropModuleRegistry {
+
+  @SuppressWarnings("rawtypes")
+  private final HashMap<Class, Object> supportedModules;
+
+  public InteropModuleRegistry() {
+    this.supportedModules = new HashMap<>();
+  }
+
+  public <T extends JavaScriptModule> boolean shouldReturnInteropModule(Class<T> requestedModule) {
+    return checkReactFeatureFlagsConditions() && supportedModules.containsKey(requestedModule);
+  }
+
+  @Nullable
+  public <T extends JavaScriptModule> T getInteropModule(Class<T> requestedModule) {
+    if (checkReactFeatureFlagsConditions()) {
+      //noinspection unchecked
+      return (T) supportedModules.get(requestedModule);
+    } else {
+      return null;
+    }
+  }
+
+  public <T extends JavaScriptModule> void registerInteropModule(
+      Class<T> interopModuleInterface, Object interopModule) {
+    if (checkReactFeatureFlagsConditions()) {
+      supportedModules.put(interopModuleInterface, interopModule);
+    }
+  }
+
+  private boolean checkReactFeatureFlagsConditions() {
+    return ReactFeatureFlags.enableFabricRenderer && ReactFeatureFlags.unstable_useFabricInterop;
+  }
+}

package/ReactAndroid/src/main/java/com/facebook/react/config/ReactFeatureFlags.java

@@ -34,6 +34,14 @@ public class ReactFeatureFlags {
    */
   public static volatile boolean enableFabricRenderer = false;
 
+  /**
+   * Should this application enable the Fabric Interop Layer for Android? If yes, the application
+   * will behave so that it can accept non-Fabric components and render them on Fabric. This toggle
+   * is controlling extra logic such as custom event dispatching that are needed for the Fabric
+   * Interop Layer to work correctly.
+   */
+  public static volatile boolean unstable_useFabricInterop = false;
+
   /**
    * Feature flag to enable the new bridgeless architecture. Note: Enabling this will force enable
    * the following flags: `useTurboModules` & `enableFabricRenderer`.

package/ReactAndroid/src/main/java/com/facebook/react/defaults/DefaultNewArchitectureEntryPoint.kt

@@ -31,6 +31,7 @@ object DefaultNewArchitectureEntryPoint {
   ) {
     ReactFeatureFlags.useTurboModules = turboModulesEnabled
     ReactFeatureFlags.enableFabricRenderer = fabricEnabled
+    ReactFeatureFlags.unstable_useFabricInterop = fabricEnabled
 
     this.privateFabricEnabled = fabricEnabled
     this.privateTurboModulesEnabled = turboModulesEnabled

package/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevSupportManagerBase.java

@@ -24,6 +24,7 @@ import android.util.Pair;
 import android.view.Gravity;
 import android.view.View;
 import android.widget.EditText;
+import android.widget.LinearLayout;
 import android.widget.TextView;
 import android.widget.Toast;
 import androidx.annotation.Nullable;
@@ -553,17 +554,30 @@ public abstract class DevSupportManagerBase implements DevSupportManager {
       return;
     }
 
-    final TextView textView = new TextView(getApplicationContext());
-    textView.setText("React Native DevMenu (" + getUniqueTag() + ")");
-    textView.setPadding(0, 50, 0, 0);
-    textView.setGravity(Gravity.CENTER);
-    textView.setTextColor(Color.BLACK);
-    textView.setTextSize(17);
-    textView.setTypeface(textView.getTypeface(), Typeface.BOLD);
+    final LinearLayout header = new LinearLayout(getApplicationContext());
+    header.setOrientation(LinearLayout.VERTICAL);
+
+    final TextView title = new TextView(getApplicationContext());
+    title.setText("React Native Dev Menu (" + getUniqueTag() + ")");
+    title.setPadding(0, 50, 0, 0);
+    title.setGravity(Gravity.CENTER);
+    title.setTextColor(Color.DKGRAY);
+    title.setTextSize(16);
+    title.setTypeface(title.getTypeface(), Typeface.BOLD);
+
+    final TextView jsExecutorLabel = new TextView(getApplicationContext());
+    jsExecutorLabel.setText(getJSExecutorDescription());
+    jsExecutorLabel.setPadding(0, 20, 0, 0);
+    jsExecutorLabel.setGravity(Gravity.CENTER);
+    jsExecutorLabel.setTextColor(Color.GRAY);
+    jsExecutorLabel.setTextSize(14);
+
+    header.addView(title);
+    header.addView(jsExecutorLabel);
 
     mDevOptionsDialog =
         new AlertDialog.Builder(context)
-            .setCustomTitle(textView)
+            .setCustomTitle(header)
             .setItems(
                 options.keySet().toArray(new String[0]),
                 new DialogInterface.OnClickListener() {
@@ -587,6 +601,10 @@ public abstract class DevSupportManagerBase implements DevSupportManager {
     }
   }
 
+  private String getJSExecutorDescription() {
+    return "Running " + getReactInstanceDevHelper().getJavaScriptExecutorFactory().toString();
+  }
+
   /**
    * {@link ReactInstanceDevCommandsHandler} is responsible for enabling/disabling dev support when
    * a React view is attached/detached or when application state changes (e.g. the application is

package/ReactAndroid/src/main/java/com/facebook/react/fabric/FabricUIManager.java

@@ -56,6 +56,7 @@ import com.facebook.react.config.ReactFeatureFlags;
 import com.facebook.react.fabric.events.EventBeatManager;
 import com.facebook.react.fabric.events.EventEmitterWrapper;
 import com.facebook.react.fabric.events.FabricEventEmitter;
+import com.facebook.react.fabric.interop.InteropEventEmitter;
 import com.facebook.react.fabric.mounting.MountItemDispatcher;
 import com.facebook.react.fabric.mounting.MountingManager;
 import com.facebook.react.fabric.mounting.SurfaceMountingManager;
@@ -81,6 +82,7 @@ import com.facebook.react.uimanager.ViewManagerRegistry;
 import com.facebook.react.uimanager.events.EventCategoryDef;
 import com.facebook.react.uimanager.events.EventDispatcher;
 import com.facebook.react.uimanager.events.EventDispatcherImpl;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
 import com.facebook.react.views.text.TextLayoutManager;
 import com.facebook.react.views.text.TextLayoutManagerMapBuffer;
 import java.util.HashMap;
@@ -390,6 +392,11 @@ public class FabricUIManager implements UIManager, LifecycleEventListener {
 
       ReactMarker.addFabricListener(mDevToolsReactPerfLogger);
     }
+    if (ReactFeatureFlags.unstable_useFabricInterop) {
+      InteropEventEmitter interopEventEmitter = new InteropEventEmitter(mReactApplicationContext);
+      mReactApplicationContext.internal_registerInteropModule(
+          RCTEventEmitter.class, interopEventEmitter);
+    }
   }
 
   // This is called on the JS thread (see CatalystInstanceImpl).
@@ -1171,6 +1178,20 @@ public class FabricUIManager implements UIManager, LifecycleEventListener {
   }
 
   private class MountItemDispatchListener implements MountItemDispatcher.ItemDispatchListener {
+    @Override
+    public void willMountItems() {
+      for (UIManagerListener listener : mListeners) {
+        listener.willMountItems(FabricUIManager.this);
+      }
+    }
+
+    @Override
+    public void didMountItems() {
+      for (UIManagerListener listener : mListeners) {
+        listener.didMountItems(FabricUIManager.this);
+      }
+    }
+
     @Override
     public void didDispatchMountItems() {
       for (UIManagerListener listener : mListeners) {

package/ReactAndroid/src/main/java/com/facebook/react/fabric/interop/InteropEvent.java

@@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+
+package com.facebook.react.fabric.interop;
+
+import androidx.annotation.Nullable;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.common.annotations.VisibleForTesting;
+import com.facebook.react.uimanager.events.Event;
+
+/**
+ * An {@link Event} class used by the {@link InteropEventEmitter}. This class is just holding the
+ * event name and the data which is received by the `receiveEvent` method and will be passed over
+ * the the {@link com.facebook.react.uimanager.events.EventDispatcher}
+ */
+class InteropEvent extends Event<InteropEvent> {
+
+  private final String mName;
+  private final WritableMap mEventData;
+
+  InteropEvent(String name, @Nullable WritableMap eventData, int surfaceId, int viewTag) {
+    super(surfaceId, viewTag);
+    mName = name;
+    mEventData = eventData;
+  }
+
+  @Override
+  public String getEventName() {
+    return mName;
+  }
+
+  @Override
+  @VisibleForTesting
+  public WritableMap getEventData() {
+    return mEventData;
+  }
+}

package/ReactAndroid/src/main/java/com/facebook/react/fabric/interop/InteropEventEmitter.java

@@ -0,0 +1,65 @@
+/*
+ * 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.
+ */
+
+package com.facebook.react.fabric.interop;
+
+import androidx.annotation.Nullable;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.WritableArray;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.common.annotations.VisibleForTesting;
+import com.facebook.react.uimanager.UIManagerHelper;
+import com.facebook.react.uimanager.events.EventDispatcher;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
+
+/**
+ * A reimplementation of {@link RCTEventEmitter} which is using a {@link EventDispatcher} under the
+ * hood.
+ *
+ * <p>On Fabric, you're supposed to use {@link EventDispatcher} to dispatch events. However, we
+ * provide an interop layer for non-Fabric migrated components.
+ *
+ * <p>This instance will be returned if the user is invoking `context.getJsModule(RCTEventEmitter)
+ * and is providing support for the `receiveEvent` method, so that non-Fabric ViewManagers can
+ * continue to deliver events also when Fabric is turned on.
+ */
+public class InteropEventEmitter implements RCTEventEmitter {
+
+  private final ReactContext mReactContext;
+
+  private @Nullable EventDispatcher mEventDispatcherOverride;
+
+  public InteropEventEmitter(ReactContext reactContext) {
+    mReactContext = reactContext;
+  }
+
+  @Override
+  public void receiveEvent(int targetReactTag, String eventName, @Nullable WritableMap eventData) {
+    EventDispatcher dispatcher;
+    if (mEventDispatcherOverride != null) {
+      dispatcher = mEventDispatcherOverride;
+    } else {
+      dispatcher = UIManagerHelper.getEventDispatcherForReactTag(mReactContext, targetReactTag);
+    }
+    int surfaceId = UIManagerHelper.getSurfaceId(mReactContext);
+    if (dispatcher != null) {
+      dispatcher.dispatchEvent(new InteropEvent(eventName, eventData, surfaceId, targetReactTag));
+    }
+  }
+
+  @Override
+  public void receiveTouches(
+      String eventName, WritableArray touches, WritableArray changedIndices) {
+    throw new UnsupportedOperationException(
+        "EventEmitter#receiveTouches is not supported by the Fabric Interop Layer");
+  }
+
+  @VisibleForTesting
+  void overrideEventDispatcher(EventDispatcher eventDispatcherOverride) {
+    mEventDispatcherOverride = eventDispatcherOverride;
+  }
+}