modal transition

src/screens/Library/components/SearchResultsList.js

@@ -1,14 +1,12 @@
-import { Image as ExpoImage } from "expo-image";
 import React, { useState } from "react";
 import { Pressable, ScrollView, Text, View } from "react-native";
-import { img } from "../../../assets";
 import MoreMenu from "../../../components/MoreMenu";
+import ProfilePicture from "../../../components/ProfilePicture";
 import useNavigateToMusicDetails from "../../../hooks/useNavigateToMusicDetails";
 import { Routes } from "../../../navigation";
 import { navigate } from "../../../navigation/NavigationService";
 import { Palette, Style } from "../../../styles";
 import { FONT_FAMILY } from "../../../styles/Fonts";
-import { size } from "../../../styles/Style";
 import { getArtistDisplayName } from "../../../utils/artistName";
 import CreateLyricsHeader from "../../Writing/components/CreateLyricsHeader";
 import MusicCard from "./MusicCard";
@@ -190,27 +188,15 @@ const SearchResultsList = ({
                         key={user.id}
                         onPress={() => handleProfilePress(user.id)}
                       >
-                        <ExpoImage
-                          source={
+                        <ProfilePicture
+                          uri={
                             user?.pictureUrl ||
                             user?.profilePictureURL ||
-                            user?.photoURL
-                              ? {
-                                  uri:
-                                    user?.pictureUrl ||
-                                    user?.profilePictureURL ||
-                                    user?.photoURL,
-                                }
-                              : img.profile
+                            user?.photoURL ||
+                            null
                           }
-                          cachePolicy="memory-disk"
-                          priority="high"
-                          contentFit="cover"
-                          transition={100}
-                          style={{
-                            ...size({ size: 60 }),
-                            borderRadius: 100,
-                          }}
+                          size={60}
+                          imageProps={{ priority: "high" }}
                         />
                         <Text
                           style={{