More workarounds for invalidated Realm objects

I'm no wiser about why these started happening recently. These are basically
hacks.

src/components/ObsDetails/ActivityTab/ActivityHeader.js

@@ -44,6 +44,7 @@ const ActivityHeader = ( {
   const [showDeleteCommentSheet, setShowDeleteCommentSheet] = useState( false );
   const [showWithdrawIDSheet, setShowWithdrawIDSheet] = useState( false );
   const { user } = item;
+  const { vision, category } = user || {};
 
   const itemType = item.category
     ? "Identification"
@@ -57,13 +58,13 @@ const ActivityHeader = ( {
         </View>
       );
     }
-    if ( item.vision ) return <INatIcon name="sparkly-label" size={22} />;
+    if ( vision ) return <INatIcon name="sparkly-label" size={22} />;
     if ( flagged ) return <INatIcon name="flag" color={colors.warningYellow} size={22} />;
     return null;
   }, [
     flagged,
     idWithdrawn,
-    item
+    vision
   ] );
 
   const renderStatus = useCallback( () => {
@@ -81,10 +82,10 @@ const ActivityHeader = ( {
         </Body4>
       );
     }
-    if ( item.category ) {
+    if ( category ) {
       return (
         <Body4>
-          { t( `Category-${item.category}` )}
+          { t( `Category-${category}` )}
         </Body4>
       );
     }
@@ -92,9 +93,9 @@ const ActivityHeader = ( {
       <Body4 />
     );
   }, [
+    category,
     flagged,
-    idWithdrawn,
-    item
+    idWithdrawn
   ] );
 
   return (

src/components/ObsDetails/PhotoDisplayContainer.js

@@ -82,13 +82,24 @@ const PhotoDisplayContainer = ( {
     }
   }, [createFaveMutation, createUnfaveMutation, userFav, uuid] );
 
-  const observationPhotos = useMemo(
-    ( ) => observation?.observationPhotos || observation?.observation_photos || [],
-    [observation]
-  );
   const photos = useMemo(
-    ( ) => _.compact( Array.from( observationPhotos ).map( op => op.photo ) ),
-    [observationPhotos]
+    ( ) => _.compact(
+      Array.from(
+        observation?.observationPhotos || observation?.observation_photos || []
+      ).map(
+        // TODO replace this hack. Without this you get errors about the
+        // photo objects being invalidated down in PhotoScroll, but the
+        // questions remains, why are these objects getting invalidated in
+        // the first place? We are not deleting them, so what's happening
+        // to them and why?
+        op => (
+          op.photo.toJSON
+            ? op.photo.toJSON( )
+            : op.photo
+        )
+      )
+    ),
+    [observation]
   );
 
   return (

src/components/SharedComponents/PhotoScroll.js

@@ -13,7 +13,7 @@ type Props = {
 
 const CarouselImage = ( { item: photo } ) => {
   // check for local file path for unuploaded photos
-  const photoUrl = ( photo && photo.url )
+  const photoUrl = photo?.url
     ? photo.url.replace( "square", "large" )
     : photo.localFilePath;