diff --git a/src/components/player/NowPlayingOverlay.tsx b/src/components/player/NowPlayingOverlay.tsx index 08863cb..4d2f687 100644 --- a/src/components/player/NowPlayingOverlay.tsx +++ b/src/components/player/NowPlayingOverlay.tsx @@ -69,7 +69,10 @@ import { ScopedPaletteProvider, useColors, } from '@/theme/themed'; -import { AppPressable } from '@/components/AppPressable'; +import { + AppPressable, + AppPressableGestureScope, +} from '@/components/AppPressable'; import { motion } from '@/theme/motion'; import { paletteWithAccent } from '@/theme/scopedAccent'; import { useNowPlayingArtworkAccent } from '@/theme/useNowPlayingArtworkAccent'; @@ -1078,6 +1081,7 @@ export function NowPlayingOverlay({ }, ]} > + + {menuOpen && menuItems.length > 0 && ( diff --git a/src/components/player/TactilePressable.tsx b/src/components/player/TactilePressable.tsx index a5e3461..6ab29a3 100644 --- a/src/components/player/TactilePressable.tsx +++ b/src/components/player/TactilePressable.tsx @@ -1,11 +1,14 @@ /* eslint-disable react-hooks/immutability -- Reanimated shared values are mutable press state. */ -import type { ReactNode } from 'react'; +import { forwardRef, type ReactNode } from 'react'; import { - Pressable, - type PressableProps, type StyleProp, + type View as NativeView, type ViewStyle, } from 'react-native'; +import { + Pressable as GesturePressable, + type PressableProps as GesturePressableProps, +} from 'react-native-gesture-handler'; import Animated, { useAnimatedStyle, useSharedValue, @@ -15,12 +18,17 @@ import Animated, { import { playHaptic, type HapticEvent } from '@/lib/haptics'; import { motion } from '@/theme/motion'; -const AnimatedPressable = Animated.createAnimatedComponent(Pressable); +const GesturePressableWithRef = forwardRef( + function GesturePressableWithRef(props, ref) { + return ; + } +); +const AnimatedPressable = Animated.createAnimatedComponent(GesturePressableWithRef); type HapticFeedback = HapticEvent | 'none'; interface TactilePressableProps - extends Omit { + extends Omit { children: ReactNode; style?: StyleProp; pressedScale?: number; @@ -49,17 +57,17 @@ export function TactilePressable({ transform: [{ scale: scale.value }], })); - const handlePressIn: NonNullable = (event) => { + const handlePressIn: NonNullable = (event) => { scale.value = withTiming(pressedScale, motion.quick); onPressIn?.(event); }; - const handlePressOut: NonNullable = (event) => { + const handlePressOut: NonNullable = (event) => { scale.value = withTiming(1, motion.quick); onPressOut?.(event); }; - const handlePress: NonNullable = (event) => { + const handlePress: NonNullable = (event) => { if (haptic !== 'none') playHaptic(haptic); if (confirmationScale) { scale.value = withSequence(