From 12e1c840d6df2188724f3140f73465c6e0f7e97c Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Thu, 20 Nov 2025 09:06:42 -0600
Subject: [PATCH 01/35] MOB-512 saved match UI

---
 .../ObsDetailsDefaultMode/SavedMatch.tsx      | 94 +++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 src/components/ObsDetailsDefaultMode/SavedMatch.tsx

diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch.tsx
new file mode 100644
index 000000000..d3c1e919f
--- /dev/null
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch.tsx
@@ -0,0 +1,94 @@
+import { useNetInfo } from "@react-native-community/netinfo";
+import EmptyMapSection from "components/Match/EmptyMapSection";
+import MatchHeader from "components/Match/MatchHeader";
+import PhotosSection from "components/Match/PhotosSection";
+import LocationSection from "components/ObsDetailsDefaultMode/LocationSection/LocationSection";
+import MapSection from "components/ObsDetailsDefaultMode/MapSection/MapSection";
+import { Button, ScrollViewWrapper } from "components/SharedComponents";
+import { View } from "components/styledComponents";
+import _ from "lodash";
+import React from "react";
+import type { RealmObservation } from "realmModels/types";
+import { useTranslation } from "sharedHooks";
+
+const cardClassTop
+  = "rounded-t-2xl border-lightGray border-[2px] py-[18px] px-5 border-b-0 -mb-0.5";
+const cardClassBottom
+  = "rounded-b-2xl border-lightGray border-[2px] pb-3 border-t-0 -mt-0.5 mb-[30px]";
+
+type Props = {
+  observation: RealmObservation,
+  navToTaxonDetails: ( ) => void,
+  isFetchingLocation: boolean,
+  handleAddLocationPressed: ( ) => void,
+}
+
+const SavedMatch = ( {
+  observation,
+  navToTaxonDetails,
+  isFetchingLocation,
+  handleAddLocationPressed
+}: Props ) => {
+  const { t } = useTranslation( );
+  const { isConnected } = useNetInfo( );
+
+  const latitude = observation?.privateLatitude || observation?.latitude;
+  const { taxon } = observation;
+
+  return (
+    <ScrollViewWrapper>
+      <View className={cardClassTop}>
+        <MatchHeader topSuggestion={observation} />
+      </View>
+      <PhotosSection
+        representativePhoto={taxon?.representative_photo}
+        taxon={taxon}
+        obsPhotos={observation.observationPhotos}
+        navToTaxonDetails={navToTaxonDetails}
+      />
+      <View className="border-[1.5px] border-white" />
+      {!latitude
+        ? (
+          <EmptyMapSection
+            handleAddLocationPressed={handleAddLocationPressed}
+            isFetchingLocation={isFetchingLocation}
+          />
+        )
+        : (
+          <MapSection observation={observation} taxon={taxon} />
+        )}
+      <LocationSection
+        belongsToCurrentUser
+        observation={observation}
+      />
+      <View className={cardClassBottom} />
+      {
+        isConnected && (
+          <Button
+            className="mx-4 mb-[30px]"
+            level="primary"
+            text={taxon?.rank_level === 10
+              ? t( "LEARN-MORE-ABOUT-THIS-SPECIES" )
+              : t( "LEARN-MORE-ABOUT-THIS-GROUP" )}
+            onPress={navToTaxonDetails}
+            accessibilityHint={t( "Navigates-to-taxon-details" )}
+          />
+        )
+      }
+      {!latitude && (
+        <Button
+          className="mx-4 mb-[30px]"
+          level="neutral"
+          text={t( "ADD-LOCATION-FOR-BETTER-IDS" )}
+          onPress={handleAddLocationPressed}
+          loading={isFetchingLocation}
+          disabled={isFetchingLocation}
+          accessibilityLabel={t( "Edit-location" )}
+          accessibilityHint={t( "Add-location-to-refresh-suggestions" )}
+        />
+      )}
+    </ScrollViewWrapper>
+  );
+};
+
+export default SavedMatch;

From 2d8d4d45d79dfda6cf5ad25656c9e8f3c5ba9e74 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Thu, 20 Nov 2025 11:47:04 -0600
Subject: [PATCH 02/35] MOB-512 add wrapper to select obs screen ui

---
 .../ObsDetailsDefaultModeContainer.js         | 161 ++++++++++++------
 1 file changed, 111 insertions(+), 50 deletions(-)

diff --git a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
index baae00aea..fc60d7d04 100644
--- a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
+++ b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
@@ -31,6 +31,7 @@ import useStore from "stores/useStore";
 
 import useMarkViewedMutation from "./hooks/useMarkViewedMutation";
 import ObsDetailsDefaultMode from "./ObsDetailsDefaultMode";
+import SavedMatch from "./SavedMatch";
 
 const { useRealm } = RealmContext;
 
@@ -109,19 +110,30 @@ const reducer = ( state, action ) => {
   }
 };
 
