MOB-752 - use FasterImageView for caching obs/taxon/project images (#2887)

src/components/ObservationsFlashList/ObsImage.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import { IconicTaxonIcon } from "components/SharedComponents";
-import { Image, View } from "components/styledComponents";
+import { FasterImageView, View } from "components/styledComponents";
 import React from "react";
 
 interface Props {
@@ -48,12 +48,16 @@ const ObsImage = ( {
       />
     </View>
     { uri?.uri && (
-      <Image
-        source={uri}
+      <FasterImageView
         className={classNames( CLASS_NAMES )}
         testID="ObsList.photo"
         accessibilityIgnoresInvertColors
         fadeDuration={0}
+        source={{
+          url: uri.uri,
+          cachePolicy: "discWithCacheControl",
+          resizeMode: "cover"
+        }}
       />
     ) }
     { opaque && (

src/components/ProjectList/ProjectListItem.tsx

@@ -6,7 +6,7 @@ import {
   INatIcon,
   List2
 } from "components/SharedComponents";
-import { Image, View } from "components/styledComponents";
+import { FasterImageView, View } from "components/styledComponents";
 import React from "react";
 import { useTranslation } from "sharedHooks";
 import colors from "styles/tailwindColors";
@@ -55,12 +55,16 @@ const ProjectListItem = ( { item, isHeader = false }: Props ) => {
       );
     }
     return (
-      <Image
+      <FasterImageView
         className={
           classnames( iconClassName )
         }
-        source={{ uri: productionIcon }}
-        testID={`Project.${item.id}.photo`}
+        source={{
+          url: productionIcon,
+          cachePolicy: "discWithCacheControl",
+          resizeMode: "cover"
+        }}
+        testID={`Project.${item?.id}.photo`}
         accessibilityIgnoresInvertColors
       />
     );

tests/unit/components/Camera/AICamera.test.js

@@ -113,9 +113,9 @@ describe( "AI Camera", ( ) => {
 
     const taxonPhoto = screen.getByTestId( "ObsList.photo" );
 
-    expect( taxonPhoto.props.source ).toStrictEqual(
+    expect( taxonPhoto.props.source ).toMatchObject(
       {
-        uri: mockLocalTaxon.default_photo.url
+        url: mockLocalTaxon.default_photo.url
       }
     );
   } );

tests/unit/components/Projects/Projects.test.js

@@ -93,7 +93,7 @@ describe( "Projects", ( ) => {
 
     expect( screen.getByText( mockProject.title ) ).toBeTruthy( );
     expect( screen.getByTestId( `Project.${mockProject.id}.photo` ).props.source )
-      .toStrictEqual( { uri: mockProject.icon } );
+      .toMatchObject( { url: mockProject.icon } );
     fireEvent.press( screen.getByTestId( `Project.${mockProject.id}` ) );
     expect( mockedNavigate ).toHaveBeenCalledWith( "ProjectDetails", {
       id: mockProject.id

tests/unit/components/SharedComponents/ObservationsFlashList/__snapshots__/ObsGridItem.test.js.snap

@@ -121,12 +121,14 @@ exports[`ObsGridItem for an observation with a photo should render 1`] = `
         </Text>
       </View>
     </View>
-    <Image
+    <FasterImageView
       accessibilityIgnoresInvertColors={true}
       fadeDuration={0}
       source={
         {
-          "uri": "https://inaturalist-open-data.s3.amazonaws.com/photos/1/large.jpeg",
+          "cachePolicy": "discWithCacheControl",
+          "resizeMode": "cover",
+          "url": "https://inaturalist-open-data.s3.amazonaws.com/photos/1/large.jpeg",
         }
       }
       style={