Merge pull request Expensify#56513 from bernhardoj/fix/55114-tooltip-…

…appears-below-composer

Fix tooltip appears below the composer when going back from another page

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

@@ -1,9 +1,9 @@
-import {useIsFocused} from '@react-navigation/native';
+import {useFocusEffect} from '@react-navigation/native';
 import lodashDebounce from 'lodash/debounce';
 import noop from 'lodash/noop';
 import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {MeasureInWindowOnSuccessCallback, NativeSyntheticEvent, TextInputFocusEventData, TextInputSelectionChangeEventData} from 'react-native';
-import {View} from 'react-native';
+import {InteractionManager, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import {runOnUI, useSharedValue} from 'react-native-reanimated';
@@ -136,11 +136,24 @@ function ReportActionCompose({
     const personalDetails = usePersonalDetails();
     const [blockedFromConcierge] = useOnyx(ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE);
     const [shouldShowComposeInput = true] = useOnyx(ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT);
-    const isScreenFocused = useIsFocused();
+    const [isScreenTransitionEnded, setIsScreenTransitionEnded] = useState(false);
+
+    useFocusEffect(
+        React.useCallback(() => {
+            const task = InteractionManager.runAfterInteractions(() => {
+                setIsScreenTransitionEnded(true);
+            });
+
+            return () => {
+                task.cancel();
+                setIsScreenTransitionEnded(false);
+            };
+        }, []),
+    );
 
     const {renderProductTrainingTooltip, hideProductTrainingTooltip, shouldShowProductTrainingTooltip} = useProductTrainingContext(
         CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.WORKSAPCE_CHAT_CREATE,
-        shouldShowEducationalTooltip && isScreenFocused,
+        shouldShowEducationalTooltip && isScreenTransitionEnded,
     );
 
     /**

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

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