[🐴] Adjust press and hold delay on messages (#3918)

* adjust press and hold delay on messages

* adjust hit slop
zio/stable
Hailey 2024-05-08 13:56:36 -07:00 committed by GitHub
parent 701e508a1a
commit f62b0458a7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 5 deletions

View File

@ -1,4 +1,4 @@
import React, {useCallback} from 'react' import React from 'react'
import {Keyboard, Pressable, View} from 'react-native' import {Keyboard, Pressable, View} from 'react-native'
import Animated, { import Animated, {
cancelAnimation, cancelAnimation,
@ -9,6 +9,7 @@ import Animated, {
} from 'react-native-reanimated' } from 'react-native-reanimated'
import {ChatBskyConvoDefs} from '@atproto-labs/api' import {ChatBskyConvoDefs} from '@atproto-labs/api'
import {HITSLOP_10} from 'lib/constants'
import {useHaptics} from 'lib/haptics' import {useHaptics} from 'lib/haptics'
import {atoms as a} from '#/alf' import {atoms as a} from '#/alf'
import {MessageMenu} from '#/components/dms/MessageMenu' import {MessageMenu} from '#/components/dms/MessageMenu'
@ -37,12 +38,12 @@ export function ActionsWrapper({
// Reanimated's `runOnJS` doesn't like refs, so we can't use `runOnJS(menuControl.open)()`. Instead, we'll use this // Reanimated's `runOnJS` doesn't like refs, so we can't use `runOnJS(menuControl.open)()`. Instead, we'll use this
// function // function
const open = useCallback(() => { const open = React.useCallback(() => {
Keyboard.dismiss() Keyboard.dismiss()
menuControl.open() menuControl.open()
}, [menuControl]) }, [menuControl])
const shrink = useCallback(() => { const shrink = React.useCallback(() => {
'worklet' 'worklet'
cancelAnimation(scale) cancelAnimation(scale)
scale.value = withTiming(1, {duration: 200}, () => { scale.value = withTiming(1, {duration: 200}, () => {
@ -52,7 +53,7 @@ export function ActionsWrapper({
const grow = React.useCallback(() => { const grow = React.useCallback(() => {
'worklet' 'worklet'
scale.value = withTiming(1.05, {duration: 750}, finished => { scale.value = withTiming(1.05, {duration: 450}, finished => {
if (!finished) return if (!finished) return
animationDidComplete.value = true animationDidComplete.value = true
runOnJS(playHaptic)() runOnJS(playHaptic)()
@ -74,7 +75,8 @@ export function ActionsWrapper({
style={animatedStyle} style={animatedStyle}
unstable_pressDelay={200} unstable_pressDelay={200}
onPressIn={grow} onPressIn={grow}
onTouchEnd={shrink}> onTouchEnd={shrink}
hitSlop={HITSLOP_10}>
{children} {children}
</AnimatedPressable> </AnimatedPressable>
<MessageMenu message={message} control={menuControl} hideTrigger={true} /> <MessageMenu message={message} control={menuControl} hideTrigger={true} />