modal transition

src/components/bottomsheets/CommentsBottomSheet.js

@@ -6,7 +6,6 @@ import {
   BottomSheetTextInput,
 } from '@gorhom/bottom-sheet';
 import { BlurView } from 'expo-blur';
-import { Image as ExpoImage } from 'expo-image';
 import React, {
   useCallback,
   useEffect,
@@ -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 '../ProfilePicture';
 
 let externalOpen;
 let externalClose;
@@ -273,24 +272,7 @@ const CommentsBottomSheet = () => {
                   <View
                     key={c.id}
                     style={{ flexDirection: 'row', gap: 12, marginBottom: 14 }}>
-                    {c?.profilePicture ? (
-                      <ExpoImage
-                        source={{ uri: c.profilePicture }}
-                        cachePolicy='memory-disk'
-                        priority='high'
-                        contentFit='cover'
-                        transition={100}
-                        style={{ ...size({ size: 42 }), borderRadius: 100 }}
-                      />
-                    ) : (
-                      <View
-                        style={{
-                          ...size({ size: 42 }),
-                          borderRadius: 100,
-                          backgroundColor: '#FFFFFF22',
-                        }}
-                      />
-                    )}
+                    <ProfilePicture uri={c?.profilePicture || null} size={42} />
                     <View style={{ flex: 1 }}>
                       <View
                         style={{