Jakubkalinski0/fix console errors related to forward ref batch7 - PR after second revert

src/components/ActionSheetAwareScrollView/index.ios.tsx

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

src/components/ActionSheetAwareScrollView/index.tsx

@@ -1,20 +1,21 @@
 // this whole file is just for other platforms
 // iOS version has everything implemented
-import React, {forwardRef} from 'react';
+import React 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';
 
-const ActionSheetAwareScrollView = forwardRef<ScrollView, ActionSheetAwareScrollViewProps>((props, ref) => (
-    <ScrollView
-        ref={ref}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-    >
-        {props.children}
-    </ScrollView>
-));
+function ActionSheetAwareScrollView(props: ActionSheetAwareScrollViewProps) {
+    return (
+        <ScrollView
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+        >
+            {props.children}
+        </ScrollView>
+    );
+}
 
 export default ActionSheetAwareScrollView;
 

src/components/ActionSheetAwareScrollView/types.ts

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

src/components/AddressSearch/index.tsx

@@ -1,5 +1,4 @@
-import React, {forwardRef, useEffect, useMemo, useRef, useState} from 'react';
-import type {ForwardedRef} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {Keyboard, LogBox, View} from 'react-native';
 import type {LayoutChangeEvent} from 'react-native';
 import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
@@ -49,40 +48,38 @@ 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,
-    }: AddressSearchProps,
-    ref: ForwardedRef<HTMLElement>,
-) {
+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) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -490,6 +487,6 @@ function AddressSearch(
 
 AddressSearch.displayName = 'AddressSearchWithRef';
 
-export default forwardRef(AddressSearch);
+export default AddressSearch;
 
 export type {AddressSearchProps};

src/components/AddressSearch/types.ts

@@ -1,4 +1,4 @@
-import type {RefObject} from 'react';
+import type {ForwardedRef, RefObject} from 'react';
 import type {BlurEvent, StyleProp, View, ViewStyle} from 'react-native';
 import type {Place} from 'react-native-google-places-autocomplete';
 import type {Country} from '@src/CONST';
@@ -90,6 +90,9 @@ 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 | BlurEvent, containerRef: RefObject<View | HTMLElement | null>) => boolean;

src/components/AmountPicker/index.tsx

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

src/components/AmountPicker/types.ts

@@ -1,3 +1,5 @@
+import type {ForwardedRef} from 'react';
+import type {View} from 'react-native';
 import type {MenuItemBaseProps} from '@components/MenuItem';
 import type {NumberWithSymbolFormProps} from '@components/NumberWithSymbolForm';
 
@@ -47,6 +49,9 @@ 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,10 +1,9 @@
 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, BaseTextInputRef} from './TextInput/BaseTextInput/types';
+import type {BaseTextInputProps} from './TextInput/BaseTextInput/types';
 
 type AmountFormProps = {
     /** Amount supplied by the FormProvider */
@@ -23,10 +22,21 @@ type AmountFormProps = {
     toggleNegative?: () => void;
 } & Partial<BaseTextInputProps>;
 
-function AmountWithoutCurrencyInput(
-    {value: amount, shouldAllowNegative = false, inputID, name, defaultValue, accessibilityLabel, role, label, onInputChange, allowFlippingAmount, toggleNegative, ...rest}: AmountFormProps,
-    ref: ForwardedRef<BaseTextInputRef>,
-) {
+function AmountWithoutCurrencyInput({
+    value: amount,
+    shouldAllowNegative = false,
+    inputID,
+    name,
+    defaultValue,
+    accessibilityLabel,
+    role,
+    label,
+    onInputChange,
+    allowFlippingAmount,
+    toggleNegative,
+    ref,
+    ...rest
+}: AmountFormProps) {
     const {toLocaleDigit} = useLocalize();
     const separator = useMemo(
         () =>
@@ -94,4 +104,4 @@ function AmountWithoutCurrencyInput(
 
 AmountWithoutCurrencyInput.displayName = 'AmountWithoutCurrencyInput';
 
-export default React.forwardRef(AmountWithoutCurrencyInput);
+export default 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, onSwipeDown, reportID, onAttachmentError}: AttachmentCarouselPagerProps,
-    ref: ForwardedRef<AttachmentCarouselPagerHandle>,
-) {
+function AttachmentCarouselPager({items, activeAttachmentID, initialPage, setShouldShowArrows, onPageSelected, onSwipeDown, reportID, onAttachmentError, ref}: AttachmentCarouselPagerProps) {
     const {handleTap, handleScaleChange, isScrollEnabled} = useCarouselContextEvents(setShouldShowArrows);
     const styles = useThemeStyles();
     const pagerRef = useRef<PagerView>(null);
@@ -153,5 +153,5 @@ function AttachmentCarouselPager(
 }
 AttachmentCarouselPager.displayName = 'AttachmentCarouselPager';
 
-export default React.forwardRef(AttachmentCarouselPager);
+export default AttachmentCarouselPager;
 export type {AttachmentCarouselPagerHandle};

src/components/CheckboxWithLabel.tsx

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

src/components/ContextMenuItem.tsx

@@ -1,5 +1,5 @@
 import type {ForwardedRef} from 'react';
-import React, {forwardRef, useImperativeHandle} from 'react';
+import React, {useImperativeHandle} from 'react';
 import type {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -61,34 +61,35 @@ 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,
-    }: ContextMenuItemProps,
-    ref: ForwardedRef<ContextMenuItemHandle>,
-) {
+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) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {windowWidth} = useWindowDimensions();
@@ -151,5 +152,5 @@ function ContextMenuItem(
 
 ContextMenuItem.displayName = 'ContextMenuItem';
 
-export default forwardRef(ContextMenuItem);
+export default ContextMenuItem;
 export type {ContextMenuItemHandle};