Fix: Double border on user icon in Me tab (#3135)

* Use Image with nativewind styling instead of FasterImageView

* Update UserIcon.test.js.snap

* Update unit tests

src/components/SharedComponents/UserIcon.tsx

@@ -1,8 +1,8 @@
+import classNames from "classnames";
 import { INatIcon } from "components/SharedComponents";
-import { FasterImageView, View } from "components/styledComponents";
+import { Image, View } from "components/styledComponents";
 import React from "react";
 import type { ImageStyle } from "react-native";
-import colors from "styles/tailwindColors";
 
 interface Props {
   active?: boolean;
@@ -42,14 +42,9 @@ const UserIcon = ( {
   // but it works with style, might warrant further investigation or an issue in nativewind
   const style: ImageStyle = {
     width: size,
-    height: size,
-    overflow: "hidden"
-  };
-  const activeStyle: ImageStyle = {
-    borderColor: String( colors?.inatGreen ),
-    borderWidth: 3,
-    borderRadius: size / 2
+    height: size
   };
+
   return (
     uri
       ? (
@@ -58,20 +53,12 @@ const UserIcon = ( {
           accessibilityIgnoresInvertColors
           testID="UserIcon.photo"
         >
-          <FasterImageView
-            style={{
-              ...(
-                active
-                  ? activeStyle
-                  : {}
-              ),
-              ...style
-            }}
+          <Image
+            style={style}
             source={{
-              url: uri,
-              borderRadius: size / 2,
-              resizeMode: "cover"
+              uri
             }}
+            className={classNames( "rounded-full", active && "border-[3px] border-inatGreen" )}
           />
         </View>
       )

tests/unit/components/SharedComponents/UserIcon.test.js

@@ -44,6 +44,6 @@ describe( "UserIcon", () => {
     // eslint-disable-next-line testing-library/no-node-access
     expect( profilePicture.children[0] ).toBeTruthy();
     // eslint-disable-next-line testing-library/no-node-access
-    expect( profilePicture.children[0].props.source ).toHaveProperty( "url", mockUri );
+    expect( profilePicture.children[0].props.source ).toHaveProperty( "uri", mockUri );
   } );
 } );

tests/unit/components/SharedComponents/__snapshots__/UserIcon.test.js.snap

@@ -6,24 +6,38 @@ exports[`UserIcon displays active user image correctly 1`] = `
   accessibilityRole="image"
   testID="UserIcon.photo"
 >
-  <FasterImageView
+  <Image
     source={
       {
-        "borderRadius": 20,
-        "resizeMode": "cover",
-        "url": "https://loremflickr.com/640/480?lock=4455548378415104",
+        "uri": "https://loremflickr.com/640/480?lock=4455548378415104",
       }
     }
     style={
       [
-        {
-          "borderColor": "#74AC00",
-          "borderRadius": 20,
-          "borderWidth": 3,
-          "height": 40,
-          "overflow": "hidden",
-          "width": 40,
-        },
+        [
+          {
+            "borderBottomLeftRadius": 9999,
+            "borderBottomRightRadius": 9999,
+            "borderTopLeftRadius": 9999,
+            "borderTopRightRadius": 9999,
+          },
+          {
+            "borderBottomWidth": 3,
+            "borderLeftWidth": 3,
+            "borderRightWidth": 3,
+            "borderTopWidth": 3,
+          },
+          {
+            "borderBottomColor": "#74AC00",
+            "borderLeftColor": "#74AC00",
+            "borderRightColor": "#74AC00",
+            "borderTopColor": "#74AC00",
+          },
+          {
+            "height": 40,
+            "width": 40,
+          },
+        ],
       ]
     }
   />
@@ -36,21 +50,26 @@ exports[`UserIcon displays small user image correctly 1`] = `
   accessibilityRole="image"
   testID="UserIcon.photo"
 >
-  <FasterImageView
+  <Image
     source={
       {
-        "borderRadius": 11,
-        "resizeMode": "cover",
-        "url": "https://loremflickr.com/640/480?lock=4455548378415104",
+        "uri": "https://loremflickr.com/640/480?lock=4455548378415104",
       }
     }
     style={
       [
-        {
-          "height": 22,
-          "overflow": "hidden",
-          "width": 22,
-        },
+        [
+          {
+            "borderBottomLeftRadius": 9999,
+            "borderBottomRightRadius": 9999,
+            "borderTopLeftRadius": 9999,
+            "borderTopRightRadius": 9999,
+          },
+          {
+            "height": 22,
+            "width": 22,
+          },
+        ],
       ]
     }
   />
@@ -63,21 +82,26 @@ exports[`UserIcon displays user image correctly 1`] = `
   accessibilityRole="image"
   testID="UserIcon.photo"
 >
-  <FasterImageView
+  <Image
     source={
       {
-        "borderRadius": 20,
-        "resizeMode": "cover",
-        "url": "https://loremflickr.com/640/480?lock=4455548378415104",
+        "uri": "https://loremflickr.com/640/480?lock=4455548378415104",
       }
     }
     style={
       [
-        {
-          "height": 40,
-          "overflow": "hidden",
-          "width": 40,
-        },
+        [
+          {
+            "borderBottomLeftRadius": 9999,
+            "borderBottomRightRadius": 9999,
+            "borderTopLeftRadius": 9999,
+            "borderTopRightRadius": 9999,
+          },
+          {
+            "height": 40,
+            "width": 40,
+          },
+        ],
       ]
     }
   />

tests/unit/components/UserProfile/UserProfile.test.js

@@ -71,7 +71,7 @@ describe( "UserProfile", () => {
     const userIcon = screen.getByTestId( "UserIcon.photo" );
     expect( userIcon ).toBeTruthy( );
     // eslint-disable-next-line testing-library/no-node-access
-    expect( userIcon.children[0].props.source ).toHaveProperty( "url", mockUser.icon_url );
+    expect( userIcon.children[0].props.source ).toHaveProperty( "uri", mockUser.icon_url );
   } );
 
   test( "renders followers and following buttons", async () => {