Merge pull request Expensify#67070 from software-mansion-labs/war-in/remove-findNodeHandle-patch

[NO QA] Add temporary custom `findNodeHandle` impl for web & remove patch

Author: mountiny

.eslintrc.js

@@ -14,6 +14,7 @@ const restrictedImportPaths = [
             'Text',
             'ScrollView',
             'Animated',
+            'findNodeHandle',
         ],
         message: [
             '',
@@ -105,6 +106,10 @@ const restrictedImportPaths = [
         importNames: ['useOnyx'],
         message: "Please use '@hooks/useOnyx' instead.",
     },
+    {
+        name: '@src/utils/findNodeHandle',
+        message: "Do not use 'findNodeHandle' as it is no longer supported on web.",
+    },
 ];
 
 const restrictedImportPatterns = [

patches/react-native-web/details.md

@@ -108,19 +108,7 @@
 - E/App issue: 🛑
 - PR introducing patch: https://github.com/Expensify/App/pull/60340
 
-### [react-native-web+0.20.0+010+restore-findNodeHandle.patch](react-native-web+0.20.0+010+restore-findNodeHandle.patch)
-
-- Reason:
-  
-    ```
-    Changes `findNodeHandle()` to log a Console warning instead of throwing an Error when being called.
-    ```
-  
-- Upstream PR/issue: 🛑
-- E/App issue: 🛑
-- PR introducing patch: https://github.com/Expensify/App/pull/60421
-
-### [react-native-web+0.20.0+011+fullstory-support.patch](react-native-web+0.20.0+011+fullstory-support.patch)
+### [react-native-web+0.20.0+010+fullstory-support.patch](react-native-web+0.20.0+010+fullstory-support.patch)
 
 - Reason:
   

…e-web+0.20.0+011+fullstory-support.patch …e-web+0.20.0+010+fullstory-support.patchpatches/react-native-web/react-native-web+0.20.0+011+fullstory-support.patch renamed to patches/react-native-web/react-native-web+0.20.0+010+fullstory-support.patch patches/react-native-web/react-native-web+0.20.0+011+fullstory-support.patch renamed to patches/react-native-web/react-native-web+0.20.0+010+fullstory-support.patch

@@ -12,7 +12,7 @@ import type {
     TextInputKeyPressEventData,
     TextInputScrollEventData,
 } from 'react-native';
-import {DeviceEventEmitter, findNodeHandle, InteractionManager, NativeModules, StyleSheet, View} from 'react-native';
+import {DeviceEventEmitter, InteractionManager, NativeModules, StyleSheet, View} from 'react-native';
 import {useFocusedInputHandler} from 'react-native-keyboard-controller';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useAnimatedRef, useSharedValue} from 'react-native-reanimated';
@@ -59,6 +59,8 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
+// eslint-disable-next-line no-restricted-imports
+import findNodeHandle from '@src/utils/findNodeHandle';
 
 type SyncSelection = {
     position: number;

patches/react-native-web/react-native-web+0.20.0+010+restore-findNodeHandle.patch

@@ -1,7 +1,7 @@
 import lodashDebounce from 'lodash/debounce';
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {findNodeHandle, InteractionManager, View} from 'react-native';
+import {InteractionManager, View} from 'react-native';
 import type {MeasureInWindowOnSuccessCallback, NativeSyntheticEvent, TextInput, TextInputFocusEventData, TextInputKeyPressEventData, TextInputScrollEventData} from 'react-native';
 import {useFocusedInputHandler} from 'react-native-keyboard-controller';
 import {useSharedValue} from 'react-native-reanimated';
@@ -45,6 +45,8 @@ import setShouldShowComposeInputKeyboardAware from '@libs/setShouldShowComposeIn
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
+// eslint-disable-next-line no-restricted-imports
+import findNodeHandle from '@src/utils/findNodeHandle';
 import KeyboardUtils from '@src/utils/keyboard';
 import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu';
 import getCursorPosition from './ReportActionCompose/getCursorPosition';

src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

@@ -0,0 +1,5 @@
+// eslint-disable-next-line no-restricted-imports
+import {findNodeHandle} from 'react-native';
+
+/** Don't add new `findNodeHandle` usages, this is only a temporary solution. We're going to remove the function in the future */
+export default findNodeHandle;

src/pages/home/report/ReportActionItemMessageEdit.tsx

@@ -0,0 +1,12 @@
+import type {Component, ComponentClass} from 'react';
+import type {NodeHandle} from 'react-native/Libraries/ReactNative/RendererProxy';
+
+/** Don't add new `findNodeHandle` usages, this is only a temporary solution. We're going to remove the function in the future */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+function findNodeHandle(componentOrHandle: null | number | Component<any, any> | ComponentClass<any>): null | NodeHandle {
+    // eslint-disable-next-line no-console
+    console.warn('findNodeHandle is not supported on web. Use the ref property of the component instead.');
+    return null;
+}
+
+export default findNodeHandle;