modal transition

src/screens/Playbacks/components/CommentsPanel.web.js

@@ -1,5 +1,4 @@
 import { BlurView } from "expo-blur";
-import { Image as ExpoImage } from "expo-image";
 import moment from "moment";
 import "moment/locale/fr";
 import React, {
@@ -30,7 +29,7 @@ import { useUser } from "../../../providers/UserDataProvider";
 import { getArtistDisplayName } from "../../../utils/artistName";
 import { Palette } from "../../../styles";
 import { FONT_FAMILY } from "../../../styles/Fonts";
-import { size } from "../../../styles/Style";
+import ProfilePicture from "../../../components/ProfilePicture";
 
 moment.locale("fr");
 
@@ -198,18 +197,11 @@ const CommentsPanel = ({
                   index > 0 && styles.commentRowSpacing,
                 ]}
               >
-                {c?.profilePicture ? (
-                  <ExpoImage
-                    source={{ uri: c.profilePicture }}
-                    cachePolicy="memory-disk"
-                    priority="high"
-                    contentFit="cover"
-                    transition={100}
-                    style={styles.commentAvatar}
-                  />
-                ) : (
-                  <View style={styles.commentAvatarFallback} />
-                )}
+                <ProfilePicture
+                  uri={c?.profilePicture || null}
+                  size={48}
+                  style={styles.commentAvatar}
+                />
                 <View style={styles.commentBubble}>
                   <View style={styles.commentHeader}>
                     <Text style={styles.commentAuthor}>
@@ -315,14 +307,6 @@ const styles = StyleSheet.create({
     marginTop: 16,
   },
   commentAvatar: {
-    ...size({ size: 48 }),
-    borderRadius: 100,
-    marginRight: 12,
-  },
-  commentAvatarFallback: {
-    ...size({ size: 48 }),
-    borderRadius: 100,
-    backgroundColor: "#FFFFFF33",
     marginRight: 12,
   },
   commentBubble: {