[CP Staging] Revert "Jakubkalinski0/fix console errors related to forward ref batch7"

src/components/ActionSheetAwareScrollView/index.ios.tsx

@@ -1,10 +1,12 @@
-import React, {useCallback} from 'react';
+import React, {forwardRef, useCallback} from 'react';
+// eslint-disable-next-line no-restricted-imports
+import type {ScrollView} from 'react-native';
 import Reanimated, {useAnimatedRef, useAnimatedStyle} from 'react-native-reanimated';
 import {Actions, ActionSheetAwareScrollViewContext, ActionSheetAwareScrollViewProvider} from './ActionSheetAwareScrollViewContext';
 import type {ActionSheetAwareScrollViewProps, RenderActionSheetAwareScrollViewComponent} from './types';
 import useActionSheetKeyboardSpacing from './useActionSheetKeyboardSpacing';
 
-function ActionSheetAwareScrollView({style, children, ref, ...props}: ActionSheetAwareScrollViewProps) {
+const ActionSheetAwareScrollView = forwardRef<ScrollView, ActionSheetAwareScrollViewProps>(({style, children, ...props}, ref) => {
     const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();
 
     const onRef = useCallback(
@@ -36,7 +38,7 @@ function ActionSheetAwareScrollView({style, children, ref, ...props}: ActionShee
             {children}
         </Reanimated.ScrollView>
     );
-}
+});
 
 export default ActionSheetAwareScrollView;
 

src/components/ActionSheetAwareScrollView/index.tsx

@@ -1,21 +1,20 @@
 // this whole file is just for other platforms
 // iOS version has everything implemented
-import React from 'react';
+import React, {forwardRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {ScrollView} from 'react-native';
 import {Actions, ActionSheetAwareScrollViewContext, ActionSheetAwareScrollViewProvider} from './ActionSheetAwareScrollViewContext';
 import type {ActionSheetAwareScrollViewProps, RenderActionSheetAwareScrollViewComponent} from './types';
 
-function ActionSheetAwareScrollView(props: ActionSheetAwareScrollViewProps) {
-    return (
-        <ScrollView
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-        >
-            {props.children}
-        </ScrollView>
-    );
-}
+const ActionSheetAwareScrollView = forwardRef<ScrollView, ActionSheetAwareScrollViewProps>((props, ref) => (
+    <ScrollView
+        ref={ref}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+    >
+        {props.children}
+    </ScrollView>
+));
 
 export default ActionSheetAwareScrollView;
 

src/components/ActionSheetAwareScrollView/types.ts

@@ -1,10 +1,6 @@
-import type {PropsWithChildren, Ref} from 'react';
-// eslint-disable-next-line no-restricted-imports
-import type {ScrollView, ScrollViewProps} from 'react-native';
+import type {PropsWithChildren} from 'react';
+import type {ScrollViewProps} from 'react-native';
 
-type ActionSheetAwareScrollViewAnimationProps = {
-    ref?: Ref<ScrollView>;
-};
-type ActionSheetAwareScrollViewProps = PropsWithChildren<ScrollViewProps> & ActionSheetAwareScrollViewAnimationProps;
+type ActionSheetAwareScrollViewProps = PropsWithChildren<ScrollViewProps>;
 type RenderActionSheetAwareScrollViewComponent = ((props: ActionSheetAwareScrollViewProps) => React.ReactElement<ScrollViewProps>) | undefined;
 export type {ActionSheetAwareScrollViewProps, RenderActionSheetAwareScrollViewComponent};

src/components/AddressSearch/index.tsx

@@ -1,4 +1,5 @@
-import React, {useEffect, useMemo, useRef, useState} from 'react';
+import React, {forwardRef, useEffect, useMemo, useRef, useState} from 'react';
+import type {ForwardedRef} from 'react';
 import {Keyboard, LogBox, View} from 'react-native';
 import type {LayoutChangeEvent} from 'react-native';
 import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
@@ -48,38 +49,40 @@ function isPlaceMatchForSearch(search: string, place: PredefinedPlace): boolean
 // VirtualizedList component with a VirtualizedList-backed instead
 LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
 
-function AddressSearch({
-    canUseCurrentLocation = false,
-    containerStyles,
-    defaultValue,
-    errorText = '',
-    hint = '',
-    inputID,
-    limitSearchesToCountry,
-    label,
-    maxInputLength,
-    onFocus,
-    onBlur,
-    onInputChange,
-    onPress,
-    onCountryChange,
-    predefinedPlaces = [],
-    renamedInputKeys = {
-        street: 'addressStreet',
-        street2: 'addressStreet2',
-        city: 'addressCity',
-        state: 'addressState',
-        zipCode: 'addressZipCode',
-        lat: 'addressLat',
-        lng: 'addressLng',
-    },
-    resultTypes = 'address',
-    shouldSaveDraft = false,
-    value,
-    locationBias,
-    caretHidden,
-    ref,
-}: AddressSearchProps) {
+function AddressSearch(
+    {
+        canUseCurrentLocation = false,
+        containerStyles,
+        defaultValue,
+        errorText = '',
+        hint = '',
+        inputID,
+        limitSearchesToCountry,
+        label,
+        maxInputLength,
+        onFocus,
+        onBlur,
+        onInputChange,
+        onPress,
+        onCountryChange,
+        predefinedPlaces = [],
+        renamedInputKeys = {
+            street: 'addressStreet',
+            street2: 'addressStreet2',
+            city: 'addressCity',
+            state: 'addressState',
+            zipCode: 'addressZipCode',
+            lat: 'addressLat',
+            lng: 'addressLng',
+        },
+        resultTypes = 'address',
+        shouldSaveDraft = false,
+        value,
+        locationBias,
+        caretHidden,
+    }: AddressSearchProps,
+    ref: ForwardedRef<HTMLElement>,
+) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -487,6 +490,6 @@ function AddressSearch({
 
 AddressSearch.displayName = 'AddressSearchWithRef';
 
-export default AddressSearch;
+export default forwardRef(AddressSearch);
 
 export type {AddressSearchProps};

src/components/AddressSearch/types.ts

@@ -1,4 +1,4 @@
-import type {ForwardedRef, RefObject} from 'react';
+import type {RefObject} from 'react';
 import type {NativeSyntheticEvent, StyleProp, TextInputFocusEventData, View, ViewStyle} from 'react-native';
 import type {Place} from 'react-native-google-places-autocomplete';
 import type {Country} from '@src/CONST';
@@ -90,9 +90,6 @@ type AddressSearchProps = {
 
     /** If true, caret is hidden. The default value is false. */
     caretHidden?: boolean;
-
-    /** Reference to the outer element */
-    ref?: ForwardedRef<HTMLElement>;
 };
 
 type IsCurrentTargetInsideContainerType = (event: FocusEvent | NativeSyntheticEvent<TextInputFocusEventData>, containerRef: RefObject<View | HTMLElement | null>) => boolean;

src/components/AmountPicker/index.tsx

@@ -1,4 +1,5 @@
-import React, {useState} from 'react';
+import React, {forwardRef, useState} from 'react';
+import type {ForwardedRef} from 'react';
 import {View} from 'react-native';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import blurActiveElement from '@libs/Accessibility/blurActiveElement';
@@ -7,7 +8,7 @@ import callOrReturn from '@src/types/utils/callOrReturn';
 import AmountSelectorModal from './AmountSelectorModal';
 import type {AmountPickerProps} from './types';
 
-function AmountPicker({value, description, title, errorText = '', onInputChange, furtherDetails, rightLabel, ref, ...rest}: AmountPickerProps) {
+function AmountPicker({value, description, title, errorText = '', onInputChange, furtherDetails, rightLabel, ...rest}: AmountPickerProps, forwardedRef: ForwardedRef<View>) {
     const [isPickerVisible, setIsPickerVisible] = useState(false);
 
     const showPickerModal = () => {
@@ -30,7 +31,7 @@ function AmountPicker({value, description, title, errorText = '', onInputChange,
     return (
         <View>
             <MenuItemWithTopDescription
-                ref={ref}
+                ref={forwardedRef}
                 shouldShowRightIcon
                 title={callOrReturn(title, value)}
                 description={description}
@@ -55,4 +56,4 @@ function AmountPicker({value, description, title, errorText = '', onInputChange,
 
 AmountPicker.displayName = 'AmountPicker';
 
-export default AmountPicker;
+export default forwardRef(AmountPicker);

src/components/AmountPicker/types.ts

@@ -1,5 +1,3 @@
-import type {ForwardedRef} from 'react';
-import type {View} from 'react-native';
 import type {MenuItemBaseProps} from '@components/MenuItem';
 import type {NumberWithSymbolFormProps} from '@components/NumberWithSymbolForm';
 
@@ -49,9 +47,6 @@ type AmountPickerProps = {
 
     /** Whether to show the tooltip text */
     shouldShowTooltips?: boolean;
-
-    /** Reference to the outer element */
-    ref?: ForwardedRef<View>;
 } & Pick<MenuItemBaseProps, 'rightLabel' | 'description'> &
     Pick<
         NumberWithSymbolFormProps,

src/components/AmountWithoutCurrencyInput.tsx

@@ -1,9 +1,10 @@
 import React, {useCallback, useMemo} from 'react';
+import type {ForwardedRef} from 'react';
 import useLocalize from '@hooks/useLocalize';
 import getAmountInputKeyboard from '@libs/getAmountInputKeyboard';
 import {handleNegativeAmountFlipping, replaceAllDigits, replaceCommasWithPeriod, stripSpacesFromAmount} from '@libs/MoneyRequestUtils';
 import TextInput from './TextInput';
-import type {BaseTextInputProps} from './TextInput/BaseTextInput/types';
+import type {BaseTextInputProps, BaseTextInputRef} from './TextInput/BaseTextInput/types';
 
 type AmountFormProps = {
     /** Amount supplied by the FormProvider */
@@ -22,21 +23,10 @@ type AmountFormProps = {
     toggleNegative?: () => void;
 } & Partial<BaseTextInputProps>;
 
-function AmountWithoutCurrencyInput({
-    value: amount,
-    shouldAllowNegative = false,
-    inputID,
-    name,
-    defaultValue,
-    accessibilityLabel,
-    role,
-    label,
-    onInputChange,
-    allowFlippingAmount,
-    toggleNegative,
-    ref,
-    ...rest
-}: AmountFormProps) {
+function AmountWithoutCurrencyInput(
+    {value: amount, shouldAllowNegative = false, inputID, name, defaultValue, accessibilityLabel, role, label, onInputChange, allowFlippingAmount, toggleNegative, ...rest}: AmountFormProps,
+    ref: ForwardedRef<BaseTextInputRef>,
+) {
     const {toLocaleDigit} = useLocalize();
     const separator = useMemo(
         () =>
@@ -104,4 +94,4 @@ function AmountWithoutCurrencyInput({
 
 AmountWithoutCurrencyInput.displayName = 'AmountWithoutCurrencyInput';
 
-export default AmountWithoutCurrencyInput;
+export default React.forwardRef(AmountWithoutCurrencyInput);

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

@@ -48,12 +48,12 @@ type AttachmentCarouselPagerProps = {
 
     /** Callback for attachment errors */
     onAttachmentError?: (source: AttachmentSource) => void;
-
-    /** Reference to the outer element */
-    ref?: ForwardedRef<AttachmentCarouselPagerHandle>;
 };
 
-function AttachmentCarouselPager({items, activeAttachmentID, initialPage, setShouldShowArrows, onPageSelected, onClose, reportID, onAttachmentError, ref}: AttachmentCarouselPagerProps) {
+function AttachmentCarouselPager(
+    {items, activeAttachmentID, initialPage, setShouldShowArrows, onPageSelected, onClose, reportID, onAttachmentError}: AttachmentCarouselPagerProps,
+    ref: ForwardedRef<AttachmentCarouselPagerHandle>,
+) {
     const {handleTap, handleScaleChange, isScrollEnabled} = useCarouselContextEvents(setShouldShowArrows);
     const styles = useThemeStyles();
     const pagerRef = useRef<PagerView>(null);
@@ -153,5 +153,5 @@ function AttachmentCarouselPager({items, activeAttachmentID, initialPage, setSho
 }
 AttachmentCarouselPager.displayName = 'AttachmentCarouselPager';
 
-export default AttachmentCarouselPager;
+export default React.forwardRef(AttachmentCarouselPager);
 export type {AttachmentCarouselPagerHandle};

src/components/CheckboxWithLabel.tsx

@@ -58,23 +58,12 @@ type CheckboxWithLabelProps = RequiredLabelProps & {
 
     /** An accessibility label for the checkbox */
     accessibilityLabel?: string;
-
-    /** Reference to the outer element */
-    ref?: ForwardedRef<View>;
 };
 
-function CheckboxWithLabel({
-    errorText = '',
-    isChecked: isCheckedProp = false,
-    defaultValue = false,
-    onInputChange = () => {},
-    LabelComponent,
-    label,
-    accessibilityLabel,
-    style,
-    value,
-    ref,
-}: CheckboxWithLabelProps) {
+function CheckboxWithLabel(
+    {errorText = '', isChecked: isCheckedProp = false, defaultValue = false, onInputChange = () => {}, LabelComponent, label, accessibilityLabel, style, value}: CheckboxWithLabelProps,
+    ref: ForwardedRef<View>,
+) {
     const styles = useThemeStyles();
     // We need to pick the first value that is strictly a boolean
     // https://github.com/Expensify/App/issues/16885#issuecomment-1520846065
@@ -117,6 +106,6 @@ function CheckboxWithLabel({
 
 CheckboxWithLabel.displayName = 'CheckboxWithLabel';
 
-export default CheckboxWithLabel;
+export default React.forwardRef(CheckboxWithLabel);
 
 export type {CheckboxWithLabelProps};

src/components/ContextMenuItem.tsx

@@ -1,5 +1,5 @@
 import type {ForwardedRef} from 'react';
-import React, {useImperativeHandle} from 'react';
+import React, {forwardRef, useImperativeHandle} from 'react';
 import type {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -61,35 +61,34 @@ type ContextMenuItemProps = {
 
     /** Whether the menu item should show loading icon */
     shouldShowLoadingSpinnerIcon?: boolean;
-
-    /** Reference to the outer element */
-    ref?: ForwardedRef<ContextMenuItemHandle>;
 };
 
 type ContextMenuItemHandle = {
     triggerPressAndUpdateSuccess?: () => void;
 };
 
-function ContextMenuItem({
-    onPress,
-    successIcon,
-    successText = '',
-    icon,
-    text,
-    isMini = false,
-    description = '',
-    isAnonymousAction = false,
-    isFocused = false,
-    shouldLimitWidth = true,
-    wrapperStyle,
-    shouldPreventDefaultFocusOnPress = true,
-    buttonRef = {current: null},
-    onFocus = () => {},
-    onBlur = () => {},
-    disabled = false,
-    shouldShowLoadingSpinnerIcon = false,
-    ref,
-}: ContextMenuItemProps) {
+function ContextMenuItem(
+    {
+        onPress,
+        successIcon,
+        successText = '',
+        icon,
+        text,
+        isMini = false,
+        description = '',
+        isAnonymousAction = false,
+        isFocused = false,
+        shouldLimitWidth = true,
+        wrapperStyle,
+        shouldPreventDefaultFocusOnPress = true,
+        buttonRef = {current: null},
+        onFocus = () => {},
+        onBlur = () => {},
+        disabled = false,
+        shouldShowLoadingSpinnerIcon = false,
+    }: ContextMenuItemProps,
+    ref: ForwardedRef<ContextMenuItemHandle>,
+) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {windowWidth} = useWindowDimensions();
@@ -152,5 +151,5 @@ function ContextMenuItem({
 
 ContextMenuItem.displayName = 'ContextMenuItem';
 
-export default ContextMenuItem;
+export default forwardRef(ContextMenuItem);
 export type {ContextMenuItemHandle};