Merge pull request #24405 from tienifr/fix/22929-forwardref-console-e…

…rror

Fix/22929 forwardref console error

src/components/AmountTextInput.js

@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 import TextInput from './TextInput';
 import styles from '../styles/styles';
 import CONST from '../CONST';
+import refPropTypes from './refPropTypes';
 
 const propTypes = {
     /** Formatted amount in local currency  */
     formattedAmount: PropTypes.string.isRequired,
 
     /** A ref to forward to amount text input */
-    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
+    forwardedRef: refPropTypes,
 
     /** Function to call when amount in text input is changed */
     onChangeAmount: PropTypes.func.isRequired,

src/components/Attachments/AttachmentCarousel/Pager/index.js

@@ -8,6 +8,7 @@ import PagerView from 'react-native-pager-view';
 import _ from 'underscore';
 import styles from '../../../../styles/styles';
 import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
+import refPropTypes from '../../../refPropTypes';
 
 const AnimatedPagerView = Animated.createAnimatedComponent(createNativeWrapper(PagerView));
 
@@ -50,7 +51,7 @@ const pagerPropTypes = {
     onSwipeSuccess: PropTypes.func,
     onSwipeDown: PropTypes.func,
     onPinchGestureChange: PropTypes.func,
-    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    forwardedRef: refPropTypes,
     containerWidth: PropTypes.number.isRequired,
     containerHeight: PropTypes.number.isRequired,
 };

src/components/Button/index.js

@@ -15,6 +15,7 @@ import * as Expensicons from '../Icon/Expensicons';
 import withNavigationFocus from '../withNavigationFocus';
 import validateSubmitShortcut from './validateSubmitShortcut';
 import PressableWithFeedback from '../Pressable/PressableWithFeedback';
+import refPropTypes from '../refPropTypes';
 
 const propTypes = {
     /** The text for the button label */
@@ -118,8 +119,7 @@ const propTypes = {
     accessibilityLabel: PropTypes.string,
 
     /** A ref to forward the button */
-    // eslint-disable-next-line react/forbid-prop-types
-    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.object})]),
+    forwardedRef: refPropTypes,
 };
 
 const defaultProps = {

src/components/Checkbox.js

@@ -9,6 +9,7 @@ import * as Expensicons from './Icon/Expensicons';
 import * as StyleUtils from '../styles/StyleUtils';
 import CONST from '../CONST';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
+import refPropTypes from './refPropTypes';
 
 const propTypes = {
     /** Whether checkbox is checked */
@@ -45,7 +46,7 @@ const propTypes = {
     caretSize: PropTypes.number,
 
     /** A ref to forward to the Pressable */
-    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
+    forwardedRef: refPropTypes,
 
     /** An accessibility label for the checkbox */
     accessibilityLabel: PropTypes.string.isRequired,

src/components/CountryPicker/index.js

@@ -7,6 +7,7 @@ import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
 import useLocalize from '../../hooks/useLocalize';
 import CountrySelectorModal from './CountrySelectorModal';
 import FormHelpMessage from '../FormHelpMessage';
+import refPropTypes from '../refPropTypes';
 
 const propTypes = {
     /** Form Error description */
@@ -19,7 +20,7 @@ const propTypes = {
     onInputChange: PropTypes.func,
 
     /** A ref to forward to MenuItemWithTopDescription */
-    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
+    forwardedRef: refPropTypes,
 };
 
 const defaultProps = {

src/components/Picker/BasePicker.js

@@ -10,10 +10,11 @@ import Text from '../Text';
 import styles from '../../styles/styles';
 import themeColors from '../../styles/themes/default';
 import {ScrollContext} from '../ScrollViewWithContext';
+import refPropTypes from '../refPropTypes';
 
 const propTypes = {
     /** A forwarded ref */
-    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
+    forwardedRef: refPropTypes,
 
     /** BasePicker label */
     label: PropTypes.string,

src/components/Pressable/PressableWithDelayToggle.js

@@ -10,10 +10,11 @@ import getButtonState from '../../libs/getButtonState';
 import * as StyleUtils from '../../styles/StyleUtils';
 import PressableWithoutFeedback from './PressableWithoutFeedback';
 import useThrottledButtonState from '../../hooks/useThrottledButtonState';
+import refPropTypes from '../refPropTypes';
 
 const propTypes = {
     /** Ref passed to the component by React.forwardRef (do not pass from parent) */
-    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
+    innerRef: refPropTypes,
 
     /** The text to display */
     text: PropTypes.string,

src/components/StatePicker/index.js

@@ -7,6 +7,7 @@ import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
 import useLocalize from '../../hooks/useLocalize';
 import FormHelpMessage from '../FormHelpMessage';
 import StateSelectorModal from './StateSelectorModal';
+import refPropTypes from '../refPropTypes';
 
 const propTypes = {
     /** Error text to display */
@@ -19,7 +20,7 @@ const propTypes = {
     onInputChange: PropTypes.func,
 
     /** A ref to forward to MenuItemWithTopDescription */
-    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
+    forwardedRef: refPropTypes,
 
     /** Label to display on field */
     label: PropTypes.string,

src/components/TextInputWithCurrencySymbol.js

@@ -5,10 +5,11 @@ import CurrencySymbolButton from './CurrencySymbolButton';
 import * as CurrencyUtils from '../libs/CurrencyUtils';
 import useLocalize from '../hooks/useLocalize';
 import * as MoneyRequestUtils from '../libs/MoneyRequestUtils';
+import refPropTypes from './refPropTypes';
 
 const propTypes = {
     /** A ref to forward to amount text input */
-    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
+    forwardedRef: refPropTypes,
 
     /** Formatted amount in local currency  */
     formattedAmount: PropTypes.string.isRequired,

src/components/TextLink.js

@@ -6,6 +6,7 @@ import styles from '../styles/styles';
 import stylePropTypes from '../styles/stylePropTypes';
 import CONST from '../CONST';
 import * as Link from '../libs/actions/Link';
+import refPropTypes from './refPropTypes';
 
 const propTypes = {
     /** Link to open in new tab */
@@ -24,7 +25,7 @@ const propTypes = {
     onMouseDown: PropTypes.func,
 
     /** A ref to forward to text */
-    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
+    forwardedRef: refPropTypes,
 };
 
 const defaultProps = {

src/components/menuItemPropTypes.js

@@ -3,6 +3,7 @@ import _ from 'underscore';
 import CONST from '../CONST';
 import stylePropTypes from '../styles/stylePropTypes';
 import avatarPropTypes from './avatarPropTypes';
+import refPropTypes from './refPropTypes';
 
 const propTypes = {
     /** Text to be shown as badge near the right end. */
@@ -118,7 +119,7 @@ const propTypes = {
     shouldBlockSelection: PropTypes.bool,
 
     /** The ref to the menu item */
-    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    forwardedRef: refPropTypes,
 
     /** Any adjustments to style when menu item is hovered or pressed */
     hoverAndPressStyle: PropTypes.arrayOf(PropTypes.object),

src/components/withAnimatedRef.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {useAnimatedRef} from 'react-native-reanimated';
-import PropTypes from 'prop-types';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
+import refPropTypes from './refPropTypes';
 
 export default function withAnimatedRef(WrappedComponent) {
     function WithAnimatedRef(props) {
@@ -17,7 +17,7 @@ export default function withAnimatedRef(WrappedComponent) {
     }
     WithAnimatedRef.displayName = `withAnimatedRef(${getComponentDisplayName(WrappedComponent)})`;
     WithAnimatedRef.propTypes = {
-        forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
+        forwardedRef: refPropTypes,
     };
     WithAnimatedRef.defaultProps = {
         forwardedRef: undefined,

src/components/withCurrentUserPersonalDetails.js

@@ -4,6 +4,7 @@ import {withOnyx} from 'react-native-onyx';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
 import ONYXKEYS from '../ONYXKEYS';
 import personalDetailsPropType from '../pages/personalDetailsPropType';
+import refPropTypes from './refPropTypes';
 
 const withCurrentUserPersonalDetailsPropTypes = {
     currentUserPersonalDetails: personalDetailsPropType,
@@ -15,7 +16,7 @@ const withCurrentUserPersonalDetailsDefaultProps = {
 
 export default function (WrappedComponent) {
     const propTypes = {
-        forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
+        forwardedRef: refPropTypes,
 
         /** Personal details of all the users, including current user */
         personalDetails: PropTypes.objectOf(personalDetailsPropType),

src/components/withNavigation.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {useNavigation} from '@react-navigation/native';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
+import refPropTypes from './refPropTypes';
 
 const withNavigationPropTypes = {
     navigation: PropTypes.object.isRequired,
@@ -22,7 +23,7 @@ export default function withNavigation(WrappedComponent) {
 
     WithNavigation.displayName = `withNavigation(${getComponentDisplayName(WrappedComponent)})`;
     WithNavigation.propTypes = {
-        forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
+        forwardedRef: refPropTypes,
     };
     WithNavigation.defaultProps = {
         forwardedRef: () => {},

src/components/withNavigationFallback.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
 import {NavigationContext} from '@react-navigation/core';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
+import refPropTypes from './refPropTypes';
 
 export default function (WrappedComponent) {
     class WithNavigationFallback extends Component {
@@ -36,8 +36,7 @@ export default function (WrappedComponent) {
     WithNavigationFallback.contextType = NavigationContext;
     WithNavigationFallback.displayName = `WithNavigationFocusWithFallback(${getComponentDisplayName(WrappedComponent)})`;
     WithNavigationFallback.propTypes = {
-        // eslint-disable-next-line react/forbid-prop-types
-        forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.object})]),
+        forwardedRef: refPropTypes,
     };
     WithNavigationFallback.defaultProps = {
         forwardedRef: undefined,

src/components/withNavigationFocus.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {useIsFocused} from '@react-navigation/native';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
+import refPropTypes from './refPropTypes';
 
 const withNavigationFocusPropTypes = {
     isFocused: PropTypes.bool.isRequired,
@@ -22,8 +23,7 @@ export default function withNavigationFocus(WrappedComponent) {
 
     WithNavigationFocus.displayName = `withNavigationFocus(${getComponentDisplayName(WrappedComponent)})`;
     WithNavigationFocus.propTypes = {
-        // eslint-disable-next-line react/forbid-prop-types
-        forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.object})]),
+        forwardedRef: refPropTypes,
     };
     WithNavigationFocus.defaultProps = {
         forwardedRef: undefined,

src/components/withToggleVisibilityView.js

@@ -3,6 +3,7 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
+import refPropTypes from './refPropTypes';
 
 const toggleVisibilityViewPropTypes = {
     /** Whether the content is visible. */
@@ -25,7 +26,7 @@ export default function (WrappedComponent) {
 
     WithToggleVisibilityView.displayName = `WithToggleVisibilityView(${getComponentDisplayName(WrappedComponent)})`;
     WithToggleVisibilityView.propTypes = {
-        forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
+        forwardedRef: refPropTypes,
 
         /** Whether the content is visible. */
         isVisible: PropTypes.bool,

src/components/withViewportOffsetTop.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
 import addViewportResizeListener from '../libs/VisualViewport';
+import refPropTypes from './refPropTypes';
 
 const viewportOffsetTopPropTypes = {
     // viewportOffsetTop returns the offset of the top edge of the visual viewport from the
@@ -53,8 +54,7 @@ export default function (WrappedComponent) {
 
     WithViewportOffsetTop.displayName = `WithViewportOffsetTop(${getComponentDisplayName(WrappedComponent)})`;
     WithViewportOffsetTop.propTypes = {
-        // eslint-disable-next-line react/forbid-prop-types
-        forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.any})]),
+        forwardedRef: refPropTypes,
     };
     WithViewportOffsetTop.defaultProps = {
         forwardedRef: undefined,

src/pages/iou/steps/MoneyRequestAmountForm.js

@@ -12,6 +12,7 @@ import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
 import TextInputWithCurrencySymbol from '../../../components/TextInputWithCurrencySymbol';
 import useLocalize from '../../../hooks/useLocalize';
 import CONST from '../../../CONST';
+import refPropTypes from '../../../components/refPropTypes';
 
 const propTypes = {
     /** IOU amount saved in Onyx */
@@ -24,7 +25,7 @@ const propTypes = {
     isEditing: PropTypes.bool,
 
     /** Refs forwarded to the TextInputWithCurrencySymbol */
-    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
+    forwardedRef: refPropTypes,
 
     /** Fired when back button pressed, navigates to currency selection page */
     onCurrencyButtonPress: PropTypes.func.isRequired,