From 12a190124c7cadfed7ca0af5ceda1106fd8b1904 Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Thu, 11 Jul 2024 15:14:30 -0400 Subject: [PATCH 1/2] Add dependency array to useAnimatedStyle call in Slider --- src/components/AvatarCropModal/Slider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AvatarCropModal/Slider.tsx b/src/components/AvatarCropModal/Slider.tsx index 67aa89c9c550..9134dc00954b 100644 --- a/src/components/AvatarCropModal/Slider.tsx +++ b/src/components/AvatarCropModal/Slider.tsx @@ -32,7 +32,7 @@ function Slider({sliderValue, gestureCallbacks}: SliderProps) { // a translateX shared value and updates the slider position. const rSliderStyle = useAnimatedStyle(() => ({ transform: [{translateX: sliderValue.value}], - })); + }), [sliderValue]); const panGesture = Gesture.Pan() .minDistance(5) From 51b8c4a63f77a3e9017848b303faed0244d78fad Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Thu, 11 Jul 2024 16:07:25 -0400 Subject: [PATCH 2/2] Make it a worklet --- src/components/AvatarCropModal/Slider.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/AvatarCropModal/Slider.tsx b/src/components/AvatarCropModal/Slider.tsx index 9134dc00954b..bac581da25e6 100644 --- a/src/components/AvatarCropModal/Slider.tsx +++ b/src/components/AvatarCropModal/Slider.tsx @@ -30,9 +30,13 @@ function Slider({sliderValue, gestureCallbacks}: SliderProps) { // A reanimated memoized style, which tracks // a translateX shared value and updates the slider position. - const rSliderStyle = useAnimatedStyle(() => ({ - transform: [{translateX: sliderValue.value}], - }), [sliderValue]); + const rSliderStyle = useAnimatedStyle(() => { + 'worklet'; + + return { + transform: [{translateX: sliderValue.value}], + }; + }); const panGesture = Gesture.Pan() .minDistance(5)