fix: update progress handling to use get() method for animated values

Author: enzomanuelmangano

example/app/index.tsx

@@ -5,8 +5,8 @@ import { interpolate } from 'react-native-reanimated';
 
 const PressableHighlight = createAnimatedPressable((progress) => {
   'worklet';
-  const opacity = interpolate(progress.value, [0, 1], [0, 0.1]).toFixed(2);
-  const scale = interpolate(progress.value, [0, 1], [1, 0.95]);
+  const opacity = interpolate(progress.get(), [0, 1], [0, 0.1]).toFixed(2);
+  const scale = interpolate(progress.get(), [0, 1], [1, 0.95]);
 
   return {
     backgroundColor: `rgba(255,255,255,${opacity})`,

example/app/screen.tsx

@@ -8,11 +8,11 @@ const PressableRotate = createAnimatedPressable((progress) => {
   'worklet';
   return {
     transform: [
-      { rotate: `${(progress.value * Math.PI) / 4}rad` },
-      { scale: interpolate(progress.value, [0, 1], [1, 0.9]) },
+      { rotate: `${(progress.get() * Math.PI) / 4}rad` },
+      { scale: interpolate(progress.get(), [0, 1], [1, 0.9]) },
     ],
     backgroundColor: interpolateColor(
-      progress.value,
+      progress.get(),
       [0, 1],
       ['#d1d1d1', '#000000']
     ),
@@ -21,8 +21,8 @@ const PressableRotate = createAnimatedPressable((progress) => {
       width: 0,
       height: 0,
     },
-    shadowOpacity: interpolate(progress.value, [0, 1], [0, 1]),
-    shadowRadius: interpolate(progress.value, [0, 1], [0, 150]),
+    shadowOpacity: interpolate(progress.get(), [0, 1], [0, 1]),
+    shadowRadius: interpolate(progress.get(), [0, 1], [0, 150]),
   };
 });
 

src/pressables/base.tsx

@@ -94,26 +94,26 @@ const BasePressable: React.FC<BasePressableProps> = React.memo(
     }, [animationType]);
 
     const progress = useDerivedValue<number>(() => {
-      return withAnimation(active.value ? 1 : 0, config);
+      return withAnimation(active.get() ? 1 : 0, config);
     }, [config, withAnimation]);
 
     const onPressInWrapper = useCallback(() => {
       if (!enabled) return;
-      active.value = true;
+      active.set(true);
       onPressInProvider?.();
       onPressIn?.();
     }, [active, enabled, onPressIn, onPressInProvider]);
 
     const onPressWrapper = useCallback(() => {
       if (!enabled) return;
-      active.value = false;
+      active.set(false);
       onPressProvider?.();
       onPress?.();
     }, [active, enabled, onPress, onPressProvider]);
 
     const onPressOutWrapper = useCallback(() => {
       if (!enabled) return;
-      active.value = false;
+      active.set(false);
       onPressOutProvider?.();
       onPressOut?.();
     }, [active, enabled, onPressOut, onPressOutProvider]);

src/pressables/custom/opacity.ts

@@ -4,6 +4,6 @@ import { createAnimatedPressable } from '../hoc';
 export const PressableOpacity = createAnimatedPressable((progress) => {
   'worklet';
   return {
-    opacity: interpolate(progress.value, [0, 1], [1, 0.5]),
+    opacity: interpolate(progress.get(), [0, 1], [1, 0.5]),
   };
 });

src/pressables/custom/scale.ts

@@ -6,7 +6,7 @@ export const PressableScale = createAnimatedPressable((progress) => {
   return {
     transform: [
       {
-        scale: interpolate(progress.value, [0, 1], [1, 0.96]),
+        scale: interpolate(progress.get(), [0, 1], [1, 0.96]),
       },
     ],
   };

src/pressables/utils.ts

@@ -3,7 +3,7 @@ import type { SharedValue } from 'react-native-reanimated';
 export const unwrapSharedValue = <T>(base: SharedValue<T> | T): T => {
   'worklet';
   if (typeof base === 'object' && base !== null && 'value' in base) {
-    return base.value;
+    return base.get();
   }
   return base;
 };