react-native 0.72.0-rc.0 → 0.72.0-rc.2

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.0',
+  prerelease: 'rc.2',
 };

package/Libraries/Core/ReactNativeVersionCheck.js

@@ -39,8 +39,12 @@ exports.checkVersions = function checkVersions(): void {
   }
 };
 
+// Note: in OSS, the prerelease version is usually 0.Y.0-rc.W, so it is a string and not a number
+// Then we need to keep supporting that object shape.
 function _formatVersion(
-  version: (typeof Platform)['constants']['reactNativeVersion'],
+  version:
+    | (typeof Platform)['constants']['reactNativeVersion']
+    | {major: number, minor: number, patch: number, prerelease: ?string},
 ): string {
   return (
     `${version.major}.${version.minor}.${version.patch}` +

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/ReactNative/UIManager.js

@@ -9,7 +9,6 @@
  */
 
 import type {RootTag} from '../Types/RootTagTypes';
-import type {Spec as FabricUIManagerSpec} from './FabricUIManager';
 import type {Spec} from './NativeUIManager';
 
 import {getFabricUIManager} from './FabricUIManager';
@@ -175,6 +174,33 @@ const UIManager = {
       );
     }
   },
+
+  dispatchViewManagerCommand(
+    reactTag: number,
+    commandName: number | string,
+    commandArgs: any[],
+  ) {
+    if (isFabricReactTag(reactTag)) {
+      const FabricUIManager = nullthrows(getFabricUIManager());
+      const shadowNode =
+        FabricUIManager.findShadowNodeByTag_DEPRECATED(reactTag);
+      if (shadowNode) {
+        // Transform the accidental CommandID into a CommandName which is the stringified number.
+        // The interop layer knows how to convert this number into the right method name.
+        // Stringify a string is a no-op, so it's safe.
+        commandName = `${commandName}`;
+        FabricUIManager.dispatchCommand(shadowNode, commandName, commandArgs);
+      }
+    } else {
+      UIManagerImpl.dispatchViewManagerCommand(
+        reactTag,
+        // We have some legacy components that are actually already using strings. ¯\_(ツ)_/¯
+        // $FlowFixMe[incompatible-call]
+        commandName,
+        commandArgs,
+      );
+    }
+  },
 };
 
 module.exports = UIManager;

package/Libraries/Renderer/implementations/ReactFabric-dev.js

@@ -3419,6 +3419,23 @@ function mountSafeCallback_NOT_REALLY_SAFE(context, callback) {
     return callback.apply(context, arguments);
   };
 }
+function warnForStyleProps(props, validAttributes) {
+  {
+    for (var key in validAttributes.style) {
+      if (!(validAttributes[key] || props[key] === undefined)) {
+        error(
+          "You are setting the style `{ %s" +
+            ": ... }` as a prop. You " +
+            "should nest it in a style object. " +
+            "E.g. `{ style: { %s" +
+            ": ... } }`",
+          key,
+          key
+        );
+      }
+    }
+  }
+}
 
 // Modules provided by RN:
 var emptyObject = {};
@@ -5100,7 +5117,8 @@ var _nativeFabricUIManage = nativeFabricUIManager,
   FabricDefaultPriority = _nativeFabricUIManage.unstable_DefaultEventPriority,
   FabricDiscretePriority = _nativeFabricUIManage.unstable_DiscreteEventPriority,
   fabricGetCurrentEventPriority =
-    _nativeFabricUIManage.unstable_getCurrentEventPriority;
+    _nativeFabricUIManage.unstable_getCurrentEventPriority,
+  _setNativeProps = _nativeFabricUIManage.setNativeProps;
 var getViewConfigForType =
   ReactNativePrivateInterface.ReactNativeViewConfigRegistry.get; // Counter for uniquely identifying views.
 // % 10 === 1 means it is a rootTag.
