From be3c6ab93a5e3f573ceb8909df068d8a87f86474 Mon Sep 17 00:00:00 2001 From: Hailey Date: Wed, 25 Sep 2024 08:32:58 -0700 Subject: Improve style of reply bar (#5447) Co-authored-by: Samuel Newman --- src/lib/custom-animations/PressableScale.tsx | 53 ++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 src/lib/custom-animations/PressableScale.tsx (limited to 'src/lib/custom-animations/PressableScale.tsx') diff --git a/src/lib/custom-animations/PressableScale.tsx b/src/lib/custom-animations/PressableScale.tsx new file mode 100644 index 000000000..68315a978 --- /dev/null +++ b/src/lib/custom-animations/PressableScale.tsx @@ -0,0 +1,53 @@ +import React from 'react' +import {Pressable, PressableProps} from 'react-native' +import Animated, { + cancelAnimation, + runOnJS, + useAnimatedStyle, + useSharedValue, + withTiming, +} from 'react-native-reanimated' + +import {isTouchDevice} from '#/lib/browser' +import {isNative} from '#/platform/detection' + +const DEFAULT_TARGET_SCALE = isNative || isTouchDevice ? 0.98 : 1 + +export function PressableScale({ + targetScale = DEFAULT_TARGET_SCALE, + children, + ...rest +}: {targetScale?: number} & Exclude< + PressableProps, + 'onPressIn' | 'onPressOut' +>) { + const scale = useSharedValue(1) + + const style = useAnimatedStyle(() => ({ + transform: [{scale: scale.value}], + })) + + return ( + { + 'worklet' + if (rest.onPressIn) { + runOnJS(rest.onPressIn)(e) + } + cancelAnimation(scale) + scale.value = withTiming(targetScale, {duration: 100}) + }} + onPressOut={e => { + 'worklet' + if (rest.onPressOut) { + runOnJS(rest.onPressOut)(e) + } + cancelAnimation(scale) + scale.value = withTiming(1, {duration: 100}) + }} + {...rest}> + {children as React.ReactNode} + + ) +} -- cgit 1.4.1