diff --git a/src/lib/custom-animations/PressableScale.tsx b/src/lib/custom-animations/PressableScale.tsx index 4737b9ea32..f46ec003c1 100644 --- a/src/lib/custom-animations/PressableScale.tsx +++ b/src/lib/custom-animations/PressableScale.tsx @@ -2,7 +2,7 @@ import React from 'react' import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native' import Animated, { cancelAnimation, - runOnJS, + runOnUI, useAnimatedStyle, useReducedMotion, useSharedValue, @@ -28,7 +28,6 @@ export function PressableScale({ style?: StyleProp } & Exclude) { const reducedMotion = useReducedMotion() - const scale = useSharedValue(1) const animatedStyle = useAnimatedStyle(() => ({ @@ -38,21 +37,21 @@ export function PressableScale({ return ( { - 'worklet' - if (onPressIn) { - runOnJS(onPressIn)(e) - } - cancelAnimation(scale) - scale.value = withTiming(targetScale, {duration: 100}) + onPressIn={evt => { + onPressIn?.(evt) + runOnUI(() => { + 'worklet' + cancelAnimation(scale) + scale.set(withTiming(targetScale, {duration: 100})) + })() }} - onPressOut={e => { - 'worklet' - if (onPressOut) { - runOnJS(onPressOut)(e) - } - cancelAnimation(scale) - scale.value = withTiming(1, {duration: 100}) + onPressOut={evt => { + onPressOut?.(evt) + runOnUI(() => { + 'worklet' + cancelAnimation(scale) + scale.set(withTiming(1, {duration: 100})) + })() }} style={[!reducedMotion && animatedStyle, style]} {...rest}>