modal transition

src/screens/Profile/EditProfile.js

@@ -1,12 +1,12 @@
 import { BlurView } from "expo-blur";
-import { Image as ExpoImage } from "expo-image";
 import * as ImagePicker from "expo-image-picker";
 import React, { useEffect, useState } from "react";
 import { Platform, Pressable, Text, View } from "react-native";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import { useGlobal } from "reactn";
-import { background, img } from "../../assets";
+import { background } from "../../assets";
 import GradientButton from "../../components/GradientButton";
+import ProfilePicture from "../../components/ProfilePicture";
 import firebase, { serverTimestamp, usersRef } from "../../config/firebase";
 import { uploadFileToFirebase } from "../../helpers/uploadToFirebase";
 import { isWeb } from "../../hooks/useLayoutType";
@@ -15,7 +15,6 @@ import { goBack } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
 import { gutters, Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
-import { size } from "../../styles/Style";
 import EditInput from "./components/EditInput";
 
 const EditProfile = () => {
@@ -147,22 +146,10 @@ const EditProfile = () => {
           // }
         >
           <Pressable style={{ alignItems: "center" }} onPress={onChangePicture}>
-            <ExpoImage
-              source={
-                currentUserData?.profilePictureURL
-                  ? {
-                      uri: currentUserData?.profilePictureURL,
-                    }
-                  : img.profile
-              }
-              cachePolicy="memory-disk"
-              priority="high"
-              contentFit="cover"
-              transition={100}
-              style={{
-                ...size({ size: 108 }),
-                borderRadius: 100,
-              }}
+            <ProfilePicture
+              uri={currentUserData?.profilePictureURL || null}
+              size={108}
+              imageProps={{ priority: "high" }}
             />
             <Text
               style={{

src/screens/Profile/Follows.js

@@ -1,11 +1,9 @@
 import React, { useMemo, useState } from "react";
 import { Pressable, Text, View } from "react-native";
-import { Image as ExpoImage } from "expo-image";
 import Page from "../../layouts/Page";
-import { background, img } from "../../assets";
+import { background } from "../../assets";
 import { Palette, Style } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
-import { size } from "../../styles/Style";
 import { useUser } from "../../providers/UserDataProvider";
 import { usersRef } from "../../config/firebase";
 import useDataFromArrayId from "react-native-minuit/src/hooks/useDataFromArrayId";
@@ -14,6 +12,7 @@ import { Routes } from "../../navigation";
 import { useRoute } from "@react-navigation/native";
 import { navigate } from "../../navigation/NavigationService";
 import { getArtistDisplayName } from "../../utils/artistName";
+import ProfilePicture from "../../components/ProfilePicture";
 
 const Follows = () => {
   const { params } = useRoute();
@@ -92,17 +91,10 @@ const Follows = () => {
         style={{ gap: 14, ...Style.containerRow }}
         onPress={() => navigate(Routes.SingerProfile, { userId: user?.id })}
       >
-        <ExpoImage
-          source={
-            user?.profilePictureURL
-              ? { uri: user.profilePictureURL }
-              : img.profile
-          }
-          cachePolicy="memory-disk"
-          priority="high"
-          contentFit="cover"
-          transition={100}
-          style={{ ...size({ size: 60 }), borderRadius: 100 }}
+        <ProfilePicture
+          uri={user?.profilePictureURL || null}
+          size={60}
+          imageProps={{ priority: "high" }}
         />
         <Text
           style={{

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