modal transition

src/components/ProfilePicture.js

@@ -0,0 +1,65 @@
+import { Image } from "expo-image";
+import { memo } from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import { Palette } from "../styles";
+
+const DEFAULT_INTENSITY = Platform.select({ ios: 22, default: 14 });
+
+const ProfilePicture = ({
+  uri = null,
+  size = 48,
+  style,
+  blurIntensity = DEFAULT_INTENSITY,
+  blurTint = "dark",
+  imageProps = {},
+  transitionDuration = 120,
+  cachePolicy = "memory-disk",
+  contentFit = "cover",
+  accessibilityLabel,
+  ...rest
+}) => {
+  const dimensionStyle = {
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+  };
+
+  return (
+    <View
+      accessible
+      accessibilityRole="image"
+      accessibilityLabel={accessibilityLabel}
+      style={[styles.container, dimensionStyle, style]}
+      {...rest}
+    >
+      {uri ? (
+        <Image
+          source={{ uri: uri }}
+          contentFit={contentFit}
+          cachePolicy={cachePolicy}
+          transition={transitionDuration}
+          style={StyleSheet.absoluteFill}
+          {...imageProps}
+        />
+      ) : (
+        <>
+          <View style={[styles.fallback, dimensionStyle]} />
+        </>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+    backgroundColor: "transparent",
+  },
+  fallback: {
+    backgroundColor: Palette.glass,
+    borderColor: Palette.ultraLightWhite,
+    borderWidth: 2,
+  },
+});
+
+export default memo(ProfilePicture);

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={{