Merge pull request Expensify#47202 from dominictb/fix/45008-android-c…

…omposer

fix: use useAutoFocusInput for native composer

src/components/Composer/index.native.tsx

@@ -1,11 +1,12 @@
 import type {MarkdownStyle} from '@expensify/react-native-live-markdown';
 import type {ForwardedRef} from 'react';
-import React, {useCallback, useMemo, useRef} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import type {NativeSyntheticEvent, TextInput, TextInputChangeEventData, TextInputPasteEventData} from 'react-native';
 import {StyleSheet} from 'react-native';
 import type {FileObject} from '@components/AttachmentModal';
 import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput';
 import RNMarkdownTextInput from '@components/RNMarkdownTextInput';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useMarkdownStyle from '@hooks/useMarkdownStyle';
 import useResetComposerFocus from '@hooks/useResetComposerFocus';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -46,6 +47,15 @@ function Composer(
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
 
+    const {inputCallbackRef, inputRef: autoFocusInputRef} = useAutoFocusInput();
+
+    useEffect(() => {
+        if (autoFocus === !!autoFocusInputRef.current) {
+            return;
+        }
+        inputCallbackRef(autoFocus ? textInput.current : null);
+    }, [autoFocus, inputCallbackRef, autoFocusInputRef]);
+
     /**
      * Set the TextInput Ref
      * @param {Element} el
@@ -57,6 +67,10 @@ function Composer(
             return;
         }
 
+        if (autoFocus) {
+            inputCallbackRef(el);
+        }
+
         // This callback prop is used by the parent component using the constructor to
         // get a ref to the inner textInput element e.g. if we do
         // <constructor ref={el => this.textInput = el} /> this will not

tests/perf-test/ReportActionCompose.perf-test.tsx

@@ -1,5 +1,5 @@
 import {fireEvent, screen} from '@testing-library/react-native';
-import type {ComponentType} from 'react';
+import type {ComponentType, EffectCallback} from 'react';
 import React from 'react';
 import Onyx from 'react-native-onyx';
 import type Animated from 'react-native-reanimated';
@@ -36,6 +36,7 @@ jest.mock('@react-navigation/native', () => {
         }),
         useIsFocused: () => true,
         useNavigationState: () => {},
+        useFocusEffect: (cb: EffectCallback) => cb(),
     };
 });