Merge pull request Expensify#67294 from nkdengineer/fix/65702

prevent education tooltip from showing when the page is not focused

Author: rlinoz

src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

@@ -1,4 +1,4 @@
-import {NavigationContext} from '@react-navigation/native';
+import {NavigationContext, useIsFocused} from '@react-navigation/native';
 import React, {memo, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState} from 'react';
 import type {LayoutRectangle, NativeMethods, NativeSyntheticEvent} from 'react-native';
 import {DeviceEventEmitter, Dimensions} from 'react-native';
@@ -27,12 +27,15 @@ function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNav
     const show = useRef<(() => void) | undefined>(undefined);
 
     const navigator = useContext(NavigationContext);
+    const isFocused = useIsFocused();
     const insets = useSafeAreaInsets();
 
     const isResizing = useIsResizing();
 
+    const shouldSuppressTooltip = !isFocused && shouldHideOnNavigate;
+
     const renderTooltip = useCallback(() => {
-        if (!tooltipElementRef.current || !genericTooltipStateRef.current) {
+        if (!tooltipElementRef.current || !genericTooltipStateRef.current || shouldSuppressTooltip) {
             return;
         }
 
@@ -65,7 +68,7 @@ function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNav
                 showTooltip();
             }
         });
-    }, [insets]);
+    }, [insets, shouldSuppressTooltip]);
 
     useEffect(() => {
         if (!genericTooltipStateRef.current || !shouldRender) {
@@ -120,7 +123,7 @@ function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNav
     }, []);
 
     useEffect(() => {
-        if (!shouldMeasure) {
+        if (!shouldMeasure || shouldSuppressTooltip) {
             return;
         }
         if (!shouldRender) {
@@ -134,7 +137,7 @@ function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNav
         return () => {
             clearTimeout(timerID);
         };
-    }, [shouldMeasure, shouldRender]);
+    }, [shouldMeasure, shouldRender, shouldSuppressTooltip]);
 
     useEffect(() => {
         if (!navigator) {