diff --git a/package-lock.json b/package-lock.json
index c8b4ad03e6c0..cfd918686a5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6660,11 +6660,6 @@
"resolved": "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-2.0.0.tgz",
"integrity": "sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ=="
},
- "@react-navigation/compat": {
- "version": "5.3.20",
- "resolved": "https://registry.npmjs.org/@react-navigation/compat/-/compat-5.3.20.tgz",
- "integrity": "sha512-4CDw3QRN2zKj2L1Fxjq6ZOK95EW8UOnW3Par1o+P07qc+dZTAL1poKeRx74yqGLQyGVawozTHOgyE8/XWjdDvg=="
- },
"@react-navigation/core": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.2.2.tgz",
@@ -25575,7 +25570,7 @@
"buffer-crc32": {
"version": "0.2.13",
"resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
- "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+ "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
"dev": true
},
"buffer-fill": {
@@ -31254,7 +31249,7 @@
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
- "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+ "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true
}
}
@@ -31441,7 +31436,7 @@
"fd-slicer": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
- "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+ "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
"dev": true,
"requires": {
"pend": "~1.2.0"
@@ -40999,7 +40994,7 @@
"pify": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
- "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
+ "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
"dev": true,
"optional": true
}
@@ -41817,7 +41812,7 @@
"pend": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
- "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+ "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
"dev": true
},
"performance-now": {
@@ -42762,7 +42757,7 @@
"proto-list": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
- "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
+ "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=",
"dev": true,
"optional": true
},
@@ -45316,7 +45311,7 @@
"semver-compare": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
- "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
+ "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
"dev": true,
"optional": true
},
@@ -50281,7 +50276,7 @@
"yauzl": {
"version": "2.10.0",
"resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
- "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+ "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
"dev": true,
"requires": {
"buffer-crc32": "~0.2.3",
diff --git a/package.json b/package.json
index 28852d8a6b7a..017af3224806 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,6 @@
"@react-native-firebase/perf": "^12.3.0",
"@react-native-masked-view/masked-view": "^0.2.4",
"@react-native-picker/picker": "^2.3.1",
- "@react-navigation/compat": "5.3.20",
"@react-navigation/drawer": "6.3.0",
"@react-navigation/native": "6.0.11",
"@react-navigation/stack": "6.2.2",
diff --git a/src/components/Button.js b/src/components/Button.js
index e330fccf1a82..3f3c646eb1c0 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,5 +1,4 @@
import React, {Component} from 'react';
-import {withNavigationFocus} from '@react-navigation/compat';
import {Pressable, ActivityIndicator, View} from 'react-native';
import PropTypes from 'prop-types';
import styles from '../styles/styles';
@@ -15,6 +14,7 @@ import withNavigationFallback from './withNavigationFallback';
import compose from '../libs/compose';
import * as Expensicons from './Icon/Expensicons';
import colors from '../styles/colors';
+import withNavigationFocus from './withNavigationFocus';
const propTypes = {
/** The text for the button label */
diff --git a/src/components/ScreenWrapper.js b/src/components/ScreenWrapper.js
index 833b2e090b73..bc6a416dbd01 100644
--- a/src/components/ScreenWrapper.js
+++ b/src/components/ScreenWrapper.js
@@ -2,7 +2,6 @@ import _ from 'underscore';
import React from 'react';
import PropTypes from 'prop-types';
import {View} from 'react-native';
-import {withNavigation} from '@react-navigation/compat';
import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
import {withOnyx} from 'react-native-onyx';
import styles from '../styles/styles';
@@ -15,6 +14,7 @@ import Navigation from '../libs/Navigation/Navigation';
import compose from '../libs/compose';
import ONYXKEYS from '../ONYXKEYS';
import CONST from '../CONST';
+import withNavigation from './withNavigation';
const propTypes = {
/** Array of additional styles to add */
diff --git a/src/components/SettlementButton.js b/src/components/SettlementButton.js
index 8c5cb28d9814..1bee84964e2f 100644
--- a/src/components/SettlementButton.js
+++ b/src/components/SettlementButton.js
@@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
-import {withNavigation} from '@react-navigation/compat';
import ButtonWithMenu from './ButtonWithMenu';
import * as Expensicons from './Icon/Expensicons';
import Permissions from '../libs/Permissions';
@@ -10,6 +9,7 @@ import CONST from '../CONST';
import compose from '../libs/compose';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
import KYCWall from './KYCWall';
+import withNavigation from './withNavigation';
const propTypes = {
/** Callback to execute when this button is pressed. Receives a single payment type argument. */
diff --git a/src/components/withNavigation.js b/src/components/withNavigation.js
new file mode 100644
index 000000000000..c5f5ffbfd09d
--- /dev/null
+++ b/src/components/withNavigation.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {useNavigation} from '@react-navigation/native';
+import getComponentDisplayName from '../libs/getComponentDisplayName';
+
+const withNavigationPropTypes = {
+ navigation: PropTypes.object.isRequired,
+};
+
+export default function withNavigation(WrappedComponent) {
+ const WithNavigation = (props) => {
+ const navigation = useNavigation();
+ return (
+
+ );
+ };
+
+ WithNavigation.displayName = `withNavigation(${getComponentDisplayName(WrappedComponent)})`;
+ WithNavigation.propTypes = {
+ forwardedRef: PropTypes.oneOfType([
+ PropTypes.func,
+ PropTypes.shape({current: PropTypes.instanceOf(React.Component)}),
+ ]),
+ };
+ WithNavigation.defaultProps = {
+ forwardedRef: undefined,
+ };
+ return React.forwardRef((props, ref) => (
+ // eslint-disable-next-line react/jsx-props-no-spreading
+
+ ));
+}
+
+export {
+ withNavigationPropTypes,
+};
diff --git a/src/components/withNavigationFocus.js b/src/components/withNavigationFocus.js
new file mode 100644
index 000000000000..881d304aecd9
--- /dev/null
+++ b/src/components/withNavigationFocus.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {useIsFocused} from '@react-navigation/native';
+import getComponentDisplayName from '../libs/getComponentDisplayName';
+
+const withNavigationFocusPropTypes = {
+ isFocused: PropTypes.bool.isRequired,
+};
+
+export default function withNavigationFocus(WrappedComponent) {
+ const WithNavigationFocus = (props) => {
+ const isFocused = useIsFocused();
+ return (
+
+ );
+ };
+
+ WithNavigationFocus.displayName = `withNavigationFocus(${getComponentDisplayName(WrappedComponent)})`;
+ WithNavigationFocus.propTypes = {
+ forwardedRef: PropTypes.oneOfType([
+ PropTypes.func,
+ PropTypes.shape({current: PropTypes.instanceOf(React.Component)}),
+ ]),
+ };
+ WithNavigationFocus.defaultProps = {
+ forwardedRef: undefined,
+ };
+ return React.forwardRef((props, ref) => (
+ // eslint-disable-next-line react/jsx-props-no-spreading
+
+ ));
+}
+
+export {
+ withNavigationFocusPropTypes,
+};
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index eb5dd2ffc7e7..a98a85433dd7 100755
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -5,7 +5,6 @@ import {
TouchableOpacity,
InteractionManager,
} from 'react-native';
-import {withNavigationFocus} from '@react-navigation/compat';
import _ from 'underscore';
import lodashGet from 'lodash/get';
import {withOnyx} from 'react-native-onyx';
@@ -44,6 +43,7 @@ import canUseTouchScreen from '../../../libs/canUseTouchscreen';
import toggleReportActionComposeView from '../../../libs/toggleReportActionComposeView';
import OfflineIndicator from '../../../components/OfflineIndicator';
import ExceededCommentLength from '../../../components/ExceededCommentLength';
+import withNavigationFocus from '../../../components/withNavigationFocus';
const propTypes = {
/** Beta features list */
diff --git a/src/pages/home/sidebar/SidebarScreen/index.js b/src/pages/home/sidebar/SidebarScreen/index.js
index 00792c601ffb..d67757b6a088 100755
--- a/src/pages/home/sidebar/SidebarScreen/index.js
+++ b/src/pages/home/sidebar/SidebarScreen/index.js
@@ -1,5 +1,4 @@
import React from 'react';
-import {withNavigation} from '@react-navigation/compat';
import {withOnyx} from 'react-native-onyx';
import compose from '../../../../libs/compose';
import withWindowDimensions from '../../../../components/withWindowDimensions';
@@ -7,6 +6,7 @@ import withLocalize from '../../../../components/withLocalize';
import ONYXKEYS from '../../../../ONYXKEYS';
import {sidebarPropTypes, sidebarDefaultProps} from './sidebarPropTypes';
import BaseSidebarScreen from './BaseSidebarScreen';
+import withNavigation from '../../../../components/withNavigation';
const SidebarScreen = (props) => {
let baseSidebarScreen = null;
diff --git a/src/pages/home/sidebar/SidebarScreen/index.native.js b/src/pages/home/sidebar/SidebarScreen/index.native.js
index 651ac0844ba1..329ae4386d58 100755
--- a/src/pages/home/sidebar/SidebarScreen/index.native.js
+++ b/src/pages/home/sidebar/SidebarScreen/index.native.js
@@ -1,5 +1,4 @@
import React from 'react';
-import {withNavigation} from '@react-navigation/compat';
import {withOnyx} from 'react-native-onyx';
import compose from '../../../../libs/compose';
import withWindowDimensions from '../../../../components/withWindowDimensions';
@@ -7,6 +6,7 @@ import withLocalize from '../../../../components/withLocalize';
import ONYXKEYS from '../../../../ONYXKEYS';
import {sidebarPropTypes, sidebarDefaultProps} from './sidebarPropTypes';
import BaseSidebarScreen from './BaseSidebarScreen';
+import withNavigation from '../../../../components/withNavigation';
// eslint-disable-next-line react/jsx-props-no-spreading
const SidebarScreen = props => ;