modal transition

src/screens/Playbacks/Playbacks.js

@@ -14,6 +14,7 @@ import { responsiveHeight } from "react-native-responsive-dimensions";
 import { icons, img } from "../../assets";
 import { openComments } from "../../components/bottomsheets/CommentsBottomSheet";
 import KaraokeLyrics from "../../components/KaraokeLyrics";
+import ProfilePicture from "../../components/ProfilePicture";
 import {
   arrayRemove,
   arrayUnion,
@@ -213,23 +214,11 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
                 navigate(Routes.SingerProfile, { userId: item?.userId });
               }}
             >
-              {owner?.profilePictureURL ? (
-                <Image
-                  source={{ uri: owner.profilePictureURL }}
-                  style={{
-                    ...size({ size: 45 }),
-                    borderRadius: 100,
-                  }}
-                />
-              ) : (
-                <Image
-                  source={img.profile}
-                  style={{
-                    ...size({ size: 45 }),
-                    borderRadius: 100,
-                  }}
-                />
-              )}
+              <ProfilePicture
+                uri={owner?.profilePictureURL || null}
+                size={45}
+                imageProps={{ priority: "high" }}
+              />
             </Pressable>
             {owner?.id && currentUID && owner.id !== currentUID && (
               <Pressable

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: {