modal transition

src/screens/Profile/Profile.js

@@ -1,6 +1,5 @@
 import { useRoute } from "@react-navigation/native";
 import { BlurView } from "expo-blur";
-import { Image as ExpoImage } from "expo-image";
 import * as ImagePicker from "expo-image-picker";
 import React, { useEffect, useMemo, useState } from "react";
 import {
@@ -16,10 +15,11 @@ import {
 import { SheetManager } from "react-native-actions-sheet";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import { useGlobal } from "reactn";
-import { background, icons, img } from "../../assets";
+import { background, icons } from "../../assets";
 import BorderGradient from "../../components/BorderGradient/BorderGradient";
 import MoreMenu from "../../components/MoreMenu";
 import PressableScale from "../../components/PressableScale";
+import ProfilePicture from "../../components/ProfilePicture";
 import firebase, {
   projectsRef,
   serverTimestamp,
@@ -361,28 +361,14 @@ const Profile = () => {
 
             <View style={{ alignItems: "center" }}>
               <View style={styles.avatarWrapper}>
-                <ExpoImage
-                  source={
-                    (
-                      isSelf
-                        ? currentUserData?.profilePictureURL
-                        : userData?.profilePictureURL
-                    )
-                      ? {
-                          uri: isSelf
-                            ? currentUserData?.profilePictureURL
-                            : userData?.profilePictureURL,
-                        }
-                      : img.profile
+                <ProfilePicture
+                  uri={
+                    isSelf
+                      ? currentUserData?.profilePictureURL || null
+                      : userData?.profilePictureURL || null
                   }
-                  cachePolicy="memory-disk"
-                  priority="high"
-                  contentFit="cover"
-                  transition={100}
-                  style={{
-                    ...size({ size: 108 }),
-                    borderRadius: 100,
-                  }}
+                  size={108}
+                  imageProps={{ priority: "high" }}
                 />
                 {isSelf && (
                   <Pressable