Use the disableLegacyMode where ever we check the ConcurrentMode mode

packages/react-native-renderer/src/ReactFabric.js

@@ -48,6 +48,7 @@ import {getPublicInstanceFromInternalInstanceHandle} from './ReactFiberConfigFab
 
 // Module provided by RN:
 import {ReactFiberErrorDialog} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+import {disableLegacyMode} from 'shared/ReactFeatureFlags';
 
 if (typeof ReactFiberErrorDialog.showErrorDialog !== 'function') {
   throw new Error(
@@ -106,6 +107,10 @@ function render(
   callback: ?() => void,
   concurrentRoot: ?boolean,
 ): ?ElementRef<ElementType> {
+  if (disableLegacyMode && !concurrentRoot) {
+    throw new Error('render: Unsupported Legacy Mode API.');
+  }
+
   let root = roots.get(containerTag);
 
   if (!root) {

packages/react-native-renderer/src/ReactNativeRenderer.js

@@ -50,6 +50,8 @@ import {
   isChildPublicInstance,
 } from './ReactNativePublicCompat';
 
+import {disableLegacyMode} from 'shared/ReactFeatureFlags';
+
 // Module provided by RN:
 import {ReactFiberErrorDialog} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
@@ -109,6 +111,10 @@ function render(
   containerTag: number,
   callback: ?() => void,
 ): ?ElementRef<ElementType> {
+  if (disableLegacyMode) {
+    throw new Error('render: Unsupported Legacy Mode API.');
+  }
+
   let root = roots.get(containerTag);
 
   if (!root) {

packages/react-native-renderer/src/__tests__/ReactNativeError-test.internal.js

@@ -50,6 +50,7 @@ describe('ReactNativeError', () => {
     );
   });
 
+  // @gate !disableLegacyMode
   it('should be able to extract a component stack from a native view', () => {
     const View = createReactNativeComponentClass('View', () => ({
       validAttributes: {foo: true},

packages/react-native-renderer/src/__tests__/ReactNativeEvents-test.internal.js

@@ -79,6 +79,7 @@ beforeEach(() => {
       .ReactNativeViewConfigRegistry.register;
 });
 
+// @gate !disableLegacyMode
 it('fails to register the same event name with different types', async () => {
   const InvalidEvents = createReactNativeComponentClass('InvalidEvents', () => {
     if (!__DEV__) {
@@ -122,14 +123,18 @@ it('fails to register the same event name with different types', async () => {
   ).rejects.toThrow('Event cannot be both direct and bubbling: topChange');
 });
 
+// @gate !disableLegacyMode
 it('fails if unknown/unsupported event types are dispatched', () => {
   expect(RCTEventEmitter.register).toHaveBeenCalledTimes(1);
   const EventEmitter = RCTEventEmitter.register.mock.calls[0][0];
   const View = fakeRequireNativeComponent('View', {});
 
   ReactNative.render(<View onUnspecifiedEvent={() => {}} />, 1);
 
-  expect(UIManager.__dumpHierarchyForJestTestsOnly()).toMatchSnapshot();
+  expect(UIManager.__dumpHierarchyForJestTestsOnly()).toMatchInlineSnapshot(`
+    "<native root> {}
+      View null"
+  `);
   expect(UIManager.createView).toHaveBeenCalledTimes(1);
 
   const target = UIManager.createView.mock.calls[0][0];
@@ -143,6 +148,7 @@ it('fails if unknown/unsupported event types are dispatched', () => {
   }).toThrow('Unsupported top level event type "unspecifiedEvent" dispatched');
 });
 
+// @gate !disableLegacyMode
 it('handles events', () => {
   expect(RCTEventEmitter.register).toHaveBeenCalledTimes(1);
   const EventEmitter = RCTEventEmitter.register.mock.calls[0][0];
@@ -167,7 +173,11 @@ it('handles events', () => {
     1,
   );
 
-  expect(UIManager.__dumpHierarchyForJestTestsOnly()).toMatchSnapshot();
+  expect(UIManager.__dumpHierarchyForJestTestsOnly()).toMatchInlineSnapshot(`
+    "<native root> {}
+      View {"foo":"outer"}
+        View {"foo":"inner"}"
+  `);
   expect(UIManager.createView).toHaveBeenCalledTimes(2);
 
   // Don't depend on the order of createView() calls.
@@ -200,6 +210,7 @@ it('handles events', () => {
 });
 
 // @gate !disableLegacyContext || !__DEV__
+// @gate !disableLegacyMode
 it('handles events on text nodes', () => {
   expect(RCTEventEmitter.register).toHaveBeenCalledTimes(1);
   const EventEmitter = RCTEventEmitter.register.mock.calls[0][0];
@@ -283,6 +294,7 @@ it('handles events on text nodes', () => {
   ]);
 });
 
+// @gate !disableLegacyMode
 it('handles when a responder is unmounted while a touch sequence is in progress', () => {
   const EventEmitter = RCTEventEmitter.register.mock.calls[0][0];
   const View = fakeRequireNativeComponent('View', {id: true});
@@ -372,6 +384,7 @@ it('handles when a responder is unmounted while a touch sequence is in progress'
   expect(log).toEqual(['two responder start']);
 });
 
+// @gate !disableLegacyMode
 it('handles events without target', () => {
   const EventEmitter = RCTEventEmitter.register.mock.calls[0][0];
 
@@ -462,6 +475,7 @@ it('handles events without target', () => {
   ]);
 });
 
+// @gate !disableLegacyMode
 it('dispatches event with target as instance', () => {
   const EventEmitter = RCTEventEmitter.register.mock.calls[0][0];
 

packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js

@@ -45,6 +45,7 @@ describe('ReactNative', () => {
       require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface').TextInputState;
   });
 
+  // @gate !disableLegacyMode
   it('should be able to create and render a native component', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -58,6 +59,7 @@ describe('ReactNative', () => {
     expect(UIManager.updateView).not.toBeCalled();
   });
 
+  // @gate !disableLegacyMode
   it('should be able to create and update a native component', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -79,6 +81,7 @@ describe('ReactNative', () => {
     expect(UIManager.updateView).toBeCalledWith(3, 'RCTView', {foo: 'bar'});
   });
 
+  // @gate !disableLegacyMode
   it('should not call UIManager.updateView after render for properties that have not changed', () => {
     const Text = createReactNativeComponentClass('RCTText', () => ({
       validAttributes: {foo: true},
@@ -105,6 +108,7 @@ describe('ReactNative', () => {
     expect(UIManager.updateView).toHaveBeenCalledTimes(4);
   });
 
+  // @gate !disableLegacyMode
   it('should call dispatchCommand for native refs', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -133,6 +137,7 @@ describe('ReactNative', () => {
     );
   });
 
+  // @gate !disableLegacyMode
   it('should warn and no-op if calling dispatchCommand on non native refs', () => {
     class BasicClass extends React.Component {
       render() {
@@ -162,6 +167,7 @@ describe('ReactNative', () => {
     expect(UIManager.dispatchViewManagerCommand).not.toBeCalled();
   });
 
+  // @gate !disableLegacyMode
   it('should call sendAccessibilityEvent for native refs', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -192,6 +198,7 @@ describe('ReactNative', () => {
     ).toHaveBeenCalledWith(expect.any(Number), 'focus');
   });
 
+  // @gate !disableLegacyMode
   it('should warn and no-op if calling sendAccessibilityEvent on non native refs', () => {
     class BasicClass extends React.Component {
       render() {
@@ -221,6 +228,7 @@ describe('ReactNative', () => {
     expect(UIManager.sendAccessibilityEvent).not.toBeCalled();
   });
 
+  // @gate !disableLegacyMode
   it('should not call UIManager.updateView from ref.setNativeProps for properties that have not changed', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -254,6 +262,7 @@ describe('ReactNative', () => {
     );
   });
 
+  // @gate !disableLegacyMode
   it('should call UIManager.measure on ref.measure', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -280,6 +289,7 @@ describe('ReactNative', () => {
     expect(successCallback).toHaveBeenCalledWith(10, 10, 100, 100, 0, 0);
   });
 
+  // @gate !disableLegacyMode
   it('should call UIManager.measureInWindow on ref.measureInWindow', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -306,6 +316,7 @@ describe('ReactNative', () => {
     expect(successCallback).toHaveBeenCalledWith(10, 10, 100, 100);
   });
 
+  // @gate !disableLegacyMode
   it('should support reactTag in ref.measureLayout', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -346,6 +357,7 @@ describe('ReactNative', () => {
     expect(successCallback).toHaveBeenCalledWith(1, 1, 100, 100);
   });
 
+  // @gate !disableLegacyMode
   it('should support ref in ref.measureLayout of host components', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -382,6 +394,7 @@ describe('ReactNative', () => {
     expect(successCallback).toHaveBeenCalledWith(1, 1, 100, 100);
   });
 
+  // @gate !disableLegacyMode
   it('returns the correct instance and calls it in the callback', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -403,6 +416,7 @@ describe('ReactNative', () => {
     expect(a).toBe(c);
   });
 
+  // @gate !disableLegacyMode
   it('renders and reorders children', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {title: true},
@@ -427,12 +441,59 @@ describe('ReactNative', () => {
     const after = 'mxhpgwfralkeoivcstzy';
 
     ReactNative.render(<Component chars={before} />, 11);
-    expect(UIManager.__dumpHierarchyForJestTestsOnly()).toMatchSnapshot();
+    expect(UIManager.__dumpHierarchyForJestTestsOnly()).toMatchInlineSnapshot(`
+      "<native root> {}
+        RCTView null
+          RCTView {"title":"a"}
+          RCTView {"title":"b"}
+          RCTView {"title":"c"}
+          RCTView {"title":"d"}
+          RCTView {"title":"e"}
+          RCTView {"title":"f"}
+          RCTView {"title":"g"}
+          RCTView {"title":"h"}
+          RCTView {"title":"i"}
+          RCTView {"title":"j"}
+          RCTView {"title":"k"}
+          RCTView {"title":"l"}
+          RCTView {"title":"m"}
+          RCTView {"title":"n"}
+          RCTView {"title":"o"}
+          RCTView {"title":"p"}
+          RCTView {"title":"q"}
+          RCTView {"title":"r"}
+          RCTView {"title":"s"}
+          RCTView {"title":"t"}"
+    `);
 
     ReactNative.render(<Component chars={after} />, 11);
-    expect(UIManager.__dumpHierarchyForJestTestsOnly()).toMatchSnapshot();
+    expect(UIManager.__dumpHierarchyForJestTestsOnly()).toMatchInlineSnapshot(`
+      "<native root> {}
+        RCTView null
+          RCTView {"title":"m"}
+          RCTView {"title":"x"}
+          RCTView {"title":"h"}
+          RCTView {"title":"p"}
+          RCTView {"title":"g"}
+          RCTView {"title":"w"}
+          RCTView {"title":"f"}
+          RCTView {"title":"r"}
+          RCTView {"title":"a"}
+          RCTView {"title":"l"}
+          RCTView {"title":"k"}
+          RCTView {"title":"e"}
+          RCTView {"title":"o"}
+          RCTView {"title":"i"}
+          RCTView {"title":"v"}
+          RCTView {"title":"c"}
+          RCTView {"title":"s"}
+          RCTView {"title":"t"}
+          RCTView {"title":"z"}
+          RCTView {"title":"y"}"
+    `);
   });
 
+  // @gate !disableLegacyMode
   it('calls setState with no arguments', () => {
     let mockArgs;
     class Component extends React.Component {
@@ -448,6 +509,7 @@ describe('ReactNative', () => {
     expect(mockArgs.length).toEqual(0);
   });
 
+  // @gate !disableLegacyMode
   it('should not throw when <View> is used inside of a <Text> ancestor', () => {
     const Image = createReactNativeComponentClass('RCTImage', () => ({
       validAttributes: {},
@@ -478,6 +540,7 @@ describe('ReactNative', () => {
     );
   });
 
+  // @gate !disableLegacyMode
   it('should throw for text not inside of a <Text> ancestor', async () => {
     const ScrollView = createReactNativeComponentClass('RCTScrollView', () => ({
       validAttributes: {},
@@ -512,6 +575,7 @@ describe('ReactNative', () => {
     );
   });
 
+  // @gate !disableLegacyMode
   it('should not throw for text inside of an indirect <Text> ancestor', () => {
     const Text = createReactNativeComponentClass('RCTText', () => ({
       validAttributes: {},
@@ -528,6 +592,7 @@ describe('ReactNative', () => {
     );
   });
 
+  // @gate !disableLegacyMode
   it('findHostInstance_DEPRECATED should warn if used to find a host component inside StrictMode', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -564,6 +629,7 @@ describe('ReactNative', () => {
     expect(match).toBe(child);
   });
 
+  // @gate !disableLegacyMode
   it('findHostInstance_DEPRECATED should warn if passed a component that is inside StrictMode', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -601,6 +667,7 @@ describe('ReactNative', () => {
     expect(match).toBe(child);
   });
 
+  // @gate !disableLegacyMode
   it('findNodeHandle should warn if used to find a host component inside StrictMode', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -635,6 +702,7 @@ describe('ReactNative', () => {
     expect(match).toBe(child._nativeTag);
   });
 
+  // @gate !disableLegacyMode
   it('findNodeHandle should warn if passed a component that is inside StrictMode', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -670,6 +738,7 @@ describe('ReactNative', () => {
     expect(match).toBe(child._nativeTag);
   });
 
+  // @gate !disableLegacyMode
   it('blur on host component calls TextInputState', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -687,6 +756,7 @@ describe('ReactNative', () => {
     expect(TextInputState.blurTextInput).toHaveBeenCalledWith(viewRef.current);
   });
 
+  // @gate !disableLegacyMode
   it('focus on host component calls TextInputState', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},