Change main page and modify flows

src/screens/Library/components/MusicCard.js

@@ -1,13 +1,7 @@
 import { BlurView } from "expo-blur";
-import React, { useEffect, useState } from "react";
-import {
-  Image,
-  Platform,
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
+import React, { useEffect, useRef, useState } from "react";
+import { Platform, Pressable, StyleSheet, Text, View, Image as RNImage } from "react-native";
+import { Image as ExpoImage } from "expo-image";
 import { useGlobal } from "reactn";
 import { icons, img } from "../../../assets";
 import { arrayRemove, arrayUnion, projectsRef } from "../../../config/firebase";
@@ -28,6 +22,7 @@ const MusicCard = ({
   const [selected, setSelected] = useState(false);
   const [layout, setLayout] = useState(null);
   const [menuPos, setMenuPos] = useState(0);
+  const cardRef = useRef(null);
 
   useEffect(() => {
     if (layout) {
@@ -57,6 +52,19 @@ const MusicCard = ({
   };
 
   const onPressMenu = () => {
+    // Prefer absolute screen position when available (Portal rendering)
+    if (cardRef?.current?.measureInWindow) {
+      try {
+        cardRef.current.measureInWindow((x, y, width, height) => {
+          const top = (y || 0) + 45;
+          setMenuPos(top);
+          onPressMore?.(top);
+        });
+        return;
+      } catch (e) {
+        // fallback to relative layout position
+      }
+    }
     onPressMore?.(menuPos);
   };
 
@@ -67,13 +75,25 @@ const MusicCard = ({
           ...Style.containerRow,
           gap: 6,
         }}
+        ref={cardRef}
         onPress={onPress}
         onLayout={(e) => setLayout(e.nativeEvent.layout)}
       >
-        <Image
-          source={imageUri ? { uri: imageUri } : img.placeholder2}
-          style={{ ...size({ size: 60 }), borderRadius: 12 }}
-        />
+        {imageUri ? (
+          <ExpoImage
+            source={{ uri: imageUri }}
+            cachePolicy="memory-disk"
+            priority="high"
+            contentFit="cover"
+            transition={100}
+            style={{ ...size({ size: 60 }), borderRadius: 12 }}
+          />
+        ) : (
+          <RNImage
+            source={img.placeholder2}
+            style={{ ...size({ size: 60 }), borderRadius: 12 }}
+          />
+        )}
         <View style={styles.blurContainer}>
           <BlurView
             intensity={20}
@@ -97,14 +117,14 @@ const MusicCard = ({
               }}
             >
               <Pressable onPress={toggleLike}>
-                <Image
+                <RNImage
                   source={selected ? icons.heart : icons.heartOutline}
                   style={size({ size: 24 })}
                   resizeMode="contain"
                 />
               </Pressable>
               <Pressable onPress={onPressMenu}>
-                <Image source={icons.more} style={size({ size: 24 })} />
+                <RNImage source={icons.more} style={size({ size: 24 })} />
               </Pressable>
             </View>
           </BlurView>