optimise PressableScale for React Compiler

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<ViewStyle>
 } & Exclude<PressableProps, 'onPressIn' | 'onPressOut' | 'style'>) {
   const reducedMotion = useReducedMotion()
-
   const scale = useSharedValue(1)
 
   const animatedStyle = useAnimatedStyle(() => ({
@@ -38,21 +37,21 @@ export function PressableScale({
   return (
     <AnimatedPressable
       accessibilityRole="button"
-      onPressIn={e => {
+      onPressIn={evt => {
-        'worklet'
+        onPressIn?.(evt)
-        if (onPressIn) {
+        runOnUI(() => {
-          runOnJS(onPressIn)(e)
+          'worklet'
-        }
+          cancelAnimation(scale)
-        cancelAnimation(scale)
+          scale.set(withTiming(targetScale, {duration: 100}))
-        scale.value = withTiming(targetScale, {duration: 100})
+        })()
       }}
-      onPressOut={e => {
+      onPressOut={evt => {
-        'worklet'
+        onPressOut?.(evt)
-        if (onPressOut) {
+        runOnUI(() => {
-          runOnJS(onPressOut)(e)
+          'worklet'
-        }
+          cancelAnimation(scale)
-        cancelAnimation(scale)
+          scale.set(withTiming(1, {duration: 100}))
-        scale.value = withTiming(1, {duration: 100})
+        })()
       }}
       style={[!reducedMotion && animatedStyle, style]}
       {...rest}>