@@ -5199,10 +5217,15 @@ var ReactFabricHostComponent = /*#__PURE__*/ (function() {
 
   _proto.setNativeProps = function setNativeProps(nativeProps) {
     {
-      error("Warning: setNativeProps is not currently supported in Fabric");
+      warnForStyleProps(nativeProps, this.viewConfig.validAttributes);
     }
 
-    return;
+    var updatePayload = create(nativeProps, this.viewConfig.validAttributes);
+    var stateNode = this._internalInstanceHandle.stateNode;
+
+    if (stateNode != null && updatePayload != null) {
+      _setNativeProps(stateNode.node, updatePayload);
+    }
   }; // This API (addEventListener, removeEventListener) attempts to adhere to the
   // w3 Level2 Events spec as much as possible, treating HostComponent as a DOM node.
   //

package/Libraries/Renderer/implementations/ReactFabric-prod.js

@@ -1922,6 +1922,7 @@ var _nativeFabricUIManage = nativeFabricUIManager,
   FabricDiscretePriority = _nativeFabricUIManage.unstable_DiscreteEventPriority,
   fabricGetCurrentEventPriority =
     _nativeFabricUIManage.unstable_getCurrentEventPriority,
+  _setNativeProps = _nativeFabricUIManage.setNativeProps,
   getViewConfigForType =
     ReactNativePrivateInterface.ReactNativeViewConfigRegistry.get,
   nextReactTag = 2;
@@ -1979,7 +1980,18 @@ var ReactFabricHostComponent = (function() {
         );
     }
   };
-  _proto.setNativeProps = function() {};
+  _proto.setNativeProps = function(nativeProps) {
+    nativeProps = diffProperties(
+      null,
+      emptyObject,
+      nativeProps,
+      this.viewConfig.validAttributes
+    );
+    var stateNode = this._internalInstanceHandle.stateNode;
+    null != stateNode &&
+      null != nativeProps &&
+      _setNativeProps(stateNode.node, nativeProps);
+  };
   _proto.addEventListener_unstable = function(eventType, listener, options) {
     if ("string" !== typeof eventType)
       throw Error("addEventListener_unstable eventType must be a string");

package/Libraries/Renderer/implementations/ReactFabric-profiling.js

@@ -1981,6 +1981,7 @@ var _nativeFabricUIManage = nativeFabricUIManager,
   FabricDiscretePriority = _nativeFabricUIManage.unstable_DiscreteEventPriority,
   fabricGetCurrentEventPriority =
     _nativeFabricUIManage.unstable_getCurrentEventPriority,
+  _setNativeProps = _nativeFabricUIManage.setNativeProps,
   getViewConfigForType =
     ReactNativePrivateInterface.ReactNativeViewConfigRegistry.get,
   nextReactTag = 2;
@@ -2038,7 +2039,18 @@ var ReactFabricHostComponent = (function() {
         );
     }
   };
-  _proto.setNativeProps = function() {};
+  _proto.setNativeProps = function(nativeProps) {
+    nativeProps = diffProperties(
+      null,
+      emptyObject,
+      nativeProps,
+      this.viewConfig.validAttributes
+    );
+    var stateNode = this._internalInstanceHandle.stateNode;
+    null != stateNode &&
+      null != nativeProps &&
+      _setNativeProps(stateNode.node, nativeProps);
+  };
   _proto.addEventListener_unstable = function(eventType, listener, options) {
     if ("string" !== typeof eventType)
       throw Error("addEventListener_unstable eventType must be a string");

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.0",
+                  RCTVersionPrerelease: @"rc.2",
                   };
   });
   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/LegacyViewManagerInterop/RCTLegacyViewManagerInteropCoordinatorAdapter.mm

@@ -50,7 +50,7 @@
 
 - (void)handleCommand:(NSString *)commandName args:(NSArray *)args
 {
-  [_coordinator handleCommand:commandName args:args reactTag:_tag];
+  [_coordinator handleCommand:commandName args:args reactTag:_tag paperView:self.paperView];
 }
 
 @end

package/ReactAndroid/gradle.properties

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

package/ReactAndroid/src/main/java/com/facebook/react/ReactDelegate.java

@@ -11,6 +11,7 @@ import android.app.Activity;
 import android.content.Intent;
 import android.os.Bundle;
 import android.view.KeyEvent;
