Jakubkalinski0/fix console errors related to forward ref batch5

src/components/ButtonWithDropdownMenu/index.tsx

@@ -17,15 +17,15 @@ import mergeRefs from '@libs/mergeRefs';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {AnchorPosition} from '@src/styles';
-import type {ButtonWithDropdownMenuProps, ButtonWithDropdownMenuRef} from './types';
+import type {ButtonWithDropdownMenuProps} from './types';
 
 const defaultAnchorAlignment = {
     horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
     // we assume that popover menu opens below the button, anchor is at TOP
     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
 };
 
-function ButtonWithDropdownMenuInner<IValueType>({ref, ...props}: ButtonWithDropdownMenuProps<IValueType>) {
+function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownMenuProps<IValueType>) {
     const {
         success = true,
         isSplitButton = true,
@@ -296,8 +296,6 @@ function ButtonWithDropdownMenuInner<IValueType>({ref, ...props}: ButtonWithDrop
     );
 }
 
-ButtonWithDropdownMenuInner.displayName = 'ButtonWithDropdownMenu';
-const ButtonWithDropdownMenu = ButtonWithDropdownMenuInner as <IValueType>(
-    props: ButtonWithDropdownMenuProps<IValueType> & {ref?: React.Ref<ButtonWithDropdownMenuRef>},
-) => ReturnType<typeof ButtonWithDropdownMenuInner>;
+ButtonWithDropdownMenu.displayName = 'ButtonWithDropdownMenu';
+
 export default ButtonWithDropdownMenu;

src/components/EmojiPicker/EmojiPicker.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-compiler/react-compiler */
-import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import type {ForwardedRef, RefObject} from 'react';
 import {Dimensions, View} from 'react-native';
 import type {Emoji} from '@assets/emojis/types';
@@ -28,9 +28,10 @@ const DEFAULT_ANCHOR_ORIGIN = {
 
 type EmojiPickerProps = {
     viewportOffsetTop: number;
+    ref?: ForwardedRef<EmojiPickerRef>;
 };
 
-function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef<EmojiPickerRef>) {
+function EmojiPicker({viewportOffsetTop, ref}: EmojiPickerProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const [isEmojiPickerVisible, setIsEmojiPickerVisible] = useState(false);
@@ -246,4 +247,4 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef<Em
 }
 
 EmojiPicker.displayName = 'EmojiPicker';
-export default withViewportOffsetTop(forwardRef(EmojiPicker));
+export default withViewportOffsetTop(EmojiPicker);

src/components/EmojiPicker/EmojiPickerButtonDropdown.tsx

@@ -27,13 +27,13 @@ type EmojiPickerButtonDropdownProps = {
     disabled?: boolean;
     style: StyleProp<ViewStyle>;
     withoutOverlay?: boolean;
+    ref?: ForwardedRef<AnimatedTextInputRef>;
 };
 
 function EmojiPickerButtonDropdown(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    {isDisabled = false, withoutOverlay = false, onModalHide, onInputChange, value, disabled, style, ...otherProps}: EmojiPickerButtonDropdownProps,
+    {isDisabled = false, withoutOverlay = false, onModalHide, onInputChange, value, disabled, style, ref, ...otherProps}: EmojiPickerButtonDropdownProps,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ref: ForwardedRef<AnimatedTextInputRef>,
 ) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -105,4 +105,4 @@ function EmojiPickerButtonDropdown(
 
 EmojiPickerButtonDropdown.displayName = 'EmojiPickerButtonDropdown';
 
-export default React.forwardRef(EmojiPickerButtonDropdown);
+export default EmojiPickerButtonDropdown;

src/components/EmojiPicker/EmojiPickerMenu/BaseEmojiPickerMenu.tsx

@@ -40,6 +40,9 @@ type BaseEmojiPickerMenuProps = {
 
     /** Whether the list should always bounce vertically */
     alwaysBounceVertical?: boolean;
+
+    /** Reference to the outer element */
+    ref?: ForwardedRef<FlashListRef<EmojiPickerListItem>>;
 };
 
 /**
@@ -77,10 +80,18 @@ function ListEmptyComponent() {
     return <Text style={[styles.textLabel, styles.colorMuted]}>{translate('common.noResultsFound')}</Text>;
 }
 
-function BaseEmojiPickerMenu(
-    {headerEmojis, scrollToHeader, isFiltered, listWrapperStyle = [], data, renderItem, stickyHeaderIndices = [], extraData = [], alwaysBounceVertical = false}: BaseEmojiPickerMenuProps,
-    ref: ForwardedRef<FlashListRef<EmojiPickerListItem>>,
-) {
+function BaseEmojiPickerMenu({
+    headerEmojis,
+    scrollToHeader,
+    isFiltered,
+    listWrapperStyle = [],
+    data,
+    renderItem,
+    stickyHeaderIndices = [],
+    extraData = [],
+    alwaysBounceVertical = false,
+    ref,
+}: BaseEmojiPickerMenuProps) {
     const styles = useThemeStyles();
     return (
         <>
@@ -123,4 +134,4 @@ function BaseEmojiPickerMenu(
 
 BaseEmojiPickerMenu.displayName = 'BaseEmojiPickerMenu';
 
-export default React.forwardRef(BaseEmojiPickerMenu);
+export default BaseEmojiPickerMenu;

src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx

@@ -1,13 +1,11 @@
 import type {ListRenderItem} from '@shopify/flash-list';
 import lodashDebounce from 'lodash/debounce';
 import React, {useCallback} from 'react';
-import type {ForwardedRef} from 'react';
 import {InteractionManager, View} from 'react-native';
 import type {Emoji} from '@assets/emojis/types';
 import EmojiPickerMenuItem from '@components/EmojiPicker/EmojiPickerMenuItem';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
-import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSingleExecution from '@hooks/useSingleExecution';
@@ -23,7 +21,7 @@ import type EmojiPickerMenuProps from './types';
 import useEmojiPickerMenu from './useEmojiPickerMenu';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, ref: ForwardedRef<BaseTextInputRef>) {
+function EmojiPickerMenu({onEmojiSelected, activeEmoji, ref}: EmojiPickerMenuProps) {
     const styles = useThemeStyles();
     const {windowWidth} = useWindowDimensions();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
@@ -151,4 +149,4 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
 }
 
 EmojiPickerMenu.displayName = 'EmojiPickerMenu';
-export default React.forwardRef(EmojiPickerMenu);
+export default EmojiPickerMenu;

src/components/EmojiPicker/EmojiPickerMenu/index.tsx

@@ -1,7 +1,6 @@
 import type {ListRenderItem} from '@shopify/flash-list';
 import throttle from 'lodash/throttle';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import type {ForwardedRef} from 'react';
 import {View} from 'react-native';
 import EmojiPickerMenuItem from '@components/EmojiPicker/EmojiPickerMenuItem';
 import Text from '@components/Text';
@@ -30,7 +29,7 @@ import useEmojiPickerMenu from './useEmojiPickerMenu';
 
 const throttleTime = isMobile() ? 200 : 50;
 
-function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, ref: ForwardedRef<BaseTextInputRef>) {
+function EmojiPickerMenu({onEmojiSelected, activeEmoji, ref}: EmojiPickerMenuProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {windowWidth} = useWindowDimensions();
@@ -361,4 +360,4 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
 }
 
 EmojiPickerMenu.displayName = 'EmojiPickerMenu';
-export default React.forwardRef(EmojiPickerMenu);
+export default EmojiPickerMenu;

src/components/EmojiPicker/EmojiPickerMenu/types.ts

@@ -1,10 +1,15 @@
+import type {ForwardedRef} from 'react';
 import type {Emoji} from '@assets/emojis/types';
+import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 
 type EmojiPickerMenuProps = {
     /** Function to add the selected emoji to the main compose text input */
     onEmojiSelected: (emoji: string, emojiObject: Emoji) => void;
 
     activeEmoji?: string;
+
+    /** Reference to the outer element */
+    ref?: ForwardedRef<BaseTextInputRef>;
 };
 
 export default EmojiPickerMenuProps;

src/components/FlatList/index.android.tsx

@@ -1,12 +1,12 @@
 import {useFocusEffect} from '@react-navigation/native';
-import type {ForwardedRef} from 'react';
-import React, {forwardRef, useCallback, useRef} from 'react';
-import type {FlatListProps, NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
+import React, {useCallback, useRef} from 'react';
+import type {NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
 import {FlatList} from 'react-native';
+import type {CustomFlatListProps} from './index';
 
 // FlatList wrapped with the freeze component will lose its scroll state when frozen (only for Android).
 // CustomFlatList saves the offset and use it for scrollToOffset() when unfrozen.
-function CustomFlatList<T>(props: FlatListProps<T>, ref: ForwardedRef<FlatList>) {
+function CustomFlatList<T>({ref, ...props}: CustomFlatListProps<T>) {
     const lastScrollOffsetRef = useRef(0);
 
     const onScreenFocus = useCallback(() => {
@@ -44,4 +44,4 @@ function CustomFlatList<T>(props: FlatListProps<T>, ref: ForwardedRef<FlatList>)
 }
 
 CustomFlatList.displayName = 'CustomFlatListWithRef';
-export default forwardRef(CustomFlatList);
+export default CustomFlatList;

src/components/FlatList/index.ios.tsx

@@ -1,10 +1,9 @@
-import type {ForwardedRef} from 'react';
-import React, {forwardRef, useCallback, useState} from 'react';
-import type {FlatListProps} from 'react-native';
+import React, {useCallback, useState} from 'react';
 import {FlatList} from 'react-native';
+import type {CustomFlatListProps} from './index';
 
 // On iOS, we have to unset maintainVisibleContentPosition while the user is scrolling to prevent jumping to the beginning issue
-function CustomFlatList<T>(props: FlatListProps<T>, ref: ForwardedRef<FlatList>) {
+function CustomFlatList<T>({ref, ...props}: CustomFlatListProps<T>) {
     const {maintainVisibleContentPosition: originalMaintainVisibleContentPosition, ...rest} = props;
     const [isScrolling, setIsScrolling] = useState(false);
 
@@ -31,4 +30,4 @@ function CustomFlatList<T>(props: FlatListProps<T>, ref: ForwardedRef<FlatList>)
 }
 
 CustomFlatList.displayName = 'CustomFlatListWithRef';
-export default forwardRef(CustomFlatList);
+export default CustomFlatList;

src/components/FlatList/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable es/no-optional-chaining, es/no-nullish-coalescing-operators, react/prop-types */
-import type {ForwardedRef, MutableRefObject} from 'react';
+import type {ForwardedRef, RefObject} from 'react';
 import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import type {FlatListProps, NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
 import {FlatList} from 'react-native';
@@ -9,8 +9,8 @@ import {isMobileSafari} from '@libs/Browser';
 // We do a best effort to avoid content jumping by using some hacks on mobile Safari only.
 const IS_MOBILE_SAFARI = isMobileSafari();
 
-function mergeRefs(...args: Array<MutableRefObject<FlatList> | ForwardedRef<FlatList> | null>) {
-    return function forwardRef(node: FlatList) {
+function mergeRefs(...args: Array<RefObject<FlatList> | ForwardedRef<FlatList> | null>) {
+    return function (node: FlatList) {
         args.forEach((ref) => {
             if (ref == null) {
                 return;
@@ -29,7 +29,7 @@ function mergeRefs(...args: Array<MutableRefObject<FlatList> | ForwardedRef<Flat
     };
 }
 
-function useMergeRefs(...args: Array<MutableRefObject<FlatList> | ForwardedRef<FlatList> | null>) {
+function useMergeRefs(...args: Array<RefObject<FlatList> | ForwardedRef<FlatList> | null>) {
     return useMemo(
         () => mergeRefs(...args),
         // eslint-disable-next-line
@@ -41,7 +41,11 @@ function getScrollableNode(flatList: FlatList | null): HTMLElement | undefined {
     return flatList?.getScrollableNode() as HTMLElement | undefined;
 }
 
-function MVCPFlatList<TItem>({maintainVisibleContentPosition, horizontal = false, onScroll, ...props}: FlatListProps<TItem>, ref: ForwardedRef<FlatList>) {
+type CustomFlatListProps<T> = FlatListProps<T> & {
+    ref?: ForwardedRef<FlatList>;
+};
+
+function MVCPFlatList<TItem>({maintainVisibleContentPosition, horizontal = false, onScroll, ref, ...props}: CustomFlatListProps<TItem>) {
     const {minIndexForVisible: mvcpMinIndexForVisible, autoscrollToTopThreshold: mvcpAutoscrollToTopThreshold} = maintainVisibleContentPosition ?? {};
     const scrollRef = useRef<FlatList | null>(null);
     const prevFirstVisibleOffsetRef = useRef(0);
@@ -197,7 +201,7 @@ function MVCPFlatList<TItem>({maintainVisibleContentPosition, horizontal = false
         };
     }, [prepareForMaintainVisibleContentPosition, setupMutationObserver]);
 
-    const setMergedRef = useMergeRefs(scrollRef, ref);
+    const setMergedRef = useMergeRefs(scrollRef, ref as ForwardedRef<FlatList>);
 
     const onRef = useCallback(
         (newRef: FlatList) => {
@@ -253,4 +257,6 @@ function MVCPFlatList<TItem>({maintainVisibleContentPosition, horizontal = false
 
 MVCPFlatList.displayName = 'MVCPFlatList';
 
-export default React.forwardRef(MVCPFlatList);
+export default MVCPFlatList;
+
+export type {CustomFlatListProps};

src/components/InvertedFlatList/BaseInvertedFlatList/index.e2e.tsx

@@ -1,15 +1,16 @@
-import React, {forwardRef, useMemo} from 'react';
+import React, {useMemo} from 'react';
 import type {FlatListProps, ScrollViewProps, ViewToken} from 'react-native';
 import {DeviceEventEmitter, FlatList} from 'react-native';
 import type {ReportAction} from '@src/types/onyx';
 
 type BaseInvertedFlatListProps = FlatListProps<ReportAction> & {
     shouldEnableAutoScrollToTopThreshold?: boolean;
+    ref?: React.ForwardedRef<FlatList<ReportAction>>;
 };
 
 const AUTOSCROLL_TO_TOP_THRESHOLD = 128;
 
-function BaseInvertedFlatListE2e(props: BaseInvertedFlatListProps, ref: React.ForwardedRef<FlatList<ReportAction>>) {
+function BaseInvertedFlatListE2e({ref, ...props}: BaseInvertedFlatListProps) {
     const {shouldEnableAutoScrollToTopThreshold, ...rest} = props;
 
     const handleViewableItemsChanged = useMemo(
@@ -47,4 +48,4 @@ function BaseInvertedFlatListE2e(props: BaseInvertedFlatListProps, ref: React.Fo
 
 BaseInvertedFlatListE2e.displayName = 'BaseInvertedFlatListE2e';
 
-export default forwardRef(BaseInvertedFlatListE2e);
+export default BaseInvertedFlatListE2e;

src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx

@@ -1,5 +1,5 @@
 import type {ForwardedRef} from 'react';
-import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import type {FlatListProps, ListRenderItem, ListRenderItemInfo, FlatList as RNFlatList, ScrollViewProps} from 'react-native';
 import FlatList from '@components/FlatList';
 import usePrevious from '@hooks/usePrevious';
@@ -24,11 +24,12 @@ type BaseInvertedFlatListProps<T> = Omit<FlatListProps<T>, 'data' | 'renderItem'
     data: T[];
     renderItem: ListRenderItem<T>;
     initialScrollKey?: string | null;
+    ref?: ForwardedRef<RNFlatList>;
 };
 
 const AUTOSCROLL_TO_TOP_THRESHOLD = 250;
 
-function BaseInvertedFlatList<T>(props: BaseInvertedFlatListProps<T>, ref: ForwardedRef<RNFlatList>) {
+function BaseInvertedFlatList<T>({ref, ...props}: BaseInvertedFlatListProps<T>) {
     const {shouldEnableAutoScrollToTopThreshold, initialScrollKey, data, onStartReached, renderItem, keyExtractor = defaultKeyExtractor, ...rest} = props;
     // `initialScrollIndex` doesn't work properly with FlatList, this uses an alternative approach to achieve the same effect.
     // What we do is start rendering the list from `initialScrollKey` and then whenever we reach the start we render more
@@ -141,7 +142,7 @@ function BaseInvertedFlatList<T>(props: BaseInvertedFlatListProps<T>, ref: Forwa
 
 BaseInvertedFlatList.displayName = 'BaseInvertedFlatList';
 
-export default forwardRef(BaseInvertedFlatList);
+export default BaseInvertedFlatList;
 
 export {AUTOSCROLL_TO_TOP_THRESHOLD};
 

src/components/InvertedFlatList/index.native.tsx

@@ -1,11 +1,9 @@
-import type {ForwardedRef} from 'react';
-import React, {forwardRef} from 'react';
-import type {FlatList} from 'react-native';
+import React from 'react';
 import BaseInvertedFlatList from './BaseInvertedFlatList';
 import type {BaseInvertedFlatListProps} from './BaseInvertedFlatList';
 import CellRendererComponent from './CellRendererComponent';
 
-function BaseInvertedFlatListWithRef<T>(props: BaseInvertedFlatListProps<T>, ref: ForwardedRef<FlatList>) {
+function BaseInvertedFlatListWithRef<T>({ref, ...props}: BaseInvertedFlatListProps<T>) {
     return (
         <BaseInvertedFlatList
             // eslint-disable-next-line react/jsx-props-no-spreading
@@ -24,4 +22,4 @@ function BaseInvertedFlatListWithRef<T>(props: BaseInvertedFlatListProps<T>, ref
 
 BaseInvertedFlatListWithRef.displayName = 'BaseInvertedFlatListWithRef';
 
-export default forwardRef(BaseInvertedFlatListWithRef);
+export default BaseInvertedFlatListWithRef;

src/components/InvertedFlatList/index.tsx

@@ -1,6 +1,5 @@
-import type {ForwardedRef} from 'react';
-import React, {forwardRef, useEffect, useRef} from 'react';
-import type {FlatList, NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
+import React, {useEffect, useRef} from 'react';
+import type {NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
 import {DeviceEventEmitter} from 'react-native';
 import CONST from '@src/CONST';
 import BaseInvertedFlatList from './BaseInvertedFlatList';
@@ -9,7 +8,7 @@ import CellRendererComponent from './CellRendererComponent';
 
 // This is adapted from https://codesandbox.io/s/react-native-dsyse
 // It's a HACK alert since FlatList has inverted scrolling on web
-function InvertedFlatList<T>({onScroll: onScrollProp = () => {}, ...props}: BaseInvertedFlatListProps<T>, ref: ForwardedRef<FlatList>) {
+function InvertedFlatList<T>({onScroll: onScrollProp = () => {}, ref, ...props}: BaseInvertedFlatListProps<T>) {
     const lastScrollEvent = useRef<number | null>(null);
     const scrollEndTimeout = useRef<NodeJS.Timeout | null>(null);
     const updateInProgress = useRef<boolean>(false);
@@ -96,4 +95,4 @@ function InvertedFlatList<T>({onScroll: onScrollProp = () => {}, ...props}: Base
 
 InvertedFlatList.displayName = 'InvertedFlatList';
 
-export default forwardRef(InvertedFlatList);
+export default InvertedFlatList;