MOB-512 add header edit icon for saved match

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>

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;