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>
-              <Pressable ref={moreButtonRef} onPress={onPressMenu}>
+              </PressableScale>
+              <PressableScale ref={moreButtonRef} onPress={onPressMenu}>
                 <RNImage source={icons.more} style={size({ size: 24 })} />
-              </Pressable>
+              </PressableScale>
             </View>
           </BlurView>
         </View>