-const ObsDetailsDefaultModeContainer = ( ): Node => {
+const ObsDetailsDefaultModeContainer = ( props ): Node => {
   const setObservations = useStore( state => state.setObservations );
-  const currentUser = useCurrentUser( );
-  const { params } = useRoute();
-  const {
-    targetActivityItemID,
-    uuid
-  } = params;
   const navigation = useNavigation( );
   const realm = useRealm( );
-  const { isConnected } = useNetInfo( );
   const [state, dispatch] = useReducer( reducer, initialState );
-  const [remoteObsWasDeleted, setRemoteObsWasDeleted] = useState( false );
+
+  const {
+    observation,
+    targetActivityItemID,
+    uuid,
+    localObservation,
+    markViewedLocally,
+    markDeletedLocally,
+    remoteObservation,
+    setRemoteObsWasDeleted,
+    fetchRemoteObservationError,
+    currentUser,
+    belongsToCurrentUser,
+    isRefetching,
+    refetchRemoteObservation,
+    isConnected,
+    isSimpleMode,
+    remoteObsWasDeleted
+  } = props;
 
   const {
     activityItems,
@@ -133,26 +145,6 @@ const ObsDetailsDefaultModeContainer = ( ): Node => {
   } = state;
   const queryClient = useQueryClient( );
 
-  const {
-    localObservation,
-    markDeletedLocally,
-    markViewedLocally
-  } = useLocalObservation( uuid );
-  const wasSynced = localObservation && localObservation?.wasSynced();
-
-  const fetchRemoteObservationEnabled = !!(
-    !remoteObsWasDeleted
-    && ( !localObservation || localObservation?.wasSynced( ) )
-    && isConnected
-  );
-
-  const {
-    remoteObservation,
-    refetchRemoteObservation,
-    isRefetching,
-    fetchRemoteObservationError
-  } = useRemoteObservation( uuid, fetchRemoteObservationEnabled );
-
   useMarkViewedMutation( localObservation, markViewedLocally, remoteObservation );
 
   // If we tried to get a remote observation but it no longer exists, the user
@@ -160,7 +152,8 @@ const ObsDetailsDefaultModeContainer = ( ): Node => {
   // copy of this observation
   useEffect( ( ) => {
     setRemoteObsWasDeleted( fetchRemoteObservationError?.status === 404 );
-  }, [fetchRemoteObservationError?.status] );
+  }, [fetchRemoteObservationError?.status, setRemoteObsWasDeleted] );
+
   const confirmRemoteObsWasDeleted = useCallback( ( ) => {
     if ( localObservation ) {
       markDeletedLocally( );
@@ -172,27 +165,10 @@ const ObsDetailsDefaultModeContainer = ( ): Node => {
     navigation
   ] );
 
-  const observation = localObservation || Observation.mapApiToRealm( remoteObservation );
+  const wasSynced = localObservation && localObservation?.wasSynced();
+
   const hasPhotos = observation?.observationPhotos?.length > 0;
 
-  // In theory the only situation in which an observation would not have a
-  // user is when a user is not signed but has made a new observation in the
-  // app. Also in theory that user should not be able to get to ObsDetail for
-  // those observations, just ObsEdit. But.... let's be safe.
-  const belongsToCurrentUser = (
-    observation?.user?.id === currentUser?.id
-    || ( !observation?.user && !observation?.id )
-  );
-
-  const isSimpleMode = useMemo( () => (
-    // Simple mode applies only when:
-    // 1. It's the current user's observation (or an observation being created)
-    // 2. AND the observation hasn't been synced yet
-    ( belongsToCurrentUser || !observation?.user )
-      && localObservation
-      && !localObservation.wasSynced()
-  ), [belongsToCurrentUser, localObservation, observation?.user] );
-
   const { data: subscriptions, refetch: refetchSubscriptions } = useAuthenticatedQuery(
     [
       "fetchSubscriptions"
@@ -385,4 +361,89 @@ const ObsDetailsDefaultModeContainer = ( ): Node => {
   );
 };
 
-export default ObsDetailsDefaultModeContainer;
+const ObsDetailsDefaultModeScreenWrapper = () => {
+  const { params } = useRoute();
+  const {
+    targetActivityItemID,
+    uuid
+  } = params;
+  const currentUser = useCurrentUser( );
+  const { isConnected } = useNetInfo( );
+
+  const [remoteObsWasDeleted, setRemoteObsWasDeleted] = useState( false );
+
+  const {
+    localObservation,
+    markDeletedLocally,
+    markViewedLocally
+  } = useLocalObservation( uuid );
+
+  const fetchRemoteObservationEnabled = !!(
+    !remoteObsWasDeleted
+    && ( !localObservation || localObservation?.wasSynced( ) )
+    && isConnected
+  );
+
+  const {
+    remoteObservation,
+    refetchRemoteObservation,
+    isRefetching,
+    fetchRemoteObservationError
+  } = useRemoteObservation( uuid, fetchRemoteObservationEnabled );
+
+  const observation = localObservation || Observation.mapApiToRealm( remoteObservation );
+
+  // In theory the only situation in which an observation would not have a
+  // user is when a user is not signed but has made a new observation in the
+  // app. Also in theory that user should not be able to get to ObsDetail for
+  // those observations, just ObsEdit. But.... let's be safe.
+  const belongsToCurrentUser = (
+    observation?.user?.id === currentUser?.id
+    || ( !observation?.user && !observation?.id )
+  );
+
+  const showSavedMatch = useMemo( () => (
+    // Simple mode applies only when:
+    // 1. It's the current user's observation (or an observation being created)
+    // 2. AND the observation hasn't been synced yet
+    ( belongsToCurrentUser || !observation?.user )
+      && localObservation
+      && !localObservation.wasSynced()
+  ), [belongsToCurrentUser, localObservation, observation?.user] );
+
+  if ( showSavedMatch ) {
+    return (
+      // todo add edit pencil
+      <SavedMatch
+        observation={observation}
+        navToTaxonDetails={() => {}}
+        isFetchingLocation={false}
+        handleAddLocationPressed={() => {}}
+      />
+    );
+  }
+
+  return (
+    <ObsDetailsDefaultModeContainer
+      observation={observation}
+      targetActivityItemID={targetActivityItemID}
+      uuid={uuid}
+      localObservation={localObservation}
+      markViewedLocally={markViewedLocally}
+      markDeletedLocally={markDeletedLocally}
+      remoteObservation={remoteObservation}
+      remoteObsWasDeleted={remoteObsWasDeleted}
+      setRemoteObsWasDeleted={setRemoteObsWasDeleted}
+      fetchRemoteObservationError={fetchRemoteObservationError}
+      currentUser={currentUser}
+      belongsToCurrentUser={belongsToCurrentUser}
+      isRefetching={isRefetching}
+      refetchRemoteObservation={refetchRemoteObservation}
+      isConnected={isConnected}
+      isSimpleMode={showSavedMatch}
+    />
+  );
+};
+
+// todo update stack navigator name for this import
+export default ObsDetailsDefaultModeScreenWrapper;

From 7de330b51f656874dffff2cfb60e658dbac7fa8b Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Thu, 20 Nov 2025 13:44:18 -0600
Subject: [PATCH 03/35] MOB-512 use wrapper in navigator

---
 .../ObsDetailsDefaultModeContainer.js         | 101 +-----------------
 .../ObsDetailsDefaultModeScreensWrapper.tsx   |  98 +++++++++++++++++
 .../{ => SavedMatch}/SavedMatch.tsx           |   0
 .../SavedMatch/SavedMatchContainer.tsx        |   0
 .../StackNavigators/TabStackNavigator.js      |  10 +-
 5 files changed, 107 insertions(+), 102 deletions(-)
 create mode 100644 src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx
 rename src/components/ObsDetailsDefaultMode/{ => SavedMatch}/SavedMatch.tsx (100%)
 create mode 100644 src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx

diff --git a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
index fc60d7d04..8da0aaf2b 100644
--- a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
+++ b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
@@ -1,8 +1,5 @@
 // @flow
-import {
-  useNetInfo
-} from "@react-native-community/netinfo";
-import { useFocusEffect, useNavigation, useRoute } from "@react-navigation/native";
+import { useFocusEffect, useNavigation } from "@react-navigation/native";
 import { useQueryClient } from "@tanstack/react-query";
 import { fetchSubscriptions } from "api/observations";
 import IdentificationSheets from "components/ObsDetailsDefaultMode/IdentificationSheets";
@@ -11,27 +8,22 @@ import type { Node } from "react";
 import React, {
   useCallback,
   useEffect,
-  useMemo,
-  useReducer,
-  useState
+  useReducer
 } from "react";
 import { LogBox } from "react-native";
 import Observation from "realmModels/Observation";
 import safeRealmWrite from "sharedHelpers/safeRealmWrite";
 import {
   useAuthenticatedQuery,
-  useCurrentUser,
-  useLocalObservation,
   useObservationsUpdates
 } from "sharedHooks";
-import useRemoteObservation, {
+import {
   fetchRemoteObservationKey
 } from "sharedHooks/useRemoteObservation";
 import useStore from "stores/useStore";
 
 import useMarkViewedMutation from "./hooks/useMarkViewedMutation";
 import ObsDetailsDefaultMode from "./ObsDetailsDefaultMode";
-import SavedMatch from "./SavedMatch";
 
 const { useRealm } = RealmContext;
 
@@ -361,89 +353,4 @@ const ObsDetailsDefaultModeContainer = ( props ): Node => {
   );
 };
 
-const ObsDetailsDefaultModeScreenWrapper = () => {
-  const { params } = useRoute();
-  const {
-    targetActivityItemID,
-    uuid
-  } = params;
-  const currentUser = useCurrentUser( );
-  const { isConnected } = useNetInfo( );
-
-  const [remoteObsWasDeleted, setRemoteObsWasDeleted] = useState( false );
-
-  const {
-    localObservation,
-    markDeletedLocally,
-    markViewedLocally
-  } = useLocalObservation( uuid );
-
-  const fetchRemoteObservationEnabled = !!(
-    !remoteObsWasDeleted
-    && ( !localObservation || localObservation?.wasSynced( ) )
-    && isConnected
-  );
-
-  const {
-    remoteObservation,
-    refetchRemoteObservation,
-    isRefetching,
-    fetchRemoteObservationError
-  } = useRemoteObservation( uuid, fetchRemoteObservationEnabled );
-
-  const observation = localObservation || Observation.mapApiToRealm( remoteObservation );
-
-  // In theory the only situation in which an observation would not have a
-  // user is when a user is not signed but has made a new observation in the
-  // app. Also in theory that user should not be able to get to ObsDetail for
-  // those observations, just ObsEdit. But.... let's be safe.
-  const belongsToCurrentUser = (
-    observation?.user?.id === currentUser?.id
-    || ( !observation?.user && !observation?.id )
-  );
-
-  const showSavedMatch = useMemo( () => (
-    // Simple mode applies only when:
-    // 1. It's the current user's observation (or an observation being created)
-    // 2. AND the observation hasn't been synced yet
-    ( belongsToCurrentUser || !observation?.user )
-      && localObservation
-      && !localObservation.wasSynced()
-  ), [belongsToCurrentUser, localObservation, observation?.user] );
-
-  if ( showSavedMatch ) {
-    return (
-      // todo add edit pencil
-      <SavedMatch
-        observation={observation}
-        navToTaxonDetails={() => {}}
-        isFetchingLocation={false}
-        handleAddLocationPressed={() => {}}
-      />
-    );
-  }
-
-  return (
-    <ObsDetailsDefaultModeContainer
-      observation={observation}
-      targetActivityItemID={targetActivityItemID}
-      uuid={uuid}
-      localObservation={localObservation}
-      markViewedLocally={markViewedLocally}
-      markDeletedLocally={markDeletedLocally}
-      remoteObservation={remoteObservation}
-      remoteObsWasDeleted={remoteObsWasDeleted}
-      setRemoteObsWasDeleted={setRemoteObsWasDeleted}
-      fetchRemoteObservationError={fetchRemoteObservationError}
-      currentUser={currentUser}
-      belongsToCurrentUser={belongsToCurrentUser}
-      isRefetching={isRefetching}
-      refetchRemoteObservation={refetchRemoteObservation}
-      isConnected={isConnected}
-      isSimpleMode={showSavedMatch}
-    />
-  );
-};
-
-// todo update stack navigator name for this import
-export default ObsDetailsDefaultModeScreenWrapper;
+export default ObsDetailsDefaultModeContainer;
diff --git a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx
new file mode 100644
index 000000000..7682c384c
--- /dev/null
+++ b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx
@@ -0,0 +1,98 @@
+import { useNetInfo } from "@react-native-community/netinfo";
+import { useRoute } from "@react-navigation/native";
+import ObsDetailsDefaultModeContainer
+  from "components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer";
+import SavedMatch from "components/ObsDetailsDefaultMode/SavedMatch/SavedMatch";
+import React, { useMemo, useState } from "react";
+import Observation from "realmModels/Observation";
+import {
+  useCurrentUser,
+  useLocalObservation,
+  useRemoteObservation
+} from "sharedHooks";
+
+const ObsDetailsDefaultModeScreensWrapper = () => {
+  const { params } = useRoute();
+  const {
+    targetActivityItemID,
+    uuid
+  } = params;
+  const currentUser = useCurrentUser( );
+  const { isConnected } = useNetInfo( );
+
+  const [remoteObsWasDeleted, setRemoteObsWasDeleted] = useState( false );
+
+  const {
+    localObservation,
+    markDeletedLocally,
+    markViewedLocally
+  } = useLocalObservation( uuid );
+
+  const fetchRemoteObservationEnabled = !!(
+    !remoteObsWasDeleted
+    && ( !localObservation || localObservation?.wasSynced( ) )
+    && isConnected
+  );
+
+  const {
+    remoteObservation,
+    refetchRemoteObservation,
+    isRefetching,
+    fetchRemoteObservationError
+  } = useRemoteObservation( uuid, fetchRemoteObservationEnabled );
+
+  const observation = localObservation || Observation.mapApiToRealm( remoteObservation );
+
+  // In theory the only situation in which an observation would not have a
+  // user is when a user is not signed but has made a new observation in the
+  // app. Also in theory that user should not be able to get to ObsDetail for
+  // those observations, just ObsEdit. But.... let's be safe.
+  const belongsToCurrentUser = (
+    observation?.user?.id === currentUser?.id
+    || ( !observation?.user && !observation?.id )
+  );
+
+  const showSavedMatch = useMemo( () => (
+    // Simple mode applies only when:
+    // 1. It's the current user's observation (or an observation being created)
+    // 2. AND the observation hasn't been synced yet
+    ( belongsToCurrentUser || !observation?.user )
+      && localObservation
+      && !localObservation.wasSynced()
+  ), [belongsToCurrentUser, localObservation, observation?.user] );
+
+  if ( showSavedMatch ) {
+    return (
+      // todo add edit pencil
+      <SavedMatch
+        observation={observation}
+        navToTaxonDetails={() => {}}
+        isFetchingLocation={false}
+        handleAddLocationPressed={() => {}}
+      />
+    );
+  }
+
+  return (
+    <ObsDetailsDefaultModeContainer
+      observation={observation}
+      targetActivityItemID={targetActivityItemID}
+      uuid={uuid}
+      localObservation={localObservation}
+      markViewedLocally={markViewedLocally}
+      markDeletedLocally={markDeletedLocally}
+      remoteObservation={remoteObservation}
+      remoteObsWasDeleted={remoteObsWasDeleted}
+      setRemoteObsWasDeleted={setRemoteObsWasDeleted}
+      fetchRemoteObservationError={fetchRemoteObservationError}
+      currentUser={currentUser}
+      belongsToCurrentUser={belongsToCurrentUser}
+      isRefetching={isRefetching}
+      refetchRemoteObservation={refetchRemoteObservation}
+      isConnected={isConnected}
+      isSimpleMode={showSavedMatch}
+    />
+  );
+};
+
+export default ObsDetailsDefaultModeScreensWrapper;
diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
similarity index 100%
rename from src/components/ObsDetailsDefaultMode/SavedMatch.tsx
rename to src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/navigation/StackNavigators/TabStackNavigator.js b/src/navigation/StackNavigators/TabStackNavigator.js
index 8887dbbad..c8b466198 100644
--- a/src/navigation/StackNavigators/TabStackNavigator.js
+++ b/src/navigation/StackNavigators/TabStackNavigator.js
@@ -19,8 +19,8 @@ import MyObservationsContainer from "components/MyObservations/MyObservationsCon
 import Notifications from "components/Notifications/Notifications";
 import DQAContainer from "components/ObsDetails/DQAContainer";
 import ObsDetailsContainer from "components/ObsDetails/ObsDetailsContainer";
-import ObsDetailsDefaultModeContainer
-  from "components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer";
+import ObsDetailsDefaultModeScreensWrapper
+  from "components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper";
 import ProjectDetailsContainer from "components/ProjectDetails/ProjectDetailsContainer";
 import ProjectMembers from "components/ProjectDetails/ProjectMembers";
 import ProjectRequirements from "components/ProjectDetails/ProjectRequirements";
@@ -129,8 +129,8 @@ const FadeInRootExplore = ( ) => fadeInComponent( <RootExploreContainer /> );
 const FadeInMyObservations = ( ) => fadeInComponent( <MyObservationsContainer /> );
 const FadeInUserProfile = ( ) => fadeInComponent( <UserProfile /> );
 const FadeInExploreContainer = ( ) => fadeInComponent( <ExploreContainer /> );
-const FadeInObsDetailsDefaultModeContainer = ( ) => fadeInComponent(
-  <ObsDetailsDefaultModeContainer />
+const FadeInObsDetailsDefaultModeScreensWrapper = ( ) => fadeInComponent(
+  <ObsDetailsDefaultModeScreensWrapper />
 );
 const FadeInObsDetailsContainer = ( ) => fadeInComponent(
   <ObsDetailsContainer />
@@ -226,7 +226,7 @@ const TabStackNavigator = ( { route }: TabStackNavigatorProps ): Node => {
           ? (
             <Stack.Screen
               name="ObsDetails"
-              component={FadeInObsDetailsDefaultModeContainer}
+              component={FadeInObsDetailsDefaultModeScreensWrapper}
               options={OBS_DETAILS_OPTIONS}
             />
           )

From 783d2fa564ec464ebb901d28c06608f064c1a09a Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Thu, 20 Nov 2025 14:01:02 -0600
Subject: [PATCH 04/35] MOB-512: flow type to obs container props

---
 .../ObsDetailsDefaultModeContainer.js         | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
index 8da0aaf2b..37610b6d4 100644
--- a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
+++ b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
@@ -102,7 +102,26 @@ const reducer = ( state, action ) => {
   }
 };
 
-const ObsDetailsDefaultModeContainer = ( props ): Node => {
+type Props = {
+  belongsToCurrentUser: boolean,
+  currentUser: ?Object,
+  fetchRemoteObservationError: ?Object,
+  isConnected: boolean,
+  isRefetching: boolean,
+  isSimpleMode: boolean,
+  localObservation: ?Object,
+  markDeletedLocally: Function,
+  markViewedLocally: Function,
+  observation: Object,
+  refetchRemoteObservation: Function,
+  remoteObservation: ?Object,
+  remoteObsWasDeleted: boolean,
+  setRemoteObsWasDeleted: Function,
+  targetActivityItemID: number,
+  uuid: string
+}
+
+const ObsDetailsDefaultModeContainer = ( props: Props ): Node => {
   const setObservations = useStore( state => state.setObservations );
   const navigation = useNavigation( );
   const realm = useRealm( );
@@ -157,7 +176,7 @@ const ObsDetailsDefaultModeContainer = ( props ): Node => {
     navigation
   ] );
 
-  const wasSynced = localObservation && localObservation?.wasSynced();
+  const wasSynced = !!( localObservation && localObservation?.wasSynced() );
 
   const hasPhotos = observation?.observationPhotos?.length > 0;
 
@@ -293,7 +312,7 @@ const ObsDetailsDefaultModeContainer = ( props ): Node => {
         const localComments = localObservation?.comments;
         const newComment = data[0];
         newComment.user = currentUser;
-        localComments.push( newComment );
+        localComments?.push( newComment );
       }, "setting local comment in ObsDetailsContainer" );
       const updatedLocalObservation = realm.objectForPrimaryKey( "Observation", uuid );
       dispatch( { type: "ADD_ACTIVITY_ITEM", observationShown: updatedLocalObservation } );

From ccbfc6c4fe2f097ef960413d300f9ee1470ab0e2 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Thu, 20 Nov 2025 15:03:18 -0600
Subject: [PATCH 05/35] MOB-512: maybe types for targetItemID

---
 .../ObsDetailsDefaultMode/CommunitySection/CommunitySection.js  | 2 +-
 src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.js   | 2 +-
 .../ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ObsDetailsDefaultMode/CommunitySection/CommunitySection.js b/src/components/ObsDetailsDefaultMode/CommunitySection/CommunitySection.js
index d7a3d087e..7554d05a6 100644
--- a/src/components/ObsDetailsDefaultMode/CommunitySection/CommunitySection.js
+++ b/src/components/ObsDetailsDefaultMode/CommunitySection/CommunitySection.js
@@ -14,7 +14,7 @@ type Props = {
   activityItems: Array<Object>,
   openAgreeWithIdSheet: Function,
   isConnected: boolean,
-  targetItemID: number,
+  targetItemID: ?number,
   // TODO change to LayoutEvent from react-native if/when switching to TS
   onLayoutTargetItem: ( event: Object ) => void
 }
diff --git a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.js b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.js
index 2f8806a03..483e28d05 100644
--- a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.js
+++ b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.js
@@ -41,7 +41,7 @@ type Props = {
   refetchSubscriptions: Function,
   showAddCommentSheet: Function,
   subscriptions?: Object,
-  targetActivityItemID: number,
+  targetActivityItemID: ?number,
   wasSynced: boolean,
   uuid: string
 }
diff --git a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
index 37610b6d4..2d7eac216 100644
--- a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
+++ b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
@@ -117,7 +117,7 @@ type Props = {
   remoteObservation: ?Object,
   remoteObsWasDeleted: boolean,
   setRemoteObsWasDeleted: Function,
-  targetActivityItemID: number,
+  targetActivityItemID: ?number,
   uuid: string
 }
 

From 361140d08c4ebcfe0d91aea8c67a074f0d2fae2f Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Thu, 20 Nov 2025 15:22:11 -0600
Subject: [PATCH 06/35] MOB-512 ts convert useRemoteObservation.ts

---
 .../ObsDetailsDefaultModeContainer.js         |  2 +-
 .../ObsDetailsDefaultModeScreensWrapper.tsx   | 13 ++++---
 ...Observation.js => useRemoteObservation.ts} | 36 ++++++++++++++++---
 3 files changed, 42 insertions(+), 9 deletions(-)
 rename src/sharedHooks/{useRemoteObservation.js => useRemoteObservation.ts} (73%)

diff --git a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
index 2d7eac216..08dec5111 100644
--- a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
+++ b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
@@ -117,7 +117,7 @@ type Props = {
   remoteObservation: ?Object,
   remoteObsWasDeleted: boolean,
   setRemoteObsWasDeleted: Function,
-  targetActivityItemID: ?number,
+  targetActivityItemID?: ?number,
   uuid: string
 }
 
diff --git a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx
index 7682c384c..1dd4bccda 100644
--- a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx
+++ b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx
@@ -11,14 +11,19 @@ import {
   useRemoteObservation
 } from "sharedHooks";
 
+type RouteParams = {
+    targetActivityItemID?: number,
+    uuid: string,
+}
+
 const ObsDetailsDefaultModeScreensWrapper = () => {
   const { params } = useRoute();
   const {
     targetActivityItemID,
     uuid
-  } = params;
+  } = params as RouteParams;
   const currentUser = useCurrentUser( );
-  const { isConnected } = useNetInfo( );
+  const isConnected = !!useNetInfo( ).isConnected;
 
   const [remoteObsWasDeleted, setRemoteObsWasDeleted] = useState( false );
 
@@ -56,9 +61,9 @@ const ObsDetailsDefaultModeScreensWrapper = () => {
     // Simple mode applies only when:
     // 1. It's the current user's observation (or an observation being created)
     // 2. AND the observation hasn't been synced yet
-    ( belongsToCurrentUser || !observation?.user )
+    !!( ( belongsToCurrentUser || !observation?.user )
       && localObservation
-      && !localObservation.wasSynced()
+      && !localObservation.wasSynced() )
   ), [belongsToCurrentUser, localObservation, observation?.user] );
 
   if ( showSavedMatch ) {
diff --git a/src/sharedHooks/useRemoteObservation.js b/src/sharedHooks/useRemoteObservation.ts
similarity index 73%
rename from src/sharedHooks/useRemoteObservation.js
rename to src/sharedHooks/useRemoteObservation.ts
index 0cbfb9895..a81073d3f 100644
--- a/src/sharedHooks/useRemoteObservation.js
+++ b/src/sharedHooks/useRemoteObservation.ts
@@ -1,4 +1,3 @@
-// @flow
 import { fetchRemoteObservation } from "api/observations";
 import i18n from "i18next";
 import { RealmContext } from "providers/contexts";
@@ -10,7 +9,35 @@ const { useRealm } = RealmContext;
 
 export const fetchRemoteObservationKey = "fetchRemoteObservation";
 
-const filterHiddenContent = observation => {
+interface CommentWithHidden {
+  hidden?: boolean;
+  [key: string]: unknown;
+}
+
+interface IdentificationWithHidden {
+  hidden?: boolean;
+  [key: string]: unknown;
+}
+
+interface RemoteObservation {
+  user?: {
+    id: number;
+    [key: string]: unknown;
+  };
+  comments?: CommentWithHidden[];
+  identifications?: IdentificationWithHidden[];
+  [key: string]: unknown;
+}
+
+interface UseRemoteObservationReturn {
+  remoteObservation: RemoteObservation | null | undefined;
+  refetchRemoteObservation: () => void;
+  isRefetching: boolean;
+  fetchRemoteObservationError: Error | null;
+}
+
+const filterHiddenContent
+= ( observation?: RemoteObservation | null ): RemoteObservation | null | undefined => {
   if ( observation === undefined || observation === null ) {
     return observation;
   }
@@ -24,7 +51,7 @@ const filterHiddenContent = observation => {
   return filteredObservation;
 };
 
-const useRemoteObservation = ( uuid: string, enabled: boolean ): Object => {
+const useRemoteObservation = ( uuid: string, enabled: boolean ): UseRemoteObservationReturn => {
   const fetchRemoteObservationQueryKey = useMemo(
     ( ) => ( [fetchRemoteObservationKey, uuid] ),
     [uuid]
@@ -40,8 +67,9 @@ const useRemoteObservation = ( uuid: string, enabled: boolean ): Object => {
     refetch: refetchRemoteObservation,
     isRefetching,
     error: fetchRemoteObservationError
-  } = useAuthenticatedQuery(
+  } = useAuthenticatedQuery<RemoteObservation | null>(
     fetchRemoteObservationQueryKey,
+    // @ts-expect-error return type mismatch to be handled later
     optsWithAuth => fetchRemoteObservation(
       uuid,
       {

From e24a2df82cefd4aae2390e5b6580b7f73ce7b984 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Thu, 20 Nov 2025 16:10:28 -0600
Subject: [PATCH 07/35] MOB-512: add saved match container

---
 .../ObsDetailsDefaultModeScreensWrapper.tsx   |  9 ++--
 .../SavedMatch/SavedMatchContainer.tsx        | 42 +++++++++++++++++++
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx
index 1dd4bccda..98ade3064 100644
--- a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx
+++ b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx
@@ -2,7 +2,6 @@ import { useNetInfo } from "@react-native-community/netinfo";
 import { useRoute } from "@react-navigation/native";
 import ObsDetailsDefaultModeContainer
   from "components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer";
-import SavedMatch from "components/ObsDetailsDefaultMode/SavedMatch/SavedMatch";
 import React, { useMemo, useState } from "react";
 import Observation from "realmModels/Observation";
 import {
@@ -11,6 +10,8 @@ import {
   useRemoteObservation
 } from "sharedHooks";
 
+import SavedMatchContainer from "./SavedMatch/SavedMatchContainer";
+
 type RouteParams = {
     targetActivityItemID?: number,
     uuid: string,
@@ -68,12 +69,8 @@ const ObsDetailsDefaultModeScreensWrapper = () => {
 
   if ( showSavedMatch ) {
     return (
-      // todo add edit pencil
-      <SavedMatch
+      <SavedMatchContainer
         observation={observation}
-        navToTaxonDetails={() => {}}
-        isFetchingLocation={false}
-        handleAddLocationPressed={() => {}}
       />
     );
   }
diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
index e69de29bb..88df33146 100644
--- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
@@ -0,0 +1,42 @@
+import { useNavigation } from "@react-navigation/native";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import SavedMatch from "components/ObsDetailsDefaultMode/SavedMatch/SavedMatch";
+import _ from "lodash";
+import React from "react";
+import type { RealmObservation } from "realmModels/types";
+
+type Props = {
+  observation: RealmObservation,
+}
+
+const SavedMatchContainer = ( {
+  observation
+}: Props ) => {
+  const navigation = useNavigation<NativeStackNavigationProp<Record<string, { id?: number }>>>( );
+
+  const navToTaxonDetails
+  = ( photo?: { id?: number; isRepresentativeButOtherTaxon?: boolean } ) => {
+    const navParams: {
+        id?: number;
+        firstPhotoID?: number;
+        representativePhoto?: unknown;
+    } = { id: observation.taxon?.id };
+    if ( !photo?.isRepresentativeButOtherTaxon ) {
+      navParams.firstPhotoID = photo?.id;
+    } else {
+      navParams.representativePhoto = photo;
+    }
+    navigation.push( "TaxonDetails", navParams );
+  };
+
+  return (
+    <SavedMatch
+      observation={observation}
+      navToTaxonDetails={navToTaxonDetails}
+      isFetchingLocation={false}
+      handleAddLocationPressed={() => {}}
+    />
+  );
+};
+
+export default SavedMatchContainer;

From 53915996ccfdf00e62095f0db01cbb15e9782c82 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Thu, 20 Nov 2025 16:20:13 -0600
Subject: [PATCH 08/35] MOB-512 no empty map

---
 .../SavedMatch/SavedMatch.tsx                 | 38 +++++--------------
 .../SavedMatch/SavedMatchContainer.tsx        |  2 -
 2 files changed, 10 insertions(+), 30 deletions(-)

diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
index d3c1e919f..f48cd2be3 100644
--- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
@@ -1,5 +1,4 @@
 import { useNetInfo } from "@react-native-community/netinfo";
-import EmptyMapSection from "components/Match/EmptyMapSection";
 import MatchHeader from "components/Match/MatchHeader";
 import PhotosSection from "components/Match/PhotosSection";
 import LocationSection from "components/ObsDetailsDefaultMode/LocationSection/LocationSection";
@@ -19,15 +18,11 @@ const cardClassBottom
 type Props = {
   observation: RealmObservation,
   navToTaxonDetails: ( ) => void,
-  isFetchingLocation: boolean,
-  handleAddLocationPressed: ( ) => void,
 }
 
 const SavedMatch = ( {
   observation,
-  navToTaxonDetails,
-  isFetchingLocation,
-  handleAddLocationPressed
+  navToTaxonDetails
 }: Props ) => {
   const { t } = useTranslation( );
   const { isConnected } = useNetInfo( );
@@ -35,6 +30,12 @@ const SavedMatch = ( {
   const latitude = observation?.privateLatitude || observation?.latitude;
   const { taxon } = observation;
 
+  /* left todo
+  - fill in functionality in container
+  - add edit pencil
+  - fix type errors
+  */
+
   return (
     <ScrollViewWrapper>
       <View className={cardClassTop}>
@@ -47,16 +48,9 @@ const SavedMatch = ( {
         navToTaxonDetails={navToTaxonDetails}
       />
       <View className="border-[1.5px] border-white" />
-      {!latitude
-        ? (
-          <EmptyMapSection
-            handleAddLocationPressed={handleAddLocationPressed}
-            isFetchingLocation={isFetchingLocation}
-          />
-        )
-        : (
-          <MapSection observation={observation} taxon={taxon} />
-        )}
+      {latitude && (
+        <MapSection observation={observation} taxon={taxon} />
+      )}
       <LocationSection
         belongsToCurrentUser
         observation={observation}
@@ -75,18 +69,6 @@ const SavedMatch = ( {
           />
         )
       }
-      {!latitude && (
-        <Button
-          className="mx-4 mb-[30px]"
-          level="neutral"
-          text={t( "ADD-LOCATION-FOR-BETTER-IDS" )}
-          onPress={handleAddLocationPressed}
-          loading={isFetchingLocation}
-          disabled={isFetchingLocation}
-          accessibilityLabel={t( "Edit-location" )}
-          accessibilityHint={t( "Add-location-to-refresh-suggestions" )}
-        />
-      )}
     </ScrollViewWrapper>
   );
 };
diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
index 88df33146..7e25992d7 100644
--- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
@@ -33,8 +33,6 @@ const SavedMatchContainer = ( {
     <SavedMatch
       observation={observation}
       navToTaxonDetails={navToTaxonDetails}
-      isFetchingLocation={false}
-      handleAddLocationPressed={() => {}}
     />
   );
 };

From 3a2c110c935d00bfc3aa5ff21f75ede81d60fa91 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Thu, 20 Nov 2025 17:43:42 -0600
Subject: [PATCH 09/35] MOB-512 add header edit icon for saved match

---
 .../SavedMatch/SavedMatch.tsx                 |  5 +-
 .../SavedMatch/SavedMatchHeaderRight.tsx      | 52 +++++++++++++++++++
 2 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx

diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
index f48cd2be3..15a584fd5 100644
--- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
@@ -10,6 +10,8 @@ import React from "react";
 import type { RealmObservation } from "realmModels/types";
 import { useTranslation } from "sharedHooks";
 
+import SavedMatchHeaderRight from "./SavedMatchHeaderRight";
+
 const cardClassTop
   = "rounded-t-2xl border-lightGray border-[2px] py-[18px] px-5 border-b-0 -mb-0.5";
 const cardClassBottom
@@ -31,13 +33,14 @@ const SavedMatch = ( {
   const { taxon } = observation;
 
   /* left todo
-  - fill in functionality in container
+  - simplify match header
   - add edit pencil
   - fix type errors
   */
 
   return (
     <ScrollViewWrapper>
+      <SavedMatchHeaderRight uuid={observation.uuid} />
       <View className={cardClassTop}>
         <MatchHeader topSuggestion={observation} />
       </View>
diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx
new file mode 100644
index 000000000..d438aaf5e
--- /dev/null
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx
@@ -0,0 +1,52 @@
+import { useNavigation } from "@react-navigation/native";
+import {
+  INatIconButton
+} from "components/SharedComponents";
+import React, { useCallback, useEffect } from "react";
+import type { RealmObservation } from "realmModels/types";
+import {
+  useLocalObservation,
+  useNavigateToObsEdit,
+  useTranslation
+} from "sharedHooks";
+import colors from "styles/tailwindColors";
+
+interface Props {
+  uuid: string;
+}
+
+const SavedMatchHeaderRight = ( {
+  uuid
+}: Props ) => {
+  const navigation = useNavigation( );
+  const { localObservation } = useLocalObservation( uuid );
+  const { t } = useTranslation( );
+  const navigateToObsEdit = useNavigateToObsEdit( );
+
+  const headerRight = useCallback(
+    ( ) => (
+      <INatIconButton
+        testID="ObsDetail.editButton"
+        // TODO remove cast when useLocalObservation converted to typescript
+        onPress={() => navigateToObsEdit( localObservation as RealmObservation )}
+        icon="pencil"
+        color={String( colors?.darkGray )}
+        accessibilityLabel={t( "Edit" )}
+      />
+    ),
+    [
+      localObservation,
+      navigateToObsEdit,
+      t
+    ]
+  );
+
+  useEffect(
+    ( ) => navigation.setOptions( { headerRight } ),
+    [headerRight, navigation]
+  );
+
+  return null;
+};
+
+export default SavedMatchHeaderRight;

From cf53c791ad2374023bb57f531b42cb595499caef Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Thu, 20 Nov 2025 17:59:57 -0600
Subject: [PATCH 10/35] MOB-512 hide confidence metrics

---
 src/components/Match/MatchHeader.tsx          | 23 +++++++++++--------
 .../SavedMatch/SavedMatch.tsx                 |  8 +++----
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/Match/MatchHeader.tsx b/src/components/Match/MatchHeader.tsx
index 51fb47733..b7dad0c44 100644
--- a/src/components/Match/MatchHeader.tsx
+++ b/src/components/Match/MatchHeader.tsx
@@ -19,9 +19,10 @@ interface Props {
     score?: number;
     taxon: RealmTaxon;
   };
+  hideObservationStatus?: boolean
 }
 
-const MatchHeader = ( { topSuggestion }: Props ) => {
+const MatchHeader = ( { topSuggestion, hideObservationStatus }: Props ) => {
   const { t } = useTranslation( );
   const taxon = topSuggestion?.taxon;
 
@@ -89,17 +90,19 @@ const MatchHeader = ( { topSuggestion }: Props ) => {
 
   return (
     <View>
-      <Body2 className="mb-2">{generateCongratulatoryText( )}</Body2>
+      {!hideObservationStatus && <Body2 className="mb-2">{generateCongratulatoryText( )}</Body2>}
       <View className="flex-row justify-between items-center">
         {showSuggestedTaxon( )}
-        <View className="justify-end items-center ml-5">
-          <Subheading2 className="text-inatGreen mb-2">
-            {t( "X-percent", { count: confidence } )}
-          </Subheading2>
-          <Body4 className="text-inatGreen">
-            {t( "Confidence--label" )}
-          </Body4>
-        </View>
+        { !hideObservationStatus && (
+          <View className="justify-end items-center ml-5">
+            <Subheading2 className="text-inatGreen mb-2">
+              {t( "X-percent", { count: confidence } )}
+            </Subheading2>
+            <Body4 className="text-inatGreen">
+              {t( "Confidence--label" )}
+            </Body4>
+          </View>
+        )}
       </View>
     </View>
   );
diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
index 15a584fd5..c3f2f3a93 100644
--- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
@@ -32,17 +32,15 @@ const SavedMatch = ( {
   const latitude = observation?.privateLatitude || observation?.latitude;
   const { taxon } = observation;
 
-  /* left todo
-  - simplify match header
-  - add edit pencil
-  - fix type errors
+  /*
+    todo: globalize class strings and maybe some of the resused container functions
   */
 
   return (
     <ScrollViewWrapper>
       <SavedMatchHeaderRight uuid={observation.uuid} />
       <View className={cardClassTop}>
-        <MatchHeader topSuggestion={observation} />
+        <MatchHeader hideObservationStatus topSuggestion={observation} />
       </View>
       <PhotosSection
         representativePhoto={taxon?.representative_photo}

From 19cb7064a691363a6b752c43d3866cc3f50fdcac Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Fri, 21 Nov 2025 10:12:59 -0600
Subject: [PATCH 11/35] MOB-512 minimal unit test fix and prop spreading
 allowed for tests

---
 .eslintrc.js                                  |  6 +++
 tests/integration/ObsDetails.test.js          |  6 +--
 .../ObsDetailsDefaultMode/ObsDetails.test.js  | 42 +++++++++++++++++--
 3 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index c15fb7678..be61a540f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -164,6 +164,12 @@ module.exports = {
         "@typescript-eslint/no-require-imports": "off"
       }
     },
+    {
+      files: ["*.test.js", "*.test.tsx"],
+      rules: {
+        "react/jsx-props-no-spreading": "off"
+      }
+    },
     {
       files: ["**/__mocks__/**/*", "**/*mock*", "**/*.mock.*"],
       rules: {
diff --git a/tests/integration/ObsDetails.test.js b/tests/integration/ObsDetails.test.js
index 32c023467..2794b0401 100644
--- a/tests/integration/ObsDetails.test.js
+++ b/tests/integration/ObsDetails.test.js
@@ -1,7 +1,7 @@
 import { screen, waitFor } from "@testing-library/react-native";
 import ObsDetailsContainer from "components/ObsDetails/ObsDetailsContainer";
-import DefaultModeObsDetailsContainer
-  from "components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer";
+import ObsDetailsDefaultModeScreensWrapper
+  from "components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper";
 import inatjs from "inaturalistjs";
 import React from "react";
 import Observation from "realmModels/Observation";
@@ -71,7 +71,7 @@ jest.mock( "@react-navigation/native", () => {
 // Run the same suite of tests for multiple ObsDetails container
 describe.each( [
   { Container: ObsDetailsContainer, name: "ObsDetailsContainer" },
-  { Container: DefaultModeObsDetailsContainer, name: "DefaultModeObsDetailsContainer" }
+  { Container: ObsDetailsDefaultModeScreensWrapper, name: "ObsDetailsDefaultModeScreensWrapper" }
 ] )( "ObsDetails", ( { Container, name } ) => {
   beforeAll( async () => {
     jest.useFakeTimers( );
diff --git a/tests/unit/components/ObsDetailsDefaultMode/ObsDetails.test.js b/tests/unit/components/ObsDetailsDefaultMode/ObsDetails.test.js
index 7399eb0c9..8441b4352 100644
--- a/tests/unit/components/ObsDetailsDefaultMode/ObsDetails.test.js
+++ b/tests/unit/components/ObsDetailsDefaultMode/ObsDetails.test.js
@@ -128,8 +128,32 @@ jest.mock( "sharedHooks/useObservationsUpdates", () => ( {
   } ) )
 } ) );
 
-const renderObsDetails = ( ) => renderComponent(
-  <ObsDetailsContainer />
+const mockRefetchRemoteObservation = jest.fn();
+const mockMarkViewedLocally = jest.fn();
+const mockMarkDeletedLocally = jest.fn();
+const mockSetRemoteObsWasDeleted = jest.fn();
+
+const defaultProps = {
+  belongsToCurrentUser: false,
+  currentUser: mockUser,
+  fetchRemoteObservationError: null,
+  isConnected: true,
+  isRefetching: false,
+  isSimpleMode: false,
+  localObservation: null,
+  markDeletedLocally: mockMarkDeletedLocally,
+  markViewedLocally: mockMarkViewedLocally,
+  observation: mockObservation,
+  refetchRemoteObservation: mockRefetchRemoteObservation,
+  remoteObservation: mockObservation,
+  remoteObsWasDeleted: false,
+  setRemoteObsWasDeleted: mockSetRemoteObsWasDeleted,
+  targetActivityItemID: null,
+  uuid: mockObservation.uuid
+};
+
+const renderObsDetails = ( props = {} ) => renderComponent(
+  <ObsDetailsContainer {...defaultProps} {...props} />
 );
 
 describe( "ObsDetails", () => {
@@ -156,7 +180,11 @@ describe( "ObsDetails", () => {
     } );
 
     it( "should render fallback image icon instead of photos", async () => {
-      renderObsDetails( );
+      renderObsDetails( {
+        observation: mockNoEvidenceObservation,
+        remoteObservation: mockNoEvidenceObservation,
+        uuid: mockNoEvidenceObservation.uuid
+      } );
 
       const labelText = t( "Observation-has-no-photos-and-no-sounds" );
       const fallbackImage = await screen.findByLabelText( labelText );
@@ -194,7 +222,13 @@ describe( "ObsDetails", () => {
       } );
 
       jest.spyOn( useCurrentUser, "default" ).mockImplementation( () => mockUser );
-      renderObsDetails( );
+      renderObsDetails( {
+        observation: otherUserObservation,
+        remoteObservation: otherUserObservation,
+        uuid: otherUserObservation.uuid,
+        belongsToCurrentUser: false,
+        localObservation: null
+      } );
       const agreeButton = screen.getByTestId(
         `ActivityItem.AgreeIdButton.${firstIdentification.taxon.id}`
       );

From e8a5beded79cca5f4a7fd59a2c0dfb999cb5482e Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Fri, 21 Nov 2025 10:21:50 -0600
Subject: [PATCH 12/35] MOB-512 add privateLatitude

---
 src/realmModels/types.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/realmModels/types.d.ts b/src/realmModels/types.d.ts
index fc1495ada..f2aef5286 100644
--- a/src/realmModels/types.d.ts
+++ b/src/realmModels/types.d.ts
@@ -112,6 +112,7 @@ export interface RealmObservationPojo {
   observed_time_zone?: string;
   owners_identification_from_vision: boolean | null;
   place_guess: string | null;
+  privateLatitude?: number;
   positional_accuracy: number | null;
   species_guess: string | null;
   taxon_id: number | null;

From 45f2f63dff15e371cf522c282451ecec742340ad Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Fri, 21 Nov 2025 10:31:09 -0600
Subject: [PATCH 13/35] MOB-512: resuse match card classes

---
 src/components/Match/Match.js                      | 12 ++++++------
 .../SavedMatch/SavedMatch.tsx                      | 14 +++-----------
 2 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/src/components/Match/Match.js b/src/components/Match/Match.js
index 5f26c9626..bf05944b7 100644
--- a/src/components/Match/Match.js
+++ b/src/components/Match/Match.js
@@ -19,9 +19,9 @@ import MatchHeader from "./MatchHeader";
 import PhotosSection from "./PhotosSection";
 import SaveDiscardButtons from "./SaveDiscardButtons";
 
-const cardClassTop
+export const matchCardClassTop
   = "rounded-t-2xl border-lightGray border-[2px] py-[18px] px-5 border-b-0 -mb-0.5";
-const cardClassBottom
+export const matchCardClassBottom
   = "rounded-b-2xl border-lightGray border-[2px] pb-3 border-t-0 -mt-0.5 mb-[30px]";
 
 type Props = {
@@ -66,7 +66,7 @@ const Match = ( {
     return (
       <>
         <ScrollViewWrapper scrollRef={scrollRef}>
-          <View className={cardClassTop}>
+          <View className={matchCardClassTop}>
             {
               suggestionsLoading
                 ? (
@@ -127,7 +127,7 @@ const Match = ( {
     return (
       <>
         <ScrollViewWrapper scrollRef={scrollRef}>
-          <View className={cardClassTop}>
+          <View className={matchCardClassTop}>
             {
               suggestionsLoading
                 ? (
@@ -177,7 +177,7 @@ const Match = ( {
   return (
     <>
       <ScrollViewWrapper scrollRef={scrollRef}>
-        <View className={cardClassTop}>
+        <View className={matchCardClassTop}>
           {
             suggestionsLoading
               ? (
@@ -207,7 +207,7 @@ const Match = ( {
           belongsToCurrentUser
           observation={observation}
         />
-        <View className={cardClassBottom} />
+        <View className={matchCardClassBottom} />
         {
           isConnected && (
             <Button
diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
index c3f2f3a93..06c529e5b 100644
--- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
@@ -1,4 +1,5 @@
 import { useNetInfo } from "@react-native-community/netinfo";
+import { matchCardClassBottom, matchCardClassTop } from "components/Match/Match";
 import MatchHeader from "components/Match/MatchHeader";
 import PhotosSection from "components/Match/PhotosSection";
 import LocationSection from "components/ObsDetailsDefaultMode/LocationSection/LocationSection";
@@ -12,11 +13,6 @@ import { useTranslation } from "sharedHooks";
 
 import SavedMatchHeaderRight from "./SavedMatchHeaderRight";
 
-const cardClassTop
-  = "rounded-t-2xl border-lightGray border-[2px] py-[18px] px-5 border-b-0 -mb-0.5";
-const cardClassBottom
-  = "rounded-b-2xl border-lightGray border-[2px] pb-3 border-t-0 -mt-0.5 mb-[30px]";
-
 type Props = {
   observation: RealmObservation,
   navToTaxonDetails: ( ) => void,
@@ -32,14 +28,10 @@ const SavedMatch = ( {
   const latitude = observation?.privateLatitude || observation?.latitude;
   const { taxon } = observation;
 
-  /*
-    todo: globalize class strings and maybe some of the resused container functions
-  */
-
   return (
     <ScrollViewWrapper>
       <SavedMatchHeaderRight uuid={observation.uuid} />
-      <View className={cardClassTop}>
+      <View className={matchCardClassTop}>
         <MatchHeader hideObservationStatus topSuggestion={observation} />
       </View>
       <PhotosSection
@@ -56,7 +48,7 @@ const SavedMatch = ( {
         belongsToCurrentUser
         observation={observation}
       />
-      <View className={cardClassBottom} />
+      <View className={matchCardClassBottom} />
       {
         isConnected && (
           <Button

From ba5998914934e64c5c091b9ea14d2e09562e56a9 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Fri, 21 Nov 2025 10:34:30 -0600
Subject: [PATCH 14/35] MOB-512 do not expect a type error

---
 src/sharedHooks/useRemoteObservation.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/sharedHooks/useRemoteObservation.ts b/src/sharedHooks/useRemoteObservation.ts
index a81073d3f..e35656480 100644
--- a/src/sharedHooks/useRemoteObservation.ts
+++ b/src/sharedHooks/useRemoteObservation.ts
@@ -69,7 +69,6 @@ const useRemoteObservation = ( uuid: string, enabled: boolean ): UseRemoteObserv
     error: fetchRemoteObservationError
   } = useAuthenticatedQuery<RemoteObservation | null>(
     fetchRemoteObservationQueryKey,
-    // @ts-expect-error return type mismatch to be handled later
     optsWithAuth => fetchRemoteObservation(
       uuid,
       {

From 2f867fa1b63694dce349dd4133fecda42bc07990 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Tue, 25 Nov 2025 09:54:33 -0600
Subject: [PATCH 15/35] MOB-512 correct comment

---
 .../ObsDetailsDefaultModeScreensWrapper.tsx                     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx
index 98ade3064..0e8b370ef 100644
--- a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx
+++ b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx
@@ -59,7 +59,7 @@ const ObsDetailsDefaultModeScreensWrapper = () => {
   );
 
   const showSavedMatch = useMemo( () => (
-    // Simple mode applies only when:
+    // Saved match screen is used when:
     // 1. It's the current user's observation (or an observation being created)
     // 2. AND the observation hasn't been synced yet
     !!( ( belongsToCurrentUser || !observation?.user )

From 718a66de114661cfac429f7abe35fdab4da32738 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Tue, 2 Dec 2025 17:18:52 -0600
Subject: [PATCH 16/35] MOB-512 icon size 22 and add padding

---
 src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx  | 2 +-
 .../ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx  | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
index 06c529e5b..18b84dfba 100644
--- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
@@ -31,7 +31,7 @@ const SavedMatch = ( {
   return (
     <ScrollViewWrapper>
       <SavedMatchHeaderRight uuid={observation.uuid} />
-      <View className={matchCardClassTop}>
+      <View className={`${matchCardClassTop} mt-[10px]`}>
         <MatchHeader hideObservationStatus topSuggestion={observation} />
       </View>
       <PhotosSection
diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx
index d438aaf5e..b70eda65b 100644
--- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx
@@ -32,6 +32,7 @@ const SavedMatchHeaderRight = ( {
         icon="pencil"
         color={String( colors?.darkGray )}
         accessibilityLabel={t( "Edit" )}
+        size={22}
       />
     ),
     [

From e33ca394563b7d8d6909fc4b4b1797a92e62a3e8 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Tue, 2 Dec 2025 17:32:10 -0600
Subject: [PATCH 17/35] MOB-512: account for undefined taxon

---
 src/components/Match/MatchHeader.tsx                 | 4 ++--
 src/components/SharedComponents/DisplayTaxonName.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Match/MatchHeader.tsx b/src/components/Match/MatchHeader.tsx
index b7dad0c44..fcc7500a7 100644
--- a/src/components/Match/MatchHeader.tsx
+++ b/src/components/Match/MatchHeader.tsx
@@ -17,7 +17,7 @@ interface Props {
   topSuggestion?: {
     combined_score?: number;
     score?: number;
-    taxon: RealmTaxon;
+    taxon?: RealmTaxon;
   };
   hideObservationStatus?: boolean
 }
@@ -43,7 +43,7 @@ const MatchHeader = ( { topSuggestion, hideObservationStatus }: Props ) => {
     }
 
     let rankDescription = "organism";
-    if ( taxon.rank_level === 10 ) {
+    if ( taxon?.rank_level === 10 ) {
       rankDescription = "species";
     }
 
diff --git a/src/components/SharedComponents/DisplayTaxonName.tsx b/src/components/SharedComponents/DisplayTaxonName.tsx
index 47d7e7de3..88f234b2e 100644
--- a/src/components/SharedComponents/DisplayTaxonName.tsx
+++ b/src/components/SharedComponents/DisplayTaxonName.tsx
@@ -34,7 +34,7 @@ interface Props {
   showOneNameOnly?: boolean;
   selectable?: boolean;
   small?: boolean;
-  taxon: RealmTaxon | ApiTaxon;
+  taxon?: RealmTaxon | ApiTaxon;
   textCentered?: boolean;
   topTextComponent?: React.ComponentType<TextProps>;
   underlineTopText?: boolean;

From 1484f4df3da390f1a5efd1c97bafa6d5b70950c0 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Tue, 2 Dec 2025 23:16:20 -0600
Subject: [PATCH 18/35] MOB-512 add fields and use ApiObservation

---
 src/api/types.d.ts                      |  8 ++++++++
 src/sharedHooks/useRemoteObservation.ts | 27 ++++---------------------
 2 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/src/api/types.d.ts b/src/api/types.d.ts
index 286230f76..7408cc7bc 100644
--- a/src/api/types.d.ts
+++ b/src/api/types.d.ts
@@ -102,12 +102,17 @@ export interface ApiUser {
 export interface ApiComment {
   body?: string;
   user?: ApiUser;
+  id: number;
+  hidden?: boolean;
+  uuid: string;
+  created_at: string;
 }
 
 export interface ApiIdentification {
   body?: string;
   taxon?: ApiTaxon;
   user?: ApiUser;
+  hidden?: boolean;
 }
 
 export interface ApiNotification {
@@ -134,6 +139,9 @@ export interface ApiObservation extends ApiRecord {
   time_observed_at?: string;
   user?: ApiUser;
   uuid: string;
+  comments?: ApiComment[];
+  identifications?: ApiIdentification[];
+  taxon?: ApiTaxon;
 }
 
 export interface ApiObservationsSearchResponse extends ApiResponse {
diff --git a/src/sharedHooks/useRemoteObservation.ts b/src/sharedHooks/useRemoteObservation.ts
index e35656480..002f53a98 100644
--- a/src/sharedHooks/useRemoteObservation.ts
+++ b/src/sharedHooks/useRemoteObservation.ts
@@ -1,4 +1,5 @@
 import { fetchRemoteObservation } from "api/observations";
+import type { ApiObservation } from "api/types";
 import i18n from "i18next";
 import { RealmContext } from "providers/contexts";
 import { useCallback, useEffect, useMemo } from "react";
@@ -9,35 +10,15 @@ const { useRealm } = RealmContext;
 
 export const fetchRemoteObservationKey = "fetchRemoteObservation";
 
-interface CommentWithHidden {
-  hidden?: boolean;
-  [key: string]: unknown;
-}
-
-interface IdentificationWithHidden {
-  hidden?: boolean;
-  [key: string]: unknown;
-}
-
-interface RemoteObservation {
-  user?: {
-    id: number;
-    [key: string]: unknown;
-  };
-  comments?: CommentWithHidden[];
-  identifications?: IdentificationWithHidden[];
-  [key: string]: unknown;
-}
-
 interface UseRemoteObservationReturn {
-  remoteObservation: RemoteObservation | null | undefined;
+  remoteObservation: ApiObservation | null | undefined;
   refetchRemoteObservation: () => void;
   isRefetching: boolean;
   fetchRemoteObservationError: Error | null;
 }
 
 const filterHiddenContent
-= ( observation?: RemoteObservation | null ): RemoteObservation | null | undefined => {
+= ( observation?: ApiObservation | null ): ApiObservation | null | undefined => {
   if ( observation === undefined || observation === null ) {
     return observation;
   }
@@ -67,7 +48,7 @@ const useRemoteObservation = ( uuid: string, enabled: boolean ): UseRemoteObserv
     refetch: refetchRemoteObservation,
     isRefetching,
     error: fetchRemoteObservationError
-  } = useAuthenticatedQuery<RemoteObservation | null>(
+  } = useAuthenticatedQuery<ApiObservation | null>(
     fetchRemoteObservationQueryKey,
     optsWithAuth => fetchRemoteObservation(
       uuid,

From 94affc53d1862b9f52320201604268650651ed76 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Tue, 2 Dec 2025 23:24:39 -0600
Subject: [PATCH 19/35] MOB-512 rm isSimpleMode in ObsDetailDefaultMode
 components

---
 .../ObsDetailsDefaultMode.tsx                 | 57 ++++++++-----------
 .../ObsDetailsDefaultModeContainer.js         |  3 -
 .../ObsDetailsDefaultModeScreensWrapper.tsx   |  1 -
 3 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.tsx b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.tsx
index a88ff818a..0c9739c50 100644
--- a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.tsx
+++ b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.tsx
@@ -32,7 +32,6 @@ type Props = {
   belongsToCurrentUser: boolean,
   currentUser: RealmUser,
   isConnected: boolean,
-  isSimpleMode: boolean,
   navToSuggestions: () => void,
   observation: RealmObservation & Observation & { id: number },
   openAddCommentSheet: () => void,
@@ -52,7 +51,6 @@ const ObsDetailsDefaultMode = ( {
   belongsToCurrentUser,
   currentUser,
   isConnected,
-  isSimpleMode,
   navToSuggestions,
   observation,
   openAddCommentSheet,
@@ -98,13 +96,11 @@ const ObsDetailsDefaultMode = ( {
             setHeightOfContentAboveCommunitySection( layout );
           }}
         >
-          {!isSimpleMode && (
-            <ObserverDetails
-              belongsToCurrentUser={belongsToCurrentUser}
-              isConnected={isConnected}
-              observation={observation}
-            />
-          )}
+          <ObserverDetails
+            belongsToCurrentUser={belongsToCurrentUser}
+            isConnected={isConnected}
+            observation={observation}
+          />
           <View>
             <ObsMediaDisplayContainer observation={observation} />
           </View>
@@ -113,10 +109,7 @@ const ObsDetailsDefaultMode = ( {
             observation={observation}
             isSimpleMode
           />
-          <View className={isSimpleMode
-            ? "mt-[15px]"
-            : "mt-5"}
-          >
+          <View className="mt-5">
             <MapSection observation={observation} />
           </View>
           <LocationSection
@@ -124,29 +117,25 @@ const ObsDetailsDefaultMode = ( {
             observation={observation}
           />
           <NotesSection description={observation.description} />
-          {!isSimpleMode && <View className={cardClassBottom} />}
+          <View className={cardClassBottom} />
         </View>
-        {!isSimpleMode && (
-          <>
-            <CommunitySection
-              activityItems={activityItems}
-              isConnected={isConnected}
-              targetItemID={targetActivityItemID}
-              observation={observation}
-              openAgreeWithIdSheet={openAgreeWithIdSheet}
-              refetchRemoteObservation={refetchRemoteObservation}
-              onLayoutTargetItem={setOffsetToActivityItem}
-            />
-            {addingActivityItem && (
-              <View className="flex-row items-center justify-center p-10">
-                <ActivityIndicator size={50} />
-              </View>
-            )}
-            <StatusSection observation={observation} />
-            <DetailsSection observation={observation} />
-            <MoreSection observation={observation} />
-          </>
+        <CommunitySection
+          activityItems={activityItems}
+          isConnected={isConnected}
+          targetItemID={targetActivityItemID}
+          observation={observation}
+          openAgreeWithIdSheet={openAgreeWithIdSheet}
+          refetchRemoteObservation={refetchRemoteObservation}
+          onLayoutTargetItem={setOffsetToActivityItem}
+        />
+        {addingActivityItem && (
+          <View className="flex-row items-center justify-center p-10">
+            <ActivityIndicator size={50} />
+          </View>
         )}
+        <StatusSection observation={observation} />
+        <DetailsSection observation={observation} />
+        <MoreSection observation={observation} />
       </ScrollView>
       {showFloatingButtons && (
         <FloatingButtons
diff --git a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
index 08dec5111..ecac21986 100644
--- a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
+++ b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
@@ -108,7 +108,6 @@ type Props = {
   fetchRemoteObservationError: ?Object,
   isConnected: boolean,
   isRefetching: boolean,
-  isSimpleMode: boolean,
   localObservation: ?Object,
   markDeletedLocally: Function,
   markViewedLocally: Function,
@@ -142,7 +141,6 @@ const ObsDetailsDefaultModeContainer = ( props: Props ): Node => {
     isRefetching,
     refetchRemoteObservation,
     isConnected,
-    isSimpleMode,
     remoteObsWasDeleted
   } = props;
 
@@ -342,7 +340,6 @@ const ObsDetailsDefaultModeContainer = ( props: Props ): Node => {
         belongsToCurrentUser={belongsToCurrentUser}
         currentUser={currentUser}
         isConnected={isConnected}
-        isSimpleMode={isSimpleMode}
         navToSuggestions={navToSuggestions}
         observation={observationShown}
         openAddCommentSheet={openAddCommentSheet}
diff --git a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx
index 0e8b370ef..9ada16fef 100644
--- a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx
+++ b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx
@@ -92,7 +92,6 @@ const ObsDetailsDefaultModeScreensWrapper = () => {
       isRefetching={isRefetching}
       refetchRemoteObservation={refetchRemoteObservation}
       isConnected={isConnected}
-      isSimpleMode={showSavedMatch}
     />
   );
 };

From 08ce18703ce1bf37376e719a1cd067a6cab9b204 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Tue, 2 Dec 2025 23:28:47 -0600
Subject: [PATCH 20/35] MOB-512 use observation as prop and rename testId

---
 .../SavedMatch/SavedMatchHeaderRight.tsx             | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx
index b70eda65b..6dd80b44d 100644
--- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx
@@ -5,30 +5,28 @@ import {
 import React, { useCallback, useEffect } from "react";
 import type { RealmObservation } from "realmModels/types";
 import {
-  useLocalObservation,
   useNavigateToObsEdit,
   useTranslation
 } from "sharedHooks";
 import colors from "styles/tailwindColors";
 
 interface Props {
-  uuid: string;
+  observation: RealmObservation;
 }
 
 const SavedMatchHeaderRight = ( {
-  uuid
+  observation
 }: Props ) => {
   const navigation = useNavigation( );
-  const { localObservation } = useLocalObservation( uuid );
   const { t } = useTranslation( );
   const navigateToObsEdit = useNavigateToObsEdit( );
 
   const headerRight = useCallback(
     ( ) => (
       <INatIconButton
-        testID="ObsDetail.editButton"
+        testID="SavedMatch.editButton"
         // TODO remove cast when useLocalObservation converted to typescript
-        onPress={() => navigateToObsEdit( localObservation as RealmObservation )}
+        onPress={() => navigateToObsEdit( observation )}
         icon="pencil"
         color={String( colors?.darkGray )}
         accessibilityLabel={t( "Edit" )}
@@ -36,7 +34,7 @@ const SavedMatchHeaderRight = ( {
       />
     ),
     [
-      localObservation,
+      observation,
       navigateToObsEdit,
       t
     ]

From 5b2b4beeb26451d5e2584f13253f2fb797140409 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Tue, 2 Dec 2025 23:30:44 -0600
Subject: [PATCH 21/35] MOB-512 type-> interface and pass observation prop to
 headerRight

---
 .../ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx           | 4 ++--
 .../ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
index 18b84dfba..c17464f20 100644
--- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
@@ -13,7 +13,7 @@ import { useTranslation } from "sharedHooks";
 
 import SavedMatchHeaderRight from "./SavedMatchHeaderRight";
 
-type Props = {
+interface Props {
   observation: RealmObservation,
   navToTaxonDetails: ( ) => void,
 }
@@ -30,7 +30,7 @@ const SavedMatch = ( {
 
   return (
     <ScrollViewWrapper>
-      <SavedMatchHeaderRight uuid={observation.uuid} />
+      <SavedMatchHeaderRight observation={observation} />
       <View className={`${matchCardClassTop} mt-[10px]`}>
         <MatchHeader hideObservationStatus topSuggestion={observation} />
       </View>
diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
index 7e25992d7..ba8936717 100644
--- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
@@ -5,7 +5,7 @@ import _ from "lodash";
 import React from "react";
 import type { RealmObservation } from "realmModels/types";
 
-type Props = {
+interface Props {
   observation: RealmObservation,
 }
 

From b005e074c510000705df4226f081d145099b1d46 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Tue, 2 Dec 2025 23:33:52 -0600
Subject: [PATCH 22/35] MOB-512 reunite the lat/lon brothers

---
 src/realmModels/types.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/realmModels/types.d.ts b/src/realmModels/types.d.ts
index 623ee1e58..287cf9738 100644
--- a/src/realmModels/types.d.ts
+++ b/src/realmModels/types.d.ts
@@ -124,6 +124,7 @@ export interface RealmObservationPojo {
   owners_identification_from_vision: boolean | null;
   place_guess: string | null;
   privateLatitude?: number;
+  privateLongitude?: number;
   positional_accuracy: number | null;
   species_guess: string | null;
   taxon_id: number | null;

From b5ee1b6aa70cd6bdfd26b55bc51d2ae158aa83d1 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Tue, 2 Dec 2025 23:44:52 -0600
Subject: [PATCH 23/35] MOB-512 representative photo option for PhotosSection
 and fix protruding image bug

---
 src/components/Match/PhotosSection.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Match/PhotosSection.js b/src/components/Match/PhotosSection.js
index 4b92b0845..6fb031080 100644
--- a/src/components/Match/PhotosSection.js
+++ b/src/components/Match/PhotosSection.js
@@ -12,7 +12,7 @@ import Photo from "realmModels/Photo";
 import getImageDimensions from "sharedHelpers/getImageDimensions";
 
 type Props = {
-  representativePhoto: Object,
+  representativePhoto?: Object,
   taxon: Object,
   obsPhotos: Array<Object>,
   navToTaxonDetails: ( photo: Object ) => void
@@ -189,7 +189,7 @@ const PhotosSection = ( {
   }
 
   return (
-    <View className={classnames( "h-[390px]", layoutClasses.containerClass )}>
+    <View className={classnames( "h-[390px] overflow-hidden", layoutClasses.containerClass )}>
       {renderObservationPhoto( )}
       {bestTaxonPhotos.length > 0 && renderTaxonPhotos( )}
       <MediaViewerModal

From 6a0512aa39587156b4f36df1b9551a627c9361e4 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Tue, 2 Dec 2025 23:45:37 -0600
Subject: [PATCH 24/35] MOB-512 no representative photo in saved match flow

---
 .../ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx        | 1 -
 .../SavedMatch/SavedMatchContainer.tsx                     | 7 +------
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
index c17464f20..f894aeab4 100644
--- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
@@ -35,7 +35,6 @@ const SavedMatch = ( {
         <MatchHeader hideObservationStatus topSuggestion={observation} />
       </View>
       <PhotosSection
-        representativePhoto={taxon?.representative_photo}
         taxon={taxon}
         obsPhotos={observation.observationPhotos}
         navToTaxonDetails={navToTaxonDetails}
diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
index ba8936717..90d5c2027 100644
--- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
@@ -15,17 +15,12 @@ const SavedMatchContainer = ( {
   const navigation = useNavigation<NativeStackNavigationProp<Record<string, { id?: number }>>>( );
 
   const navToTaxonDetails
-  = ( photo?: { id?: number; isRepresentativeButOtherTaxon?: boolean } ) => {
+  = () => {
     const navParams: {
         id?: number;
         firstPhotoID?: number;
         representativePhoto?: unknown;
     } = { id: observation.taxon?.id };
-    if ( !photo?.isRepresentativeButOtherTaxon ) {
-      navParams.firstPhotoID = photo?.id;
-    } else {
-      navParams.representativePhoto = photo;
-    }
     navigation.push( "TaxonDetails", navParams );
   };
 

From 57d5996736251b925a9090fc340f62b03d8de1d3 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Wed, 3 Dec 2025 18:02:28 -0600
Subject: [PATCH 25/35] MOB-512 add component test to check for correct
 savedMatch or obsDetail component

---
 .../ObsDetailsDefaultMode.tsx                 |   2 +-
 .../SavedMatch/SavedMatch.tsx                 |   2 +-
 ...bsDetailsDefaultModeScreensWrapper.test.js | 149 ++++++++++++++++++
 3 files changed, 151 insertions(+), 2 deletions(-)
 create mode 100644 tests/unit/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.test.js

diff --git a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.tsx b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.tsx
index 0c9739c50..09f5be743 100644
--- a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.tsx
+++ b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.tsx
@@ -77,7 +77,7 @@ const ObsDetailsDefaultMode = ( {
   const showFloatingButtons = currentUser && !isSavedObservationByCurrentUser;
 
   return (
-    <View className="flex-1 bg-white">
+    <View className="flex-1 bg-white" testID="ObsDetails.container">
       <ObsDetailsDefaultModeHeaderRight
         belongsToCurrentUser={belongsToCurrentUser}
         observationId={observation?.id}
diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
index f894aeab4..affdf58db 100644
--- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
@@ -29,7 +29,7 @@ const SavedMatch = ( {
   const { taxon } = observation;
 
   return (
-    <ScrollViewWrapper>
+    <ScrollViewWrapper testID="SavedMatch.container">
       <SavedMatchHeaderRight observation={observation} />
       <View className={`${matchCardClassTop} mt-[10px]`}>
         <MatchHeader hideObservationStatus topSuggestion={observation} />
diff --git a/tests/unit/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.test.js b/tests/unit/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.test.js
new file mode 100644
index 000000000..b8f8af49b
--- /dev/null
+++ b/tests/unit/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.test.js
@@ -0,0 +1,149 @@
+import { useRoute } from "@react-navigation/native";
+import { screen } from "@testing-library/react-native";
+import ObsDetailsDefaultModeScreensWrapper
+  from "components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper";
+import React from "react";
+import * as useCurrentUser from "sharedHooks/useCurrentUser";
+import * as useLocalObservation from "sharedHooks/useLocalObservation";
+import * as useRemoteObservation from "sharedHooks/useRemoteObservation";
+import factory from "tests/factory";
+import faker from "tests/helpers/faker";
+import { renderComponent } from "tests/helpers/render";
+
+const mockCurrentUser = factory( "LocalUser", {
+  id: 123,
+  login: faker.internet.userName( )
+} );
+
+const mockLocalObservation = factory( "LocalObservation", {
+  user: factory( "LocalUser", {
+    id: 123
+  } ),
+  uuid: "test-123"
+} );
+
+const mockParams = {
+  uuid: "test-123"
+};
+
+jest.mock( "@react-native-community/netinfo", () => ( {
+  useNetInfo: () => ( { isConnected: true } ),
+  configure: jest.fn( )
+} ) );
+
+jest.mock( "sharedHooks/useCurrentUser", () => jest.fn() );
+jest.mock( "sharedHooks/useLocalObservation", () => jest.fn() );
+jest.mock( "sharedHooks/useRemoteObservation", () => jest.fn() );
+
+describe( "ObsDetailsDefaultModeScreensWrapper", ( ) => {
+  beforeEach( ( ) => {
+    useRoute.mockReturnValue( {
+      params: mockParams
+    } );
+
+    useCurrentUser.mockReturnValue( mockCurrentUser );
+
+    useLocalObservation.mockReturnValue( {
+      localObservation: null,
+      markDeletedLocally: jest.fn( ),
+      markViewedLocally: jest.fn( )
+    } );
+
+    useRemoteObservation.mockReturnValue( {
+      remoteObservation: null,
+      refetchRemoteObservation: jest.fn( ),
+      isRefetching: false,
+      fetchRemoteObservationError: null
+    } );
+  } );
+
+  afterEach( ( ) => {
+    jest.clearAllMocks( );
+  } );
+
+  describe( "when showSavedMatch is true", ( ) => {
+    it(
+      "renders SavedMatchContainer when observation belongs to current user and is not synced",
+      ( ) => {
+        const unsyncedLocalObservation = {
+          ...mockLocalObservation,
+          wasSynced: jest.fn( () => false )
+        };
+
+        useLocalObservation.default.mockReturnValue( {
+          localObservation: unsyncedLocalObservation,
+          markDeletedLocally: jest.fn( ),
+          markViewedLocally: jest.fn( )
+        } );
+
+        renderComponent( <ObsDetailsDefaultModeScreensWrapper /> );
+
+        expect( screen.getByTestId( "SavedMatch.container" ) ).toBeTruthy( );
+        expect( screen.queryByTestId( "ObsDetails.container" ) ).toBeFalsy( );
+      }
+    );
+
+    it( "renders SavedMatchContainer when observation has no user and is not synced", ( ) => {
+      const unsyncedLocalObservationNoUser = factory( "LocalObservation", {
+        user: null,
+        uuid: "test-123",
+        wasSynced: jest.fn( () => false )
+      } );
+
+      useLocalObservation.default.mockReturnValue( {
+        localObservation: unsyncedLocalObservationNoUser,
+        markDeletedLocally: jest.fn( ),
+        markViewedLocally: jest.fn( )
+      } );
+
+      renderComponent( <ObsDetailsDefaultModeScreensWrapper /> );
+
+      expect( screen.getByTestId( "SavedMatch.container" ) ).toBeTruthy( );
+      expect( screen.queryByTestId( "ObsDetails.container" ) ).toBeFalsy( );
+    } );
+  } );
+
+  describe( "when showSavedMatch is false", ( ) => {
+    it( "renders ObsDetailsDefaultModeContainer when observation is synced", ( ) => {
+      const syncedLocalObservation = {
+        ...mockLocalObservation,
+        wasSynced: jest.fn( () => true )
+      };
+
+      useLocalObservation.default.mockReturnValue( {
+        localObservation: syncedLocalObservation,
+        markDeletedLocally: jest.fn( ),
+        markViewedLocally: jest.fn( )
+      } );
+
+      renderComponent( <ObsDetailsDefaultModeScreensWrapper /> );
+
+      expect( screen.getByTestId( "ObsDetails.container" ) ).toBeTruthy( );
+      expect( screen.queryByTestId( "SavedMatch.container" ) ).toBeFalsy( );
+    } );
+
+    it(
+      "renders ObsDetailsDefaultModeContainer when observation does not belong to current user",
+      ( ) => {
+        const otherUserObservation = factory( "LocalObservation", {
+          user: factory( "LocalUser", {
+            id: 456
+          } ),
+          uuid: "test-123",
+          wasSynced: jest.fn( () => false )
+        } );
+
+        useLocalObservation.default.mockReturnValue( {
+          localObservation: otherUserObservation,
+          markDeletedLocally: jest.fn( ),
+          markViewedLocally: jest.fn( )
+        } );
+
+        renderComponent( <ObsDetailsDefaultModeScreensWrapper /> );
+
+        expect( screen.getByTestId( "ObsDetails.container" ) ).toBeTruthy( );
+        expect( screen.queryByTestId( "SavedMatch.container" ) ).toBeFalsy( );
+      }
+    );
+  } );
+} );

From 9575fd2d6cd10a883189c0c6af65e4fd07e5e90b Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Thu, 4 Dec 2025 10:19:52 -0600
Subject: [PATCH 26/35] MOB-512 hide saved match taxon photos when without an
 internet connection

---
 src/components/Match/PhotosSection.js         | 64 ++++++++++---------
 .../SavedMatch/SavedMatch.tsx                 |  1 +
 .../SavedMatch/SavedMatchContainer.tsx        | 13 +---
 3 files changed, 38 insertions(+), 40 deletions(-)

diff --git a/src/components/Match/PhotosSection.js b/src/components/Match/PhotosSection.js
index 6fb031080..a0cdba8f5 100644
--- a/src/components/Match/PhotosSection.js
+++ b/src/components/Match/PhotosSection.js
@@ -15,14 +15,16 @@ type Props = {
   representativePhoto?: Object,
   taxon: Object,
   obsPhotos: Array<Object>,
-  navToTaxonDetails: ( photo: Object ) => void
+  navToTaxonDetails: ( photo: Object ) => void,
+  hideTaxonPhotos?: boolean
 }
 
 const PhotosSection = ( {
   representativePhoto,
   taxon,
   obsPhotos,
-  navToTaxonDetails
+  navToTaxonDetails,
+  hideTaxonPhotos
 }: Props ) => {
   const [displayPortraitLayout, setDisplayPortraitLayout] = useState( null );
   const [mediaViewerVisible, setMediaViewerVisible] = useState( false );
@@ -86,34 +88,36 @@ const PhotosSection = ( {
     let observationPhotoClass = "w-full h-full";
     let taxonPhotosContainerClass;
     let taxonPhotoClass;
-    // If there is only one taxon photo: obs photo a square,
-    // taxon photo a square in the lower right corner of the obs photo
-    if ( bestTaxonPhotos.length === 1 ) {
-      containerClass = "flex-row relative";
-      observationPhotoClass = "w-full h-full";
-      taxonPhotosContainerClass = "absolute bottom-0 right-0 w-1/3 h-1/3";
-      taxonPhotoClass = "w-full h-full border-l-[3px] border-t-[3px] border-white";
-    }
-    if ( bestTaxonPhotos.length > 1 ) {
-      if ( displayPortraitLayout ) {
-        containerClass = "flex-row";
-        observationPhotoClass = "w-2/3 h-full pr-[3px]";
-        if ( bestTaxonPhotos.length === 2 ) {
-          taxonPhotosContainerClass = "flex-col w-1/3 h-full space-y-[3px]";
-          taxonPhotoClass = "w-full h-1/2";
+    if ( !hideTaxonPhotos ) {
+      // If there is only one taxon photo: obs photo a square,
+      // taxon photo a square in the lower right corner of the obs photo
+      if ( bestTaxonPhotos.length === 1 ) {
+        containerClass = "flex-row relative";
+        observationPhotoClass = "w-full h-full";
+        taxonPhotosContainerClass = "absolute bottom-0 right-0 w-1/3 h-1/3";
+        taxonPhotoClass = "w-full h-full border-l-[3px] border-t-[3px] border-white";
+      }
+      if ( bestTaxonPhotos.length > 1 ) {
+        if ( displayPortraitLayout ) {
+          containerClass = "flex-row";
+          observationPhotoClass = "w-2/3 h-full pr-[3px]";
+          if ( bestTaxonPhotos.length === 2 ) {
+            taxonPhotosContainerClass = "flex-col w-1/3 h-full space-y-[3px]";
+            taxonPhotoClass = "w-full h-1/2";
+          } else {
+            taxonPhotosContainerClass = "flex-col w-1/3 h-full space-y-[3px]";
+            taxonPhotoClass = "w-full h-1/3";
+          }
         } else {
-          taxonPhotosContainerClass = "flex-col w-1/3 h-full space-y-[3px]";
-          taxonPhotoClass = "w-full h-1/3";
-        }
-      } else {
-        containerClass = "flex-col";
-        observationPhotoClass = "w-full h-2/3 pb-[3px]";
-        if ( bestTaxonPhotos.length === 2 ) {
-          taxonPhotosContainerClass = "flex-row w-full h-1/3 space-x-[3px]";
-          taxonPhotoClass = "w-1/2 h-full";
-        } else {
-          taxonPhotosContainerClass = "flex-row w-full h-1/3 space-x-[3px]";
-          taxonPhotoClass = "w-1/3 h-full";
+          containerClass = "flex-col";
+          observationPhotoClass = "w-full h-2/3 pb-[3px]";
+          if ( bestTaxonPhotos.length === 2 ) {
+            taxonPhotosContainerClass = "flex-row w-full h-1/3 space-x-[3px]";
+            taxonPhotoClass = "w-1/2 h-full";
+          } else {
+            taxonPhotosContainerClass = "flex-row w-full h-1/3 space-x-[3px]";
+            taxonPhotoClass = "w-1/3 h-full";
+          }
         }
       }
     }
@@ -191,7 +195,7 @@ const PhotosSection = ( {
   return (
     <View className={classnames( "h-[390px] overflow-hidden", layoutClasses.containerClass )}>
       {renderObservationPhoto( )}
-      {bestTaxonPhotos.length > 0 && renderTaxonPhotos( )}
+      {!hideTaxonPhotos && bestTaxonPhotos.length > 0 && renderTaxonPhotos( )}
       <MediaViewerModal
         showModal={mediaViewerVisible}
         onClose={( ) => setMediaViewerVisible( false )}
diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
index affdf58db..1421a93ee 100644
--- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
@@ -38,6 +38,7 @@ const SavedMatch = ( {
         taxon={taxon}
         obsPhotos={observation.observationPhotos}
         navToTaxonDetails={navToTaxonDetails}
+        hideTaxonPhotos={!isConnected}
       />
       <View className="border-[1.5px] border-white" />
       {latitude && (
diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
index 90d5c2027..600f7c1e4 100644
--- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
@@ -9,18 +9,11 @@ interface Props {
   observation: RealmObservation,
 }
 
-const SavedMatchContainer = ( {
-  observation
-}: Props ) => {
+const SavedMatchContainer = ( { observation }: Props ) => {
   const navigation = useNavigation<NativeStackNavigationProp<Record<string, { id?: number }>>>( );
 
-  const navToTaxonDetails
-  = () => {
-    const navParams: {
-        id?: number;
-        firstPhotoID?: number;
-        representativePhoto?: unknown;
-    } = { id: observation.taxon?.id };
+  const navToTaxonDetails = () => {
+    const navParams = { id: observation.taxon?.id };
     navigation.push( "TaxonDetails", navParams );
   };
 

From ff4537dd6276a05f2baa11f890541555742475e4 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Thu, 4 Dec 2025 20:33:04 -0600
Subject: [PATCH 27/35] MOB-512 first pass SavedMatch integraton

---
 tests/integration/SavedMatch.test.js | 104 +++++++++++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 tests/integration/SavedMatch.test.js

diff --git a/tests/integration/SavedMatch.test.js b/tests/integration/SavedMatch.test.js
new file mode 100644
index 000000000..76ddac2fc
--- /dev/null
+++ b/tests/integration/SavedMatch.test.js
@@ -0,0 +1,104 @@
+import { useNetInfo } from "@react-native-community/netinfo";
+import { act, screen, userEvent } from "@testing-library/react-native";
+import SavedMatchContainer from "components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer";
+import { t } from "i18next";
+import React from "react";
+import factory from "tests/factory";
+import faker from "tests/helpers/faker";
+import { renderAppWithComponent } from "tests/helpers/render";
+import setupUniqueRealm from "tests/helpers/uniqueRealm";
+import { describe } from "yargs";
+
+// UNIQUE REALM SETUP
+const mockRealmIdentifier = __filename;
+const { mockRealmModelsIndex, uniqueRealmBeforeAll, uniqueRealmAfterAll } = setupUniqueRealm(
+  mockRealmIdentifier
+);
+jest.mock( "realmModels/index", ( ) => mockRealmModelsIndex );
+jest.mock( "providers/contexts", ( ) => {
+  const originalModule = jest.requireActual( "providers/contexts" );
+  return {
+    __esModule: true,
+    ...originalModule,
+    RealmContext: {
+      ...originalModule.RealmContext,
+      useRealm: ( ) => global.mockRealms[mockRealmIdentifier],
+      useQuery: ( ) => []
+    }
+  };
+} );
+beforeAll( uniqueRealmBeforeAll );
+afterAll( uniqueRealmAfterAll );
+// /UNIQUE REALM SETUP
+
+const mockObservation = factory( "LocalObservation", {
+  _created_at: faker.date.past( ),
+  created_at: "2022-11-27T19:07:41-08:00",
+  time_observed_at: "2023-12-14T21:07:41-09:30",
+  observationPhotos: [
+    factory( "LocalObservationPhoto", {
+      photo: {
+        id: faker.number.int( ),
+        attribution: faker.lorem.sentence( ),
+        licenseCode: "cc-by-nc",
+        url: faker.image.url( )
+      }
+    } )
+  ],
+  taxon: factory( "LocalTaxon", {
+    name: faker.person.firstName( ),
+    rank: "species",
+    rank_level: 10,
+    preferred_common_name: faker.person.fullName( ),
+    defaultPhoto: {
+      id: faker.number.int( ),
+      attribution: faker.lorem.sentence( ),
+      licenseCode: "cc-by-nc",
+      url: faker.image.url( )
+    }
+  } ),
+  user: factory( "LocalUser", {
+    login: faker.internet.userName( ),
+    iconUrl: faker.image.url( ),
+    locale: "en"
+  } ),
+  identifications: []
+} );
+
+const mockPush = jest.fn();
+jest.mock( "@react-navigation/native", () => {
+  const actualNav = jest.requireActual( "@react-navigation/native" );
+  return {
+    ...actualNav,
+    useNavigation: () => ( {
+      push: mockPush,
+      setOptions: jest.fn()
+    } )
+  };
+} );
+
+/*
+  beforeEach( async ( ) => {
+    jest.clearAllMocks( );
+  } ); */
+
+describe( "SavedMatch", ( ) => {
+  describe( "SavedMatch goto taxon", ( ) => {
+    it( "should call navigation.push on learn more button press", async ( ) => {
+      const actor = userEvent.setup( );
+      renderAppWithComponent( <SavedMatchContainer observation={mockObservation} /> );
+      const learnMoreButton = await screen.findByText( t( "LEARN-MORE-ABOUT-THIS-SPECIES" ) );
+      await act( async ( ) => actor.press( learnMoreButton ) );
+      expect( mockPush ).toHaveBeenCalledWith( "TaxonDetails", {
+        id: mockObservation.taxon.id
+      } );
+    } );
+
+    it( "should not show learn more button when offline", async ( ) => {
+      useNetInfo.mockImplementation( ( ) => ( { isConnected: false } ) );
+      renderAppWithComponent( <SavedMatchContainer observation={mockObservation} /> );
+      const learnMoreButton = screen.queryByText( t( "LEARN-MORE-ABOUT-THIS-SPECIES" ) );
+      expect( learnMoreButton ).toBeFalsy( );
+    } );
+  } );
+} );

From 6c839f9036eb3b322d55f1e30443dd76d7a64aab Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Thu, 4 Dec 2025 20:40:17 -0600
Subject: [PATCH 28/35] MOB-512 rm silly import

---
 tests/integration/SavedMatch.test.js | 36 +++++++++++++---------------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/tests/integration/SavedMatch.test.js b/tests/integration/SavedMatch.test.js
index 76ddac2fc..71e9e5236 100644
--- a/tests/integration/SavedMatch.test.js
+++ b/tests/integration/SavedMatch.test.js
@@ -7,7 +7,6 @@ import factory from "tests/factory";
 import faker from "tests/helpers/faker";
 import { renderAppWithComponent } from "tests/helpers/render";
 import setupUniqueRealm from "tests/helpers/uniqueRealm";
-import { describe } from "yargs";
 
 // UNIQUE REALM SETUP
 const mockRealmIdentifier = __filename;
@@ -77,28 +76,25 @@ jest.mock( "@react-navigation/native", () => {
   };
 } );
 
-/*
+describe( "SavedMatch", ( ) => {
   beforeEach( async ( ) => {
     jest.clearAllMocks( );
-  } ); */
+  } );
 
-describe( "SavedMatch", ( ) => {
-  describe( "SavedMatch goto taxon", ( ) => {
-    it( "should call navigation.push on learn more button press", async ( ) => {
-      const actor = userEvent.setup( );
-      renderAppWithComponent( <SavedMatchContainer observation={mockObservation} /> );
-      const learnMoreButton = await screen.findByText( t( "LEARN-MORE-ABOUT-THIS-SPECIES" ) );
-      await act( async ( ) => actor.press( learnMoreButton ) );
-      expect( mockPush ).toHaveBeenCalledWith( "TaxonDetails", {
-        id: mockObservation.taxon.id
-      } );
-    } );
-
-    it( "should not show learn more button when offline", async ( ) => {
-      useNetInfo.mockImplementation( ( ) => ( { isConnected: false } ) );
-      renderAppWithComponent( <SavedMatchContainer observation={mockObservation} /> );
-      const learnMoreButton = screen.queryByText( t( "LEARN-MORE-ABOUT-THIS-SPECIES" ) );
-      expect( learnMoreButton ).toBeFalsy( );
+  it( "should call navigation.push on learn more button press", async ( ) => {
+    const actor = userEvent.setup( );
+    renderAppWithComponent( <SavedMatchContainer observation={mockObservation} /> );
+    const learnMoreButton = await screen.findByText( t( "LEARN-MORE-ABOUT-THIS-SPECIES" ) );
+    await act( async ( ) => actor.press( learnMoreButton ) );
+    expect( mockPush ).toHaveBeenCalledWith( "TaxonDetails", {
+      id: mockObservation.taxon.id
     } );
   } );
+
+  it( "should not show learn more button when offline", async ( ) => {
+    useNetInfo.mockImplementation( ( ) => ( { isConnected: false } ) );
+    renderAppWithComponent( <SavedMatchContainer observation={mockObservation} /> );
+    const learnMoreButton = screen.queryByText( t( "LEARN-MORE-ABOUT-THIS-SPECIES" ) );
+    expect( learnMoreButton ).toBeFalsy( );
+  } );
 } );

From f0e29b0440bf14fe9f30298998761a7cfebc44b1 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Thu, 4 Dec 2025 21:04:30 -0600
Subject: [PATCH 29/35] MOB-512 add map section tests

---
 src/components/ObsDetailsDefaultMode/MapSection/MapSection.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ObsDetailsDefaultMode/MapSection/MapSection.js b/src/components/ObsDetailsDefaultMode/MapSection/MapSection.js
index 0dd14907b..0b64bb04e 100644
--- a/src/components/ObsDetailsDefaultMode/MapSection/MapSection.js
+++ b/src/components/ObsDetailsDefaultMode/MapSection/MapSection.js
@@ -63,7 +63,7 @@ const MapSection = ( { observation, taxon }: Props ) => {
   }
 
   return (
-    <View className="h-[200px]">
+    <View testID="MapSection" className="h-[200px]">
       <Map
         mapHeight={200}
         observation={observation}

From 998f21a12121c33f192f262aac5c19a7db10a2e7 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Thu, 4 Dec 2025 21:23:13 -0600
Subject: [PATCH 30/35] MOB-512 add map section tests

---
 tests/integration/SavedMatch.test.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/tests/integration/SavedMatch.test.js b/tests/integration/SavedMatch.test.js
index 71e9e5236..4b9ae5676 100644
--- a/tests/integration/SavedMatch.test.js
+++ b/tests/integration/SavedMatch.test.js
@@ -97,4 +97,20 @@ describe( "SavedMatch", ( ) => {
     const learnMoreButton = screen.queryByText( t( "LEARN-MORE-ABOUT-THIS-SPECIES" ) );
     expect( learnMoreButton ).toBeFalsy( );
   } );
+
+  it( "should not show map section for no latitude", async ( ) => {
+    renderAppWithComponent( <SavedMatchContainer observation={mockObservation} /> );
+    const mapSection = screen.queryByTestId( "MapSection" );
+    expect( mapSection ).toBeFalsy( );
+  } );
+
+  const mockObservationWithLatitude = factory( "LocalObservation", {
+    latitude: faker.location.latitude( )
+  } );
+
+  it( "should show map section when latitude is present", async ( ) => {
+    renderAppWithComponent( <SavedMatchContainer observation={mockObservationWithLatitude} /> );
+    const mapSection = screen.queryByTestId( "MapSection" );
+    expect( mapSection ).toBeTruthy( );
+  } );
 } );

From 9cd212cd186a10acfae45397a40a44a0ee8ab48c Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Thu, 4 Dec 2025 21:35:57 -0600
Subject: [PATCH 31/35] MOB-512 fix type import

---
 .../ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
index 600f7c1e4..b055b0a83 100644
--- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
@@ -1,5 +1,5 @@
 import { useNavigation } from "@react-navigation/native";
-import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import SavedMatch from "components/ObsDetailsDefaultMode/SavedMatch/SavedMatch";
 import _ from "lodash";
 import React from "react";

From b5d362cbc549d4cfe1aa5cbf7dba8f83b7d3d41b Mon Sep 17 00:00:00 2001
From: Johannes Klein <johannes.t.klein@gmail.com>
Date: Fri, 5 Dec 2025 18:31:08 +0100
Subject: [PATCH 32/35] Missing flow directive

---
 src/components/Match/PhotosSection.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Match/PhotosSection.js b/src/components/Match/PhotosSection.js
index a0cdba8f5..4ce61b4f8 100644
--- a/src/components/Match/PhotosSection.js
+++ b/src/components/Match/PhotosSection.js
@@ -1,3 +1,5 @@
+// @flow
+
 import classnames from "classnames";
 import MediaViewerModal from "components/MediaViewer/MediaViewerModal";
 import {
@@ -7,6 +9,7 @@ import {
   Image, Pressable, View
 } from "components/styledComponents";
 import _, { compact } from "lodash";
+import type { Node } from "react";
 import React, { useEffect, useState } from "react";
 import Photo from "realmModels/Photo";
 import getImageDimensions from "sharedHelpers/getImageDimensions";
@@ -25,7 +28,7 @@ const PhotosSection = ( {
   obsPhotos,
   navToTaxonDetails,
   hideTaxonPhotos
-}: Props ) => {
+}: Props ): Node => {
   const [displayPortraitLayout, setDisplayPortraitLayout] = useState( null );
   const [mediaViewerVisible, setMediaViewerVisible] = useState( false );
 

From f1eba8d7c80fafd6e2894100aa1452e58992c8a9 Mon Sep 17 00:00:00 2001
From: Johannes Klein <johannes.t.klein@gmail.com>
Date: Fri, 5 Dec 2025 18:31:57 +0100
Subject: [PATCH 33/35] Remove TODO

---
 .../ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx
index 6dd80b44d..d99040d3b 100644
--- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx
@@ -25,7 +25,6 @@ const SavedMatchHeaderRight = ( {
     ( ) => (
       <INatIconButton
         testID="SavedMatch.editButton"
-        // TODO remove cast when useLocalObservation converted to typescript
         onPress={() => navigateToObsEdit( observation )}
         icon="pencil"
         color={String( colors?.darkGray )}

From 2a51f5ad9c41f56696ea96af66a2b1e2fe6863f3 Mon Sep 17 00:00:00 2001
From: Johannes Klein <johannes.t.klein@gmail.com>
Date: Sun, 7 Dec 2025 21:39:00 +0100
Subject: [PATCH 34/35] Add a unit test for when taxon is undefined

---
 tests/unit/components/DisplayTaxonName.test.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/tests/unit/components/DisplayTaxonName.test.js b/tests/unit/components/DisplayTaxonName.test.js
index 9c12ce97f..4bd9e45e0 100644
--- a/tests/unit/components/DisplayTaxonName.test.js
+++ b/tests/unit/components/DisplayTaxonName.test.js
@@ -275,6 +275,14 @@ describe( "DisplayTaxonName", ( ) => {
     } );
   } );
 
+  describe( "when taxon is undefined", ( ) => {
+    it( "it displays fallback text", ( ) => {
+      let taxon;
+      render( <DisplayTaxonName taxon={taxon} /> );
+      expect( screen.getByText( /Unknown/ ) ).toBeTruthy( );
+    } );
+  } );
+
   describe( "when displayed as plain text within a Trans component", ( ) => {
     it( "it displays common name followed by scientific name", async ( ) => {
       render( <DisplayTaxonName taxon={subspeciesTaxon} removeStyling layout="horizontal" /> );

From 0d42eab08ad157f6f70e57407fa9b6c2ef7cfd18 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Mon, 8 Dec 2025 18:10:32 -0600
Subject: [PATCH 35/35] MOB-512 edit tests to rm unnecessary code, make
 consistent with greater test suite, and rm out of scope test

---
 tests/integration/SavedMatch.test.js          | 12 +---
 ...bsDetailsDefaultModeScreensWrapper.test.js | 70 +++++++------------
 2 files changed, 28 insertions(+), 54 deletions(-)

diff --git a/tests/integration/SavedMatch.test.js b/tests/integration/SavedMatch.test.js
index 4b9ae5676..001b541bb 100644
--- a/tests/integration/SavedMatch.test.js
+++ b/tests/integration/SavedMatch.test.js
@@ -1,5 +1,5 @@
 import { useNetInfo } from "@react-native-community/netinfo";
-import { act, screen, userEvent } from "@testing-library/react-native";
+import { screen } from "@testing-library/react-native";
 import SavedMatchContainer from "components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer";
 import { t } from "i18next";
 import React from "react";
@@ -81,16 +81,6 @@ describe( "SavedMatch", ( ) => {
     jest.clearAllMocks( );
   } );
 
-  it( "should call navigation.push on learn more button press", async ( ) => {
-    const actor = userEvent.setup( );
-    renderAppWithComponent( <SavedMatchContainer observation={mockObservation} /> );
-    const learnMoreButton = await screen.findByText( t( "LEARN-MORE-ABOUT-THIS-SPECIES" ) );
-    await act( async ( ) => actor.press( learnMoreButton ) );
-    expect( mockPush ).toHaveBeenCalledWith( "TaxonDetails", {
-      id: mockObservation.taxon.id
-    } );
-  } );
-
   it( "should not show learn more button when offline", async ( ) => {
     useNetInfo.mockImplementation( ( ) => ( { isConnected: false } ) );
     renderAppWithComponent( <SavedMatchContainer observation={mockObservation} /> );
diff --git a/tests/unit/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.test.js b/tests/unit/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.test.js
index b8f8af49b..e60090504 100644
--- a/tests/unit/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.test.js
+++ b/tests/unit/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.test.js
@@ -1,11 +1,8 @@
-import { useRoute } from "@react-navigation/native";
 import { screen } from "@testing-library/react-native";
 import ObsDetailsDefaultModeScreensWrapper
   from "components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper";
 import React from "react";
-import * as useCurrentUser from "sharedHooks/useCurrentUser";
 import * as useLocalObservation from "sharedHooks/useLocalObservation";
-import * as useRemoteObservation from "sharedHooks/useRemoteObservation";
 import factory from "tests/factory";
 import faker from "tests/helpers/faker";
 import { renderComponent } from "tests/helpers/render";
@@ -22,45 +19,32 @@ const mockLocalObservation = factory( "LocalObservation", {
   uuid: "test-123"
 } );
 
-const mockParams = {
-  uuid: "test-123"
-};
-
 jest.mock( "@react-native-community/netinfo", () => ( {
   useNetInfo: () => ( { isConnected: true } ),
   configure: jest.fn( )
 } ) );
 
-jest.mock( "sharedHooks/useCurrentUser", () => jest.fn() );
-jest.mock( "sharedHooks/useLocalObservation", () => jest.fn() );
-jest.mock( "sharedHooks/useRemoteObservation", () => jest.fn() );
+jest.mock( "sharedHooks/useCurrentUser", () => ( {
+  __esModule: true,
+  default: () => mockCurrentUser
+} ) );
+jest.mock( "sharedHooks/useLocalObservation", () => ( {
+  __esModule: true,
+  default: jest.fn( () => ( {
+    localObservation: null
+  } ) )
+} ) );
+jest.mock( "sharedHooks/useRemoteObservation", ( ) => ( {
+  __esModule: true,
+  default: ( _uuid, _fetchRemoteEnabled ) => ( {
+    remoteObservation: null,
+    refetchRemoteObservation: jest.fn( ),
+    isRefetching: false,
+    fetchRemoteObservationError: null
+  } )
+} ) );
 
 describe( "ObsDetailsDefaultModeScreensWrapper", ( ) => {
-  beforeEach( ( ) => {
-    useRoute.mockReturnValue( {
-      params: mockParams
-    } );
-
-    useCurrentUser.mockReturnValue( mockCurrentUser );
-
-    useLocalObservation.mockReturnValue( {
-      localObservation: null,
-      markDeletedLocally: jest.fn( ),
-      markViewedLocally: jest.fn( )
-    } );
-
-    useRemoteObservation.mockReturnValue( {
-      remoteObservation: null,
-      refetchRemoteObservation: jest.fn( ),
-      isRefetching: false,
-      fetchRemoteObservationError: null
-    } );
-  } );
-
-  afterEach( ( ) => {
-    jest.clearAllMocks( );
-  } );
-
   describe( "when showSavedMatch is true", ( ) => {
     it(
       "renders SavedMatchContainer when observation belongs to current user and is not synced",
@@ -70,11 +54,11 @@ describe( "ObsDetailsDefaultModeScreensWrapper", ( ) => {
           wasSynced: jest.fn( () => false )
         };
 
-        useLocalObservation.default.mockReturnValue( {
+        jest.spyOn( useLocalObservation, "default" ).mockImplementation( () => ( {
           localObservation: unsyncedLocalObservation,
           markDeletedLocally: jest.fn( ),
           markViewedLocally: jest.fn( )
-        } );
+        } ) );
 
         renderComponent( <ObsDetailsDefaultModeScreensWrapper /> );
 
@@ -90,11 +74,11 @@ describe( "ObsDetailsDefaultModeScreensWrapper", ( ) => {
         wasSynced: jest.fn( () => false )
       } );
 
-      useLocalObservation.default.mockReturnValue( {
+      jest.spyOn( useLocalObservation, "default" ).mockImplementation( () => ( {
         localObservation: unsyncedLocalObservationNoUser,
         markDeletedLocally: jest.fn( ),
         markViewedLocally: jest.fn( )
-      } );
+      } ) );
 
       renderComponent( <ObsDetailsDefaultModeScreensWrapper /> );
 
@@ -110,11 +94,11 @@ describe( "ObsDetailsDefaultModeScreensWrapper", ( ) => {
         wasSynced: jest.fn( () => true )
       };
 
-      useLocalObservation.default.mockReturnValue( {
+      jest.spyOn( useLocalObservation, "default" ).mockImplementation( () => ( {
         localObservation: syncedLocalObservation,
         markDeletedLocally: jest.fn( ),
         markViewedLocally: jest.fn( )
-      } );
+      } ) );
 
       renderComponent( <ObsDetailsDefaultModeScreensWrapper /> );
 
@@ -133,11 +117,11 @@ describe( "ObsDetailsDefaultModeScreensWrapper", ( ) => {
           wasSynced: jest.fn( () => false )
         } );
 
-        useLocalObservation.default.mockReturnValue( {
+        jest.spyOn( useLocalObservation, "default" ).mockImplementation( () => ( {
           localObservation: otherUserObservation,
           markDeletedLocally: jest.fn( ),
           markViewedLocally: jest.fn( )
-        } );
+        } ) );
 
         renderComponent( <ObsDetailsDefaultModeScreensWrapper /> );