modal transition

2025-10-23 16:07:52 +02:00
parent bd26a2fb29
commit 7501b818c6
11 changed files with 227 additions and 162 deletions
@@ -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);