prevent education tooltip from showing when the page is not focused

Author: nkdengineer

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,13 @@ 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 renderTooltip = useCallback(() => {
-        if (!tooltipElementRef.current || !genericTooltipStateRef.current) {
+        if (!tooltipElementRef.current || !genericTooltipStateRef.current || (!isFocused && shouldHideOnNavigate)) {
             return;
         }
 
@@ -65,7 +66,7 @@ function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNav
                 showTooltip();
             }
         });
-    }, [insets]);
+    }, [insets.bottom, insets.left, insets.right, insets.top, isFocused, shouldHideOnNavigate]);
 
     useEffect(() => {
         if (!genericTooltipStateRef.current || !shouldRender) {
@@ -120,7 +121,7 @@ function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNav
     }, []);
 
     useEffect(() => {
-        if (!shouldMeasure) {
+        if (!shouldMeasure || (!isFocused && shouldHideOnNavigate)) {
             return;
         }
         if (!shouldRender) {
@@ -134,7 +135,7 @@ function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNav
         return () => {
             clearTimeout(timerID);
         };
-    }, [shouldMeasure, shouldRender]);
+    }, [shouldMeasure, shouldRender, isFocused, shouldHideOnNavigate]);
 
     useEffect(() => {
         if (!navigator) {