Merge pull request #9872 from Expensify/marcaaron-remove-react-naviga…

…tion-compat

Remove `react-navigation` compat library

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",

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 */

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 */

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. */

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 (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                ref={props.forwardedRef}
+                navigation={navigation}
+            />
+        );
+    };
+
+    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
+        <WithNavigation {...props} forwardedRef={ref} />
+    ));
+}
+
+export {
+    withNavigationPropTypes,
+};

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 (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                ref={props.forwardedRef}
+                isFocused={isFocused}
+            />
+        );
+    };
+
+    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
+        <WithNavigationFocus {...props} forwardedRef={ref} />
+    ));
+}
+
+export {
+    withNavigationFocusPropTypes,
+};

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 */

src/pages/home/sidebar/SidebarScreen/index.js

@@ -1,12 +1,12 @@
 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';
 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;

src/pages/home/sidebar/SidebarScreen/index.native.js

@@ -1,12 +1,12 @@
 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';
 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 => <BaseSidebarScreen {...props} />;