+import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.react.devsupport.DoubleTapReloadRecognizer;
@@ -33,6 +34,8 @@ public class ReactDelegate {
 
   private ReactNativeHost mReactNativeHost;
 
+  private boolean mFabricEnabled = false;
+
   public ReactDelegate(
       Activity activity,
       ReactNativeHost reactNativeHost,
@@ -45,6 +48,20 @@ public class ReactDelegate {
     mReactNativeHost = reactNativeHost;
   }
 
+  public ReactDelegate(
+      Activity activity,
+      ReactNativeHost reactNativeHost,
+      @Nullable String appKey,
+      @Nullable Bundle launchOptions,
+      boolean fabricEnabled) {
+    mActivity = activity;
+    mMainComponentName = appKey;
+    mLaunchOptions = composeLaunchOptions(launchOptions);
+    mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer();
+    mReactNativeHost = reactNativeHost;
+    mFabricEnabled = fabricEnabled;
+  }
+
   public void onHostResume() {
     if (getReactNativeHost().hasInstance()) {
       if (mActivity instanceof DefaultHardwareBackBtnHandler) {
@@ -109,7 +126,9 @@ public class ReactDelegate {
   }
 
   protected ReactRootView createRootView() {
-    return new ReactRootView(mActivity);
+    ReactRootView reactRootView = new ReactRootView(mActivity);
+    reactRootView.setIsFabric(isFabricEnabled());
+    return reactRootView;
   }
 
   /**
@@ -144,4 +163,24 @@ public class ReactDelegate {
   public ReactInstanceManager getReactInstanceManager() {
     return getReactNativeHost().getReactInstanceManager();
   }
+
+  /**
+   * Override this method if you wish to selectively toggle Fabric for a specific surface. This will
+   * also control if Concurrent Root (React 18) should be enabled or not.
+   *
+   * @return true if Fabric is enabled for this Activity, false otherwise.
+   */
+  protected boolean isFabricEnabled() {
+    return mFabricEnabled;
+  }
+
+  private @NonNull Bundle composeLaunchOptions(Bundle composedLaunchOptions) {
+    if (isFabricEnabled()) {
+      if (composedLaunchOptions == null) {
+        composedLaunchOptions = new Bundle();
+      }
+      composedLaunchOptions.putBoolean("concurrentRoot", true);
+    }
+    return composedLaunchOptions;
+  }
 }

package/ReactAndroid/src/main/java/com/facebook/react/ReactFragment.java

@@ -16,6 +16,7 @@ import android.view.KeyEvent;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
+import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.fragment.app.Fragment;
 import com.facebook.react.modules.core.PermissionAwareActivity;
@@ -29,6 +30,7 @@ public class ReactFragment extends Fragment implements PermissionAwareActivity {
 
   protected static final String ARG_COMPONENT_NAME = "arg_component_name";
   protected static final String ARG_LAUNCH_OPTIONS = "arg_launch_options";
+  protected static final String ARG_FABRIC_ENABLED = "arg_fabric_enabled";
 
   private ReactDelegate mReactDelegate;
 
@@ -40,13 +42,16 @@ public class ReactFragment extends Fragment implements PermissionAwareActivity {
 
   /**
    * @param componentName The name of the react native component
+   * @param fabricEnabled Flag to enable Fabric for ReactFragment
    * @return A new instance of fragment ReactFragment.
    */
-  private static ReactFragment newInstance(String componentName, Bundle launchOptions) {
+  private static ReactFragment newInstance(
+      String componentName, Bundle launchOptions, Boolean fabricEnabled) {
     ReactFragment fragment = new ReactFragment();
     Bundle args = new Bundle();
     args.putString(ARG_COMPONENT_NAME, componentName);
     args.putBundle(ARG_LAUNCH_OPTIONS, launchOptions);
+    args.putBoolean(ARG_FABRIC_ENABLED, fabricEnabled);
     fragment.setArguments(args);
     return fragment;
   }
@@ -57,15 +62,18 @@ public class ReactFragment extends Fragment implements PermissionAwareActivity {
     super.onCreate(savedInstanceState);
     String mainComponentName = null;
     Bundle launchOptions = null;
+    Boolean fabricEnabled = null;
     if (getArguments() != null) {
       mainComponentName = getArguments().getString(ARG_COMPONENT_NAME);
       launchOptions = getArguments().getBundle(ARG_LAUNCH_OPTIONS);
+      fabricEnabled = getArguments().getBoolean(ARG_FABRIC_ENABLED);
     }
     if (mainComponentName == null) {
       throw new IllegalStateException("Cannot loadApp if component name is null");
     }
     mReactDelegate =
-        new ReactDelegate(getActivity(), getReactNativeHost(), mainComponentName, launchOptions);
+        new ReactDelegate(
+            getActivity(), getReactNativeHost(), mainComponentName, launchOptions, fabricEnabled);
   }
 
   /**
@@ -85,7 +93,7 @@ public class ReactFragment extends Fragment implements PermissionAwareActivity {
 
   @Override
   public View onCreateView(
-      LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
+      @NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
     mReactDelegate.loadApp();
     return mReactDelegate.getReactRootView();
   }
@@ -140,7 +148,7 @@ public class ReactFragment extends Fragment implements PermissionAwareActivity {
 
   @Override
   public void onRequestPermissionsResult(
-      int requestCode, String[] permissions, int[] grantResults) {
+      int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
     super.onRequestPermissionsResult(requestCode, permissions, grantResults);
     if (mPermissionListener != null
         && mPermissionListener.onRequestPermissionsResult(requestCode, permissions, grantResults)) {
@@ -170,12 +178,14 @@ public class ReactFragment extends Fragment implements PermissionAwareActivity {
   /** Builder class to help instantiate a ReactFragment */
   public static class Builder {
 
-    String mComponentName;
-    Bundle mLaunchOptions;
+    @Nullable String mComponentName;
+    @Nullable Bundle mLaunchOptions;
+    @Nullable Boolean mFabricEnabled;
 
     public Builder() {
       mComponentName = null;
       mLaunchOptions = null;
+      mFabricEnabled = null;
     }
 
     /**
@@ -201,7 +211,12 @@ public class ReactFragment extends Fragment implements PermissionAwareActivity {
     }
 
     public ReactFragment build() {
-      return ReactFragment.newInstance(mComponentName, mLaunchOptions);
+      return ReactFragment.newInstance(mComponentName, mLaunchOptions, mFabricEnabled);
+    }
+
+    public Builder setFabricEnabled(boolean fabricEnabled) {
+      mFabricEnabled = fabricEnabled;
+      return this;
     }
   }
 }

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);
+    }
+  }
 }