[change] Support for React 19

* Remove 'findNodeHandle' - it can't be supported on web.
* Remove legacy render and hydrate functions.

Fix #2686
Close #2731

Author: Viraj-10

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": "^13.3.0",
+    "@testing-library/react": "^16.3.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^29.7.0",
     "babel-plugin-add-module-exports": "^1.0.4",

package.json

@@ -11,13 +11,13 @@
     "classnames": "^2.3.1",
     "d3-scale-chromatic": "^3.0.0",
     "prop-types": "^15.6.0",
-    "react": ">=17.0.2",
-    "react-dom": ">=17.0.2",
-    "react-native-web": "0.18.10"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-native-web": "0.19.13"
   },
   "devDependencies": {
     "babel-loader": "^8.2.5",
-    "babel-plugin-react-native-web": "0.18.10",
+    "babel-plugin-react-native-web": "0.19.13",
     "css-loader": "^6.7.1",
     "style-loader": "^3.3.1",
     "url-loader": "^4.1.1",

packages/benchmarks/package.json

@@ -69,10 +69,6 @@ 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

@@ -32,8 +32,8 @@
     "styleq": "^0.1.3"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "author": "Nicolas Gallagher",
   "license": "MIT",

packages/react-native-web/package.json

@@ -12,7 +12,7 @@ import type { ComponentType, Node } from 'react';
 
 import AppContainer from './AppContainer';
 import invariant from 'fbjs/lib/invariant';
-import renderLegacy, { hydrateLegacy, render, hydrate } from '../render';
+import render, { hydrate } from '../render';
 import StyleSheet from '../StyleSheet';
 import React from 'react';
 
@@ -27,18 +27,11 @@ export default function renderApplication<Props: Object>(
   options: {
     hydrate: boolean,
     initialProps: Props,
-    mode: 'concurrent' | 'legacy',
     rootTag: any
   }
 ): Application {
-  const { hydrate: shouldHydrate, initialProps, mode, rootTag } = options;
-  const renderFn = shouldHydrate
-    ? mode === 'concurrent'
-      ? hydrate
-      : hydrateLegacy
-    : mode === 'concurrent'
-    ? render
-    : renderLegacy;
+  const { hydrate: shouldHydrate, initialProps, rootTag } = options;
+  const renderFn = shouldHydrate ? hydrate : render;
 
   invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);
 

packages/react-native-web/src/exports/AppRegistry/renderApplication.js

@@ -8,20 +8,11 @@
  * @noflow
  */
 
-import { findDOMNode } from 'react-dom';
-
-/**
- * @deprecated imperatively finding the DOM element of a react component has been deprecated in React 18.
- * You should use ref properties on the component instead.
- */
 const findNodeHandle = (component) => {
-  let node;
-
-  try {
-    node = findDOMNode(component);
-  } catch (e) {}
-
-  return node;
+  throw new Error(
+    'findNodeHandle is not supported on web. ' +
+      'Use the ref property on the component instead.'
+  );
 };
 
 export default findNodeHandle;

packages/react-native-web/src/exports/findNodeHandle/index.js

@@ -9,46 +9,21 @@
 
 'use client';
 
-import {
-  hydrate as domLegacyHydrate,
-  render as domLegacyRender
-} from 'react-dom';
 import {
   createRoot as domCreateRoot,
   hydrateRoot as domHydrateRoot
 } from 'react-dom/client';
 
-import unmountComponentAtNode from '../unmountComponentAtNode';
 import { createSheet } from '../StyleSheet/dom';
 
 export function hydrate(element, root) {
   createSheet(root);
   return domHydrateRoot(root, element);
 }
 
-export function render(element, root) {
+export default function render(element, root) {
   createSheet(root);
   const reactRoot = domCreateRoot(root);
   reactRoot.render(element);
   return reactRoot;
 }
-
-export function hydrateLegacy(element, root, callback) {
-  createSheet(root);
-  domLegacyHydrate(element, root, callback);
-  return {
-    unmount: function () {
-      return unmountComponentAtNode(root);
-    }
-  };
-}
-
-export default function renderLegacy(element, root, callback) {
-  createSheet(root);
-  domLegacyRender(element, root, callback);
-  return {
-    unmount: function () {
-      return unmountComponentAtNode(root);
-    }
-  };
-}

packages/react-native-web/src/exports/render/index.js

@@ -7,5 +7,7 @@
  * @noflow
  */
 
-import { unmountComponentAtNode } from 'react-dom';
-export default unmountComponentAtNode;
+export default function unmountComponentAtNode(rootTag) {
+  rootTag.unmount();
+  return true;
+}

packages/react-native-web/src/exports/unmountComponentAtNode/index.js

@@ -26,7 +26,6 @@ import RefreshControl from '../../../exports/RefreshControl';
 import ScrollView from '../../../exports/ScrollView';
 import View, { type ViewProps } from '../../../exports/View';
 import StyleSheet from '../../../exports/StyleSheet';
-import findNodeHandle from '../../../exports/findNodeHandle';
 
 import Batchinator from '../Batchinator';
 import clamp from '../Utilities/clamp';