diff --git a/package.json b/package.json
index 715048dc..d705fede 100644
--- a/package.json
+++ b/package.json
@@ -58,9 +58,9 @@
"metro-react-native-babel-preset": "^0.56.0",
"npm-run-all": "^4.1.3",
"prettier": "^1.18.2",
- "react": "^16.10.2",
- "react-dom": "^16.10.2",
- "react-test-renderer": "^16.10.2"
+ "react": "^17.0.1",
+ "react-dom": "^17.0.1",
+ "react-test-renderer": "^17.0.1"
},
"workspaces": [
"packages/*"
diff --git a/packages/react-native-web/package.json b/packages/react-native-web/package.json
index 0787b9ea..1598f7c9 100644
--- a/packages/react-native-web/package.json
+++ b/packages/react-native-web/package.json
@@ -27,8 +27,8 @@
"react-timer-mixin": "^0.13.4"
},
"peerDependencies": {
- "react": ">=16.5.1",
- "react-dom": ">=16.5.1"
+ "react": ">=17.0.1",
+ "react-dom": ">=17.0.1"
},
"author": "Nicolas Gallagher",
"license": "MIT",
diff --git a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js
index 63322873..f5ae61b5 100644
--- a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js
@@ -75,9 +75,10 @@ describe('components/ActivityIndicator', () => {
render();
});
const target = createEventTarget(ref.current);
+ const body = createEventTarget(document.body);
act(() => {
target.focus();
- target.blur();
+ body.focus({ relatedTarget: target.node });
});
expect(onBlur).toBeCalled();
});
diff --git a/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js b/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js
index f6745f54..ecee5795 100644
--- a/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js
@@ -59,9 +59,10 @@ describe('CheckBox', () => {
render();
});
const target = createEventTarget(ref.current);
+ const body = createEventTarget(document.body);
act(() => {
target.focus();
- target.blur();
+ body.focus({ relatedTarget: target.node });
});
expect(onBlur).toBeCalled();
});
diff --git a/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js b/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
index 2b6af336..90082006 100644
--- a/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
@@ -72,6 +72,7 @@ describe('components/Pressable', () => {
));
});
const target = createEventTarget(ref.current);
+ const body = createEventTarget(document.body);
expect(container.firstChild).toMatchSnapshot();
act(() => {
target.focus();
@@ -79,7 +80,7 @@ describe('components/Pressable', () => {
expect(onFocus).toBeCalled();
expect(container.firstChild).toMatchSnapshot();
act(() => {
- target.blur();
+ body.focus({ relatedTarget: target.node });
});
expect(onBlur).toBeCalled();
expect(container.firstChild).toMatchSnapshot();
diff --git a/packages/react-native-web/src/exports/Text/__tests__/index-test.js b/packages/react-native-web/src/exports/Text/__tests__/index-test.js
index 9b7caeb7..164b1027 100644
--- a/packages/react-native-web/src/exports/Text/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Text/__tests__/index-test.js
@@ -76,9 +76,10 @@ describe('components/Text', () => {
render();
});
const target = createEventTarget(ref.current);
+ const body = createEventTarget(document.body);
act(() => {
target.focus();
- target.blur();
+ body.focus({ relatedTarget: target.node });
});
expect(onBlur).toBeCalled();
});
@@ -94,7 +95,6 @@ describe('components/Text', () => {
const target = createEventTarget(ref.current);
act(() => {
target.focus();
- target.blur();
});
expect(onFocus).toBeCalled();
});
diff --git a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
index 6db3e45f..11365ee7 100644
--- a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
@@ -2,6 +2,8 @@
import React from 'react';
import TextInput from '..';
+import { act } from 'react-dom/test-utils';
+import { createEventTarget } from 'dom-event-testing-library';
import { render } from '@testing-library/react';
function findInput(container) {
@@ -238,9 +240,16 @@ describe('components/TextInput', () => {
test('prop "onBlur"', () => {
const onBlur = jest.fn();
- const { container } = render();
- const input = findInput(container);
- input.dispatchEvent(new window.FocusEvent('blur', {}));
+ const ref = React.createRef();
+ act(() => {
+ render();
+ });
+ const target = createEventTarget(ref.current);
+ const body = createEventTarget(document.body);
+ act(() => {
+ target.focus();
+ body.focus({ relatedTarget: target.node });
+ });
expect(onBlur).toHaveBeenCalledTimes(1);
expect(TextInput.State.currentlyFocusedField()).toBe(null);
});
@@ -267,11 +276,16 @@ describe('components/TextInput', () => {
test('prop "onFocus"', () => {
const onFocus = jest.fn();
- const { container } = render();
- const input = findInput(container);
- input.focus();
+ const ref = React.createRef();
+ act(() => {
+ render();
+ });
+ const target = createEventTarget(ref.current);
+ act(() => {
+ target.focus();
+ });
expect(onFocus).toHaveBeenCalledTimes(1);
- expect(TextInput.State.currentlyFocusedField()).toBe(input);
+ expect(TextInput.State.currentlyFocusedField()).toBe(target.node);
});
describe('prop "onKeyPress"', () => {
diff --git a/packages/react-native-web/src/exports/View/__tests__/index-test.js b/packages/react-native-web/src/exports/View/__tests__/index-test.js
index 8aeba2d9..a76860db 100644
--- a/packages/react-native-web/src/exports/View/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/View/__tests__/index-test.js
@@ -96,9 +96,10 @@ describe('components/View', () => {
render();
});
const target = createEventTarget(ref.current);
+ const body = createEventTarget(document.body);
act(() => {
target.focus();
- target.blur();
+ body.focus({ relatedTarget: target.node });
});
expect(onBlur).toBeCalled();
});
diff --git a/yarn.lock b/yarn.lock
index ac33e744..03ed09b5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12743,7 +12743,7 @@ react-docgen@^5.0.0:
node-dir "^0.1.10"
strip-indent "^3.0.0"
-react-dom@^16.10.2, react-dom@^16.8.3:
+react-dom@^16.8.3:
version "16.10.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.10.2.tgz#4840bce5409176bc3a1f2bd8cb10b92db452fda6"
integrity sha512-kWGDcH3ItJK4+6Pl9DZB16BXYAZyrYQItU4OMy0jAkv5aNqc+mAKb4TpFtAteI6TJZu+9ZlNhaeNQSVQDHJzkw==
@@ -12753,6 +12753,15 @@ react-dom@^16.10.2, react-dom@^16.8.3:
prop-types "^15.6.2"
scheduler "^0.16.2"
+react-dom@^17.0.1:
+ version "17.0.1"
+ resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
+ integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==
+ dependencies:
+ loose-envify "^1.1.0"
+ object-assign "^4.1.1"
+ scheduler "^0.20.1"
+
react-draggable@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.0.3.tgz#6b9f76f66431c47b9070e9b805bbc520df8ca481"
@@ -12813,6 +12822,11 @@ react-is@^16.12.0:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
+"react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1:
+ version "17.0.1"
+ resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
+ integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
+
react-is@^16.7.0:
version "16.7.0"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa"
@@ -12827,11 +12841,6 @@ react-is@^16.8.4:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
-react-is@^16.8.6:
- version "16.10.2"
- resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.2.tgz#984120fd4d16800e9a738208ab1fba422d23b5ab"
- integrity sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==
-
react-jss@^10.5.0:
version "10.5.0"
resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-10.5.0.tgz#a3e47e5f024d85e2f59fbf691bf276e1849dfd7f"
@@ -12878,6 +12887,14 @@ react-refresh@^0.4.0:
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.4.2.tgz#54a277a6caaac2803d88f1d6f13c1dcfbd81e334"
integrity sha512-kv5QlFFSZWo7OlJFNYbxRtY66JImuP2LcrFgyJfQaf85gSP+byzG21UbDQEYjU7f//ny8rwiEkO6py2Y+fEgAQ==
+react-shallow-renderer@^16.13.1:
+ version "16.14.1"
+ resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz#bf0d02df8a519a558fd9b8215442efa5c840e124"
+ integrity sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==
+ dependencies:
+ object-assign "^4.1.1"
+ react-is "^16.12.0 || ^17.0.0"
+
react-sizeme@^2.6.7:
version "2.6.7"
resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.6.7.tgz#231339ce8821ac2c26424c791e0027f89dae3e90"
@@ -12899,15 +12916,15 @@ react-syntax-highlighter@^11.0.2:
prismjs "^1.8.4"
refractor "^2.4.1"
-react-test-renderer@^16.10.2:
- version "16.10.2"
- resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.10.2.tgz#4d8492f8678c9b43b721a7d79ed0840fdae7c518"
- integrity sha512-k9Qzyev6cTIcIfrhgrFlYQAFxh5EEDO6ALNqYqmKsWVA7Q/rUMTay5nD3nthi6COmYsd4ghVYyi8U86aoeMqYQ==
+react-test-renderer@^17.0.1:
+ version "17.0.1"
+ resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3187e636c3063e6ae498aedf21ecf972721574c7"
+ integrity sha512-/dRae3mj6aObwkjCcxZPlxDFh73XZLgvwhhyON2haZGUEhiaY5EjfAdw+d/rQmlcFwdTpMXCSGVk374QbCTlrA==
dependencies:
object-assign "^4.1.1"
- prop-types "^15.6.2"
- react-is "^16.8.6"
- scheduler "^0.16.2"
+ react-is "^17.0.1"
+ react-shallow-renderer "^16.13.1"
+ scheduler "^0.20.1"
react-textarea-autosize@^7.1.0:
version "7.1.0"
@@ -12921,7 +12938,7 @@ react-timer-mixin@^0.13.4:
version "0.13.4"
resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
-react@^16.10.2, react@^16.8.3:
+react@^16.8.3:
version "16.10.2"
resolved "https://registry.yarnpkg.com/react/-/react-16.10.2.tgz#a5ede5cdd5c536f745173c8da47bda64797a4cf0"
integrity sha512-MFVIq0DpIhrHFyqLU0S3+4dIcBhhOvBE8bJ/5kHPVOVaGdo0KuiQzpcjCPsf585WvhypqtrMILyoE2th6dT+Lw==
@@ -12930,6 +12947,14 @@ react@^16.10.2, react@^16.8.3:
object-assign "^4.1.1"
prop-types "^15.6.2"
+react@^17.0.1:
+ version "17.0.1"
+ resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
+ integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
+ dependencies:
+ loose-envify "^1.1.0"
+ object-assign "^4.1.1"
+
read-cmd-shim@^1.0.1:
version "1.0.5"
resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-1.0.5.tgz#87e43eba50098ba5a32d0ceb583ab8e43b961c16"
@@ -13643,6 +13668,14 @@ scheduler@^0.16.2:
loose-envify "^1.1.0"
object-assign "^4.1.1"
+scheduler@^0.20.1:
+ version "0.20.1"
+ resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c"
+ integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==
+ dependencies:
+ loose-envify "^1.1.0"
+ object-assign "^4.1.1"
+
schema-utils@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"