[change] React 18 support

* Support React 18 concurrency and constraints.
* Add new render / hydrate functions.
* Remove uses of findNodeHandle.
* Expose ability to unmount an application once ran.

Fix #1529
Close #2330

Author: edkimmel

configs/.eslintrc

@@ -2,7 +2,7 @@
   "settings": {
     "react": {
       "pragma": "React",
-      "version": "17.0",
+      "version": "18.0",
       "flowVersion": "0.148.0" // Flow version
     }
   },

package-lock.json

@@ -34,7 +34,7 @@
     "@babel/preset-env": "^7.18.6",
     "@babel/preset-flow": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^13.3.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^28.1.2",
     "babel-plugin-add-module-exports": "^1.0.4",

package.json

@@ -71,4 +71,7 @@ const tests = {
   }))
 };
 
-ReactDOM.render(<App tests={tests} />, document.querySelector('.root'));
+const root = document.querySelector('.root');
+const element = <App tests={tests} />;
+
+ReactDOM.createRoot(root).render(element);

packages/benchmarks/src/index.js

@@ -69,6 +69,10 @@ If the client should hydrate server-rendered HTML.
 The initial props passed to the root component.
 {% endcall %}
 
+{% call macro.prop('mode', '"concurrent" | "legacy"') %}
+Default is 'concurrent'. Setting to 'legacy' will make the app will behave as if it’s running React 17.
+{% endcall %}
+
 {% call macro.prop('rootTag', 'HTMLElement') %}
 The native element into which the application is rendered.
 {% endcall %}

packages/react-native-web-docs/src/pages/docs/apis/app-registry.md

@@ -10,8 +10,8 @@
   "dependencies": {
     "babel-plugin-react-native-web": "0.18.10",
     "next": "^12.2.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-native-web": "0.18.10"
   },
   "devDependencies": {

packages/react-native-web-examples/package.json

@@ -25,18 +25,18 @@ export default function AppStatePage() {
     const iframeRootTag = document.createElement('div');
     iframeRootTag.id = 'iframe-root';
     iframeBody.appendChild(iframeRootTag);
-    AppRegistry.runApplication('App', { rootTag: iframeRootTag });
+    const app1 = AppRegistry.runApplication('App', { rootTag: iframeRootTag });
 
     const shadowElement = shadowRef.current;
     const shadowRoot = shadowElement.attachShadow({ mode: 'open' });
     const shadowRootTag = document.createElement('div');
     shadowRootTag.id = 'shadow-root';
     shadowRoot.appendChild(shadowRootTag);
-    AppRegistry.runApplication('App', { rootTag: shadowRootTag });
+    const app2 = AppRegistry.runApplication('App', { rootTag: shadowRootTag });
 
     return () => {
-      AppRegistry.unmountApplicationComponentAtRootTag(iframeRootTag);
-      AppRegistry.unmountApplicationComponentAtRootTag(shadowRootTag);
+      app1.unmount();
+      app2.unmount();
     };
   }, []);
 

packages/react-native-web-examples/pages/app-registry/index.js

@@ -31,8 +31,8 @@
     "styleq": "^0.1.2"
   },
   "peerDependencies": {
-    "react": "^17.0.2 || ^18.0.0",
-    "react-dom": "^17.0.2 || ^18.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "author": "Nicolas Gallagher",
   "license": "MIT",

packages/react-native-web/package.json

@@ -7,9 +7,8 @@
 
 import ActivityIndicator from '..';
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import { createEventTarget } from 'dom-event-testing-library';
-import { render } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
 
 describe('components/ActivityIndicator', () => {
   describe('prop "accessibilityLabel"', () => {