From beb9405dc2467e3f4b6d19f3e2a8133454e529ee Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Tue, 12 Jul 2022 15:04:48 -1000 Subject: [PATCH 1/2] Add HOCs --- package.json | 1 - src/components/Button.js | 2 +- src/components/ScreenWrapper.js | 2 +- src/components/SettlementButton.js | 2 +- src/components/withNavigation.js | 41 +++++++++++++++++++ src/components/withNavigationFocus.js | 41 +++++++++++++++++++ src/pages/home/report/ReportActionCompose.js | 2 +- src/pages/home/sidebar/SidebarScreen/index.js | 2 +- .../sidebar/SidebarScreen/index.native.js | 2 +- 9 files changed, 88 insertions(+), 7 deletions(-) create mode 100644 src/components/withNavigation.js create mode 100644 src/components/withNavigationFocus.js 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 => ; From af76974904b5f88447502ebb67c2ccc745246016 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Tue, 12 Jul 2022 15:07:10 -1000 Subject: [PATCH 2/2] package-lock --- package-lock.json | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) 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",