fix tooltip implementation

src/components/AddObsBottomSheet/AddObsButton.js

@@ -5,7 +5,7 @@ import classNames from "classnames";
 import AddObsBottomSheet from "components/AddObsBottomSheet/AddObsBottomSheet";
 import { Body2 } from "components/SharedComponents";
 import GradientButton from "components/SharedComponents/Buttons/GradientButton";
-import { getCurrentRoute } from "navigation/navigationUtils";
+import { navigationRef } from "navigation/navigationUtils";
 import * as React from "react";
 import { Modal, View } from "react-native";
 import { log } from "sharedHelpers/logger";
@@ -17,6 +17,7 @@ const logger = log.extend( "AddObsButton" );
 const AddObsButton = ( ): React.Node => {
   const [showBottomSheet, setShowBottomSheet] = React.useState( false );
   const [showTooltip, setShowTooltip] = React.useState( false );
+  const [currentRoute, setCurrentRoute] = React.useState( null );
 
   const { t } = useTranslation();
 
@@ -24,7 +25,6 @@ const AddObsButton = ( ): React.Node => {
   const closeBottomSheet = React.useCallback( () => setShowBottomSheet( false ), [] );
 
   const { isAllAddObsOptionsMode } = useLayoutPrefs( );
-  const currentRoute = getCurrentRoute( );
   const currentUser = useCurrentUser( );
 
   // #region Tooltip logic
@@ -70,9 +70,6 @@ const AddObsButton = ( ): React.Node => {
     triggerCondition = triggerCondition && !!shownOnce["fifty-observation"];
   }
 
-  // The tooltip should only appear once per app download. // delete
-  // const tooltipIsVisible = !shownOnce[showKey] && triggerCondition; // delete?
-
   React.useEffect( () => {
     // The tooltip should only appear once per app download.
     if ( !shownOnce[showKey] && triggerCondition ) setShowTooltip( true );
@@ -86,6 +83,8 @@ const AddObsButton = ( ): React.Node => {
 
   // #endregion
 
+  // #region Navigation handling
+
   const resetObservationFlowSlice = useStore( state => state.resetObservationFlowSlice );
   const navigation = useNavigation( );
   React.useEffect( ( ) => {
@@ -126,6 +125,23 @@ const AddObsButton = ( ): React.Node => {
   };
   const navToARCamera = ( ) => { navAndCloseBottomSheet( "Camera", { camera: "AI" } ); };
 
+  // #endregion
+
+  // Keeps currentRoute up-to-date for the use of both navigation & tooltip logic
+  React.useEffect( () => {
+    if ( navigationRef.isReady() ) {
+      const current = navigationRef.getCurrentRoute();
+      setCurrentRoute( current );
+    }
+
+    const unsubscribe = navigationRef.addListener( "state", () => {
+      const current = navigationRef.getCurrentRoute();
+      setCurrentRoute( current );
+    } );
+
+    return unsubscribe;
+  }, [] );
+
   return (
     <>
       <Modal

tests/unit/components/AddObsModal/AddObsButton.test.js

@@ -1,14 +1,13 @@
 import { screen } from "@testing-library/react-native";
 import AddObsButton from "components/AddObsBottomSheet/AddObsButton";
+import { navigationRef } from "navigation/navigationUtils";
 import React from "react";
 import { renderComponent } from "tests/helpers/render";
 
-// Mock getCurrentRoute to return ObsList
-jest.mock( "navigation/navigationUtils", () => ( {
-  getCurrentRoute: () => ( {
-    name: "ObsList"
-  } )
-} ) );
+// Mock methods needed to get the current route
+navigationRef.isReady = jest.fn( () => true );
+navigationRef.getCurrentRoute = jest.fn( () => ( { name: "ObsList" } ) );
+navigationRef.addListener = jest.fn( () => jest.fn() );
 
 jest.mock( "sharedHooks/useCurrentUser", () => ( {
   __esModule: true,