diff --git a/.eslintrc.json b/.eslintrc.json
index 238c44545..a6d5382c0 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -20,6 +20,7 @@
         "ignoreDOMComponents": true
       }
     ],
+    "react/jsx-key": "error",
 
     "prettier/prettier": "off" // We use prettier manually on the side
   },
diff --git a/components/Avatar.tsx b/components/Avatar.tsx
index 1c7bcd223..e5eeb1147 100644
--- a/components/Avatar.tsx
+++ b/components/Avatar.tsx
@@ -1,8 +1,9 @@
 import { actionSecondaryColor, textSecondaryColor } from "@styles/colors";
 import { AvatarSizes } from "@styles/sizes";
+import { Image } from "expo-image";
+import { useCallback, useState } from "react";
 import {
   ColorSchemeName,
-  Image,
   ImageStyle,
   StyleProp,
   StyleSheet,
@@ -29,9 +30,20 @@ export default function Avatar({
   const colorScheme = useColorScheme();
   const styles = getStyles(colorScheme, size);
   const firstLetter = name ? name.charAt(0).toUpperCase() : "";
+  const [didError, setDidError] = useState(false);
 
-  return uri ? (
+  const handleImageError = useCallback(() => {
+    setDidError(true);
+  }, []);
+
+  const handleImageLoad = useCallback(() => {
+    setDidError(false);
+  }, []);
+
+  return uri && !didError ? (
     <Image
+      onLoad={handleImageLoad}
+      onError={handleImageError}
       key={`${uri}-${color}-${colorScheme}`}
       source={{ uri }}
       style={[styles.image, style]}