PressableScale

src/screens/Library/MusicDetails.js

@@ -16,6 +16,7 @@ import {
 } from "react-native-responsive-dimensions";
 import { useGlobal } from "reactn";
 import { background, icons } from "../../assets";
+import PressableScale from "../../components/PressableScale";
 import Slider from "../../components/Slider";
 import {
   arrayRemove,
@@ -356,7 +357,7 @@ const MusicDetails = ({ route }) => {
               <Text style={styles.name}>{artist}</Text>
             </View>
             <View style={{ ...Style.containerRow, gap: 12 }}>
-              <Pressable
+              <PressableScale
                 onPress={async () => {
                   if (!projectId || !currentUID) return;
                   const next = !fav;
@@ -377,7 +378,7 @@ const MusicDetails = ({ route }) => {
                   style={{ ...size({ size: 24 }) }}
                   resizeMode="contain"
                 />
-              </Pressable>
+              </PressableScale>
               <Pressable
                 onPress={() =>
                   SheetManager.show("Playlist", { payload: { projectId } })

src/screens/Library/MusicDetails.web.js

@@ -16,6 +16,7 @@ import {
 } from "react-native-responsive-dimensions";
 import { useGlobal } from "reactn";
 import { background, icons } from "../../assets";
+import PressableScale from "../../components/PressableScale";
 import Slider from "../../components/Slider";
 import {
   arrayRemove,
@@ -545,7 +546,7 @@ const MusicDetails = ({ route }) => {
                     />
                   </Pressable>
                   {/* Play / Pause */}
-                  <Pressable
+                  <PressableScale
                     style={{
                       ...size({ size: 40 }),
                       alignItems: "center",
@@ -558,9 +559,9 @@ const MusicDetails = ({ route }) => {
                       source={isPlaying ? icons.pause : icons.play}
                       style={size({ size: 34 })}
                     />
-                  </Pressable>
+                  </PressableScale>
                   {/* Next (forward 10s) */}
-                  <Pressable onPress={() => seekBy(10)}>
+                  <PressableScale onPress={() => seekBy(10)}>
                     <RNImage
                       source={icons.forward}
                       style={{
@@ -568,7 +569,7 @@ const MusicDetails = ({ route }) => {
                         transform: [{ rotate: "180deg" }],
                       }}
                     />
-                  </Pressable>
+                  </PressableScale>
                 </View>
                 <Slider
                   value={fmt(positionMs)}

src/screens/Library/components/MusicCard.js

@@ -1,21 +1,22 @@
 import { BlurView } from "expo-blur";
+import { Image as ExpoImage } from "expo-image";
 import React, { useEffect, useRef, useState } from "react";
 import {
+  Dimensions,
   Pressable,
+  Image as RNImage,
   StyleSheet,
   Text,
   View,
-  Image as RNImage,
-  Dimensions,
 } from "react-native";
-import { Image as ExpoImage } from "expo-image";
+import { responsiveWidth } from "react-native-responsive-dimensions";
 import { useGlobal } from "reactn";
 import { icons, img } from "../../../assets";
+import PressableScale from "../../../components/PressableScale";
 import { arrayRemove, arrayUnion, projectsRef } from "../../../config/firebase";
 import { Palette, Style } from "../../../styles";
 import { FONT_FAMILY } from "../../../styles/Fonts";
 import { size } from "../../../styles/Style";
-import { responsiveWidth } from "react-native-responsive-dimensions";
 
 const MusicCard = ({
   onPress,
@@ -152,16 +153,16 @@ const MusicCard = ({
                 gap: 12,
               }}
             >
-              <Pressable onPress={toggleLike}>
+              <PressableScale onPress={toggleLike}>
                 <RNImage
                   source={selected ? icons.heart : icons.heartOutline}
                   style={size({ size: 24 })}
                   resizeMode="contain"
                 />
-              </Pressable>
+              </PressableScale>
-              <Pressable ref={moreButtonRef} onPress={onPressMenu}>
+              <PressableScale ref={moreButtonRef} onPress={onPressMenu}>
                 <RNImage source={icons.more} style={size({ size: 24 })} />
-              </Pressable>
+              </PressableScale>
             </View>
           </BlurView>
         </View>

src/screens/Profile/Profile.js

@@ -17,6 +17,7 @@ import { useGlobal } from "reactn";
 import { background, icons, img } from "../../assets";
 import BorderGradient from "../../components/BorderGradient/BorderGradient";
 import MoreMenu from "../../components/MoreMenu";
+import PressableScale from "../../components/PressableScale";
 import { projectsRef, usersRef } from "../../config/firebase";
 import useDataFromRef from "../../hooks/useDataFromRef";
 import useLayoutType from "../../hooks/useLayoutType";
@@ -65,7 +66,7 @@ const Profile = () => {
         setFollowers(
           Array.isArray(currentUserData?.followedBy)
             ? currentUserData.followedBy.length
-            : 0,
+            : 0
         );
         return;
       }
@@ -139,8 +140,7 @@ const Profile = () => {
                 setSelectedProjectId(item.id);
                 setMenuPosition(posTop);
                 setShowMenu(
-                  (prev) =>
+                  (prev) => !prev || posTop?.top !== (menuPosition?.top ?? null)
-                    !prev || posTop?.top !== (menuPosition?.top ?? null),
                 );
               }}
             />
@@ -243,9 +243,9 @@ const Profile = () => {
       }}
       rightComponent={() =>
         !isWeb && isSelf ? (
-          <Pressable onPress={() => SheetManager.show("ProfileSettings")}>
+          <PressableScale onPress={() => SheetManager.show("ProfileSettings")}>
             <Image source={icons.more} style={{ ...size({ size: 24 }) }} />
-          </Pressable>
+          </PressableScale>
         ) : null
       }
     >
@@ -262,8 +262,8 @@ const Profile = () => {
             //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
             // }
           >
-            {isWeb && (
+            {isWeb && isSelf && (
-              <Pressable
+              <PressableScale
                 style={{
                   zIndex: 2,
                 }}
@@ -278,7 +278,7 @@ const Profile = () => {
                     top: 10,
                   }}
                 />
-              </Pressable>
+              </PressableScale>
             )}
 
             <View style={{ alignItems: "center" }}>