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