username on creation

src/components/modal/ShareModal.js

@@ -46,9 +46,13 @@ const ShareModal = ({ payload }) => {
   const [copied, setCopied] = useState(false);
   const copyTimeout = useRef(null);
   const qrOpenTimeout = useRef(null);
+  const blurProps =
+    Platform.OS === "android"
+      ? { experimentalBlurMethod: "dimezisBlurView" }
+      : {};
 
   const closeSheet = useCallback(() => {
-    SheetManager.hide("Share");
+    return SheetManager.hide("Share");
   }, []);
 
   const shareText = useMemo(() => {
@@ -134,7 +138,7 @@ const ShareModal = ({ payload }) => {
       if (option?.type === "qr") {
         const qrTitleValue = qrTitle;
 
-        closeSheet();
+        const hidePromise = closeSheet();
         qrOpenTimeout.current = setTimeout(() => {
           setGlobal({
             shareQrModal: {
@@ -144,6 +148,8 @@ const ShareModal = ({ payload }) => {
             },
           });
         }, 200);
+
+        await hidePromise;
         return;
       }
 
@@ -151,21 +157,21 @@ const ShareModal = ({ payload }) => {
 
       if (!target) {
         await handleSystemShare();
-        closeSheet();
+        await closeSheet();
         return;
       }
 
       try {
         if (Platform.OS === "web") {
           window.open(target, "_blank", "noopener,noreferrer");
-          closeSheet();
+          await closeSheet();
           return;
         }
 
         const supported = await Linking.canOpenURL(target);
         if (supported) {
           await Linking.openURL(target);
-          closeSheet();
+          await closeSheet();
           return;
         }
       } catch (error) {
@@ -173,14 +179,14 @@ const ShareModal = ({ payload }) => {
       }
 
       await handleSystemShare();
-      closeSheet();
+      await closeSheet();
     },
     [closeSheet, handleSystemShare, qrTitle, qrUrl]
   );
 
   const onSystemShare = useCallback(async () => {
     await handleSystemShare();
-    closeSheet();
+    await closeSheet();
   }, [closeSheet, handleSystemShare]);
 
   const shareOptions = useMemo(() => {
@@ -233,8 +239,11 @@ const ShareModal = ({ payload }) => {
           style={[styles.card, styles.blurCard]}
           tint="dark"
           intensity={40}
-          experimentalBlurMethod="dimezisBlurView"
+          {...blurProps}
         >
+          <Pressable onPress={closeSheet} style={styles.closeButton} hitSlop={8}>
+            <Feather name="x" size={18} color={Palette.white} />
+          </Pressable>
           <Text style={styles.heading}>{heading}</Text>
           <View style={styles.linkRow}>
             <Text numberOfLines={1} style={styles.linkText}>
@@ -264,11 +273,7 @@ const ShareModal = ({ payload }) => {
           {copied ? <Text style={styles.copiedText}>Lien copié</Text> : null}
         </BlurView>
 
-        <BlurView
-          intensity={70}
-          experimentalBlurMethod="dimezisBlurView"
-          style={styles.card}
-        >
+        <BlurView intensity={70} style={styles.card} {...blurProps}>
           <Text style={styles.sectionHeading}>{sectionTitle}</Text>
           <View style={styles.optionsList}>
             {shareOptions.map((option, index) => {
@@ -278,7 +283,7 @@ const ShareModal = ({ payload }) => {
                   key={option?.key || index}
                   style={styles.optionBlur}
                   intensity={40}
-                  experimentalBlurMethod="dimezisBlurView"
+                  {...blurProps}
                 >
                   <Pressable
                     onPress={() => handleShareOption(option)}
@@ -304,7 +309,7 @@ const styles = StyleSheet.create({
     gap: 24,
   },
   card: {
-    // backgroundColor: Palette.glass,
+    backgroundColor: Palette.glass,
     overflow: "hidden",
     borderRadius: 24,
     borderWidth: 1,
@@ -315,6 +320,19 @@ const styles = StyleSheet.create({
   },
   blurCard: {
     overflow: "hidden",
+    position: "relative",
+  },
+  closeButton: {
+    position: "absolute",
+    top: 16,
+    right: 16,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(255, 255, 255, 0.12)",
+    zIndex: 2,
   },
   heading: {
     fontSize: